html, body {
    max-width: 100%;
}

body {
    font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
    font-size: 13pt;
}

/** Collecting all z-indices for easier maintenance */
header                 {z-index: 100;}
#container     {z-index: 0;} /* only used for turtle module*/
#background-canvas     {z-index: 1;} /* 1 */
#tiles-canvas          {z-index: 10;} /* 2 */
#tiles-canvas-anim     {z-index: 11;} /* 3 */
#bridge-canvas         {z-index: 20;} /* 4 */
#bridge-canvas-anim    {z-index: 21;} /* 5 */
#decorative-objects-canvas      {z-index: 30;} /* 6 */
#decorative-objects-canvas-anim {z-index: 31;} /* 7 */
#obstacles-canvas      {z-index: 40;} /* 8 */
#obstacles-canvas-anim {z-index: 41;} /* 9 */
#goal-canvas           {z-index: 50;} /* 10 */
#goal-canvas-anim      {z-index: 52;} /* 12 */
#objects-canvas        {z-index: 60;} /* 13 */
#objects-canvas-anim   {z-index: 61;} /* 14 */
#trace-canvas          {z-index: 70;} /* 15 */
#pushables-canvas      {z-index: 80;} /* 16 */
#pushables-canvas-anim {z-index: 81;} /* 17 */
#wall-canvas           {z-index: 89;} /* 18 */
#robot-canvas          {z-index: 90;} /* 19 */
#robot-anim-canvas     {z-index: 91;} /* 20 */
/* when adding a new canvas such as an overlay, on top of #robot-anim-canvas,
ensure that it replaces #robot-anim-canvas in world_editor.js and canvas.js */
#tooltip               {z-index: 100;}
#Reeborg-writes        {z-index: 210;}
#Reeborg-success     {z-index: 211;}
#Reeborg-failure        {z-index: 211;}
#World-info            {z-index: 205;}
#world-panel           {z-index: 120;}
#editor-panel.active   {z-index: 200;}
#keyboard-buttons ul li {z-index: 230;}

button:focus, a:focus {
    outline: none;
}

button[disabled] {
    background: #eee;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 800px;
}

header form {
    font-size: .8em;
    font-weight: bold;
    position: relative;
    float: left;
    margin-left: 5px;
    padding: 5px;
    padding-top: 8px;
    color: white;
    border-left: 1px solid rgba(255, 255, 255, .3);
}

h1 {
    font-size: 1.7em;
    color: #248;
}

h2 {
    font-size: 1.3em;
    color: #248;
}

h3 {
    font-size: 1.1em;
    color: #248;
}

canvas{
    position: absolute;
    top: 5px;
    border: 1px solid green;
}

.edit-canvas {
    position: relative;
}

.align-middle {
    vertical-align: middle;
}

#tooltip {
    background-color: white;
    border: 1px solid blue;
    position: absolute;
    left: -200px;
    top: 100px;
}

#py-console {
    position: absolute;
    top: 100px;
    left: 650px;
    font-weight: bold;
}

code {
    font-family: 'Roboto Mono', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace;
    font-weight: bold;
    color: green;
}

pre.error {
    color: darkred;
}

nav {
    text-align: center;
}

nav a {
    display: inline-block;
    margin: 0;
}

nav a:last-child {
    border-radius: 0 20px 20px 0;
}

nav a:first-child {
    border-radius: 20px 0 0 20px;
}

#highlight, #watch-variables-btn {
    height: 40px;
}
#highlight:disabled, #watch-variables-btn:disabled, 
#open-solution-btn:disabled, #save-solution-btn:disabled{
    display: none !important;
}

button {
    font-weight: bold;
    position: relative;
    height: 37px;
    margin: 0;
    background-color: #124;
}


a.left-link, a.right-link, button, a.fake-button {
    font-size: 12pt;
    padding: 5px;
    text-decoration: none;
    color: white !important;
    border-top: 0;
    border-right: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, .3);
}

p button {
    float: none;
}

a[href^='http'] {
    padding-right: 16px;
    background: transparent url(../images/external_link.png) right no-repeat;
}

#select-world {
    margin: 10px;
}
.select-menu {
    background-color:#9ff;
}
.select-local-storage {
    background-color:#ff9;
}
.select-mixed {
    background-color: beige;
}

.filename:focus {
    border: 2px solid blue;
}
.filename:hover {
    border: 2px solid green;
}

fieldset {
    display: inline-block;
    color: #123264;
    border: solid #123264;
    border-radius: 10px;
}

fieldset label {
    display: block;
}

fieldset label input {
    float: right;
}

fieldset label input[type='checkbox'] {
    float: left;
}

legend {
    color: #123264;
}

#resize {
    float: right;
}

.active-element {
    background-color: #124;
}
button.solution-button {
    border: 1px solid #124;
    background-color: white;
}

.automatic-description a.fake-button,
.ui-tabs .ui-tabs-nav li,
.blue-gradient,
.left-link,
.right-link,
.ui-widget-header {
    background-color: #123264;
    background-image: -webkit-linear-gradient(top, #2d5ab4 20%, #1e3c78 60%, #123264 80%);
    background-image: -moz-linear-gradient(top, #2d5ab4 20%, #1e3c78 60%, #123264 80%);
    background-image: -ms-linear-gradient(top, #2d5ab4 20%, #1e3c78 60%, #123264 80%);
    background-image: -o-linear-gradient(top, #2d5ab4 20%, #1e3c78 60%, #123264 80%);
    background-image: -linear-gradient(top, #2d5ab4 20%, #1e3c78 60%, #123264 80%);
}

input.blue-gradient {
  font-size: 12pt;
    font-weight: bold;
    position: relative;
    height: 37px;
    margin: 0;
    background-color: #124;
    color: white;
}
button.blue-gradient {
  font-size: 12pt;
}
.ui-tabs .ui-tabs-nav li, .ui-tabs .ui-tabs-nav li.ui-tabs-active:hover {
    top: 3px;
    border-bottom: 3px solid #75a110;
}

.ui-tabs .ui-tabs-nav li:first-child {
    margin-left: 30px;
}

.ui-tabs .ui-tabs-nav li a {
    color: white;
    font-size: 12pt;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    top: 3px;
    border-bottom: 3px solid #124;
    background-color: #124;
    background-image: none;
}

.ui-tabs .ui-tabs-nav li:hover,
button:hover:enabled,
a.fake-button:hover,
.green-gradient,
a.left-link:hover,
a.right-link:hover,
input.blue-gradient:hover {
    background-color: #75a110;
    background-image: -webkit-linear-gradient(top, #beff7f, #96c423 50%, #75a110);
    background-image: -moz-linear-gradient(top, #beff7f, #96c423 50%, #75a110);
    background-image: -ms-linear-gradient(top, #beff7f, #96c423 50%, #75a110);
    background-image: -o-linear-gradient(top, #beff7f, #96c423 50%, #75a110);
    background-image: -linear-gradient(top, #beff7f, #96c423 50%, #75a110);
}

.alert .ui-widget-header {
    background-color: #c80000;
    border-bottom: 1px solid #c80000;
    background-image: none;
}

.concludes .ui-widget-header {
    background-color: #75a110;
    background-image: -webkit-linear-gradient(top, #beff7f, #96c423 50%, #75a110);
    background-image: -moz-linear-gradient(top, #beff7f, #96c423 50%, #75a110);
    background-image: -ms-linear-gradient(top, #beff7f, #96c423 50%, #75a110);
    background-image: -o-linear-gradient(top, #beff7f, #96c423 50%, #75a110);
    background-image: -linear-gradient(top, #beff7f, #96c423 50%, #75a110);
}


.proclaims .ui-widget-header {
    background-color: #663399;
    border-bottom: 1px solid #663399;
    background-image: none;
}

.watches .ui-widget-header {
    background-color: #3e7e10;
    border-bottom: 1px solid #3e7e10;
    background-image: none;
}

.warning {
    color: red;
    text-shadow: 1px 1px 1px black;
}

.green-border {
    border-bottom: 4px solid #75a110;
}

.ui-widget-header {
    border-bottom: 3px solid #75a110;
}

.success {
    list-style: none;
    color: green;
}

li.success:after, p.success:after {
    content: url(../images/ok.png);
}

.failure {
    list-style: none;
    color: #c80000;
}

li.failure:after, p.failure:after {
    content: url(../images/not_ok.png);
}

.CodeMirror {
    font-size: 13px;
    width: 99.9%;
    height: 100%;
    border: 1px solid black;
}

/* reeborg-readonly is identical as reeborg-dark except for striped
   background and the fact that the cursor is invisible;
   it is meant to give a visual clue that the text cannot be edited */

.cm-s-reeborg-readonly,
.cm-s-reeborg-dark {
    font-size: 13pt;
    line-height: 1.4em;
}
/*.cm-s-reeborg-readonly,
.cm-s-reeborg-dark
{
    font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace;
}*/

.cm-s-reeborg-readonly.CodeMirror,
.cm-s-reeborg-dark.CodeMirror {
    color: white;
    border: 0;
    background: #124;
}

.cm-s-reeborg-readonly .CodeMirror-gutters,
.cm-s-reeborg-dark .CodeMirror-gutters {
    border-right: 3px solid rgb(117, 161, 16);
    background: #248;
}
.cm-s-reeborg-readonly.CodeMirror {
    background-image: -webkit-linear-gradient(45deg, rgba(10, 10, 10, .4) 25%, transparent 25%, transparent 50%, rgba(10, 10, 10, .4) 50%, rgba(10, 10, 10, .4) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(10, 10, 10, .4) 25%, transparent 25%, transparent 50%, rgba(10, 10, 10, .4) 50%, rgba(10, 10, 10, .4) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(45deg, rgba(10, 10, 10, .4) 25%, transparent 25%, transparent 50%, rgba(10, 10, 10, .4) 50%, rgba(10, 10, 10, .4) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(10, 10, 10, .4) 25%, transparent 25%, transparent 50%, rgba(10, 10, 10, .4) 50%, rgba(10, 10, 10, .4) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(10, 10, 10, .4) 25%, transparent 25%, transparent 50%, rgba(10, 10, 10, .4) 50%, rgba(10, 10, 10, .4) 75%, transparent 75%, transparent);
    background-size: 50px 50px;
}


.cm-s-reeborg-readonly .CodeMirror-linenumber,
.cm-s-reeborg-dark .CodeMirror-linenumber {
    font-size: 9pt;
    color: white;
}


.cm-s-reeborg-readonly .CodeMirror-cursor {
    display: none;
}
.cm-s-reeborg-dark .CodeMirror-cursor {
    border-left: 2px solid white !important;
}

.cm-s-reeborg-readonly .cm-comment,
.cm-s-reeborg-dark .cm-comment {
    font-style: italic;
    line-height: 1em;
    color: #9c9;
}

.cm-s-reeborg-readonly .cm-atom,
.cm-s-reeborg-dark .cm-atom {
    color: #f4c20b;
}

.cm-s-reeborg-readonly .cm-number,
.cm-s-reeborg-readonly .cm-attribute,
.cm-s-reeborg-dark .cm-number,
.cm-s-reeborg-dark .cm-attribute {
    color: #cef;
}

.cm-s-reeborg-readonly .cm-keyword,
.cm-s-reeborg-readonly .cm-tag,
.cm-s-reeborg-dark .cm-keyword,
.cm-s-reeborg-dark .cm-tag {
    color: #fbde2d;
}

.cm-s-reeborg-readonly .cm-operator,
.cm-s-reeborg-dark .cm-operator {
    color: #fbde2d;
}

.cm-s-reeborg-readonly .cm-string,
.cm-s-reeborg-dark .cm-string {
    color: #f08047;
}

.cm-s-reeborg-readonly .cm-variable-2,
.cm-s-reeborg-dark .cm-variable-2 {
    color: #9f9;
}

.cm-s-reeborg-readonly .cm-def,
.cm-s-reeborg-dark .cm-def {
    color: #9f9;
}

.cm-s-reeborg-readonly .cm-variable-3,
.cm-s-reeborg-dark .cm-variable-3 {
    color: #9f9;
}

.cm-s-reeborg-dark .cm-builtin,
.cm-s-reeborg-dark .cm-special,
.cm-s-reeborg-readonly .cm-builtin,
.cm-s-reeborg-readonly .cm-special {
    color: #ff9d00;
}

.cm-s-reeborg-dark .cm-tab:before,
.cm-s-reeborg-readonly .cm-tab:before {
    content: '➤';
    color: red;
}

.lint-error {
    font-size: 80%;
    padding: 2px 5px 3px;
    color: black;
    background: #ffa;
}

.lint-error-icon {
    font-weight: bold;
    margin-right: 7px;
    padding: 0 3px;
    color: white;
    border-radius: 50%;
    background-color: red;
}

.hidden {
    display: none;
}

.user_note {
    margin: 0 10px 0 10px;
    border: 1px solid #ccc;
}

.inline-block {
    display: inline-block;
    margin: 10px;
}

.automatic-description {
  border: 4px solid #248;
  padding: 1em;
}

.automatic-description a {
    color: blue;
}

.grid-info {
    background-color: cornsilk;
    padding: 1em;
    font-size: 75%;
}

#logo {
    font-size: 30px;
    font-weight: bold;
    line-height: 27px;
    float: left;
    margin-right: 30px;
    padding-right: 20px;
    padding-left: 30px;
    text-decoration: none;
    color: white;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .3), 0 0 5px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3), 1px 3px 5px rgba(0, 0, 0, .4), 2px 5px 10px rgba(0, 0, 0, .35), 5px 10px 10px rgba(0, 0, 0, .45);
}

#logo img {
    position: absolute;
    top: 0;
    left: -5px;
    float: left;
    margin: 0;
    padding: 0;
}

#move-handle {
    margin:0;
    cursor:move;
    background-color: #ddd;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#editor-visible-label, #editor-visible-input {
    display:none;
    color:white;
    font-size: .8em;
    font-weight: bold;
}

#run {
    margin-left: 0;
}

#tabs {
    overflow: auto;
    height: 98%;
}

#tabs .ui-tabs-panel {
    padding: 0;
}

#editor,
#library {
    width: 100%;
    height: 90%;
}

#editor-panel {
    box-shadow: 5px 5px 7px 0 rgba(50, 50, 50, .6);
}

#cmd-result {
    color: green;
}

#canvas-wrapper {
    position: absolute;
    top: 42px;
}
#image-choice-buttons,  /* old */
#image-choice-buttons-small {
    float: right;
}

#image-choice-buttons button,  /* old */
#image-choice-buttons-small button {
    margin-left: 1px;
    padding: 0;
    border: 1px solid blue;
    border-radius: 3px;
    background: white;
    margin-top: 5px;
}

#image-choice-buttons-small button {
    height: 20px;
    width: 22px;
}
#image-choice-buttons-small button img {
    width: 20px;
}

#game-controls,
#world-controls {
    position: absolute;
    top: 5px;
}

#game-controls button,
#world-controls button,
#world-edit-buttons button {
    float: none;
}

#world-panel, #blockly-wrapper {
    width: 620px;
}
#world-panel {
    background-color: white;
}

#editor-panel {
    width: 590px;
}

#world-panel,
#editor-panel, #blockly-wrapper {
    position: absolute;
    margin-top: 37px;
    vertical-align: top;
}

#world-panel,
#editor-panel {
    height: 600px;
    padding: 0 5px;
}

#editor-panel {
    left: 650px;
}
#blockly-wrapper {
    left: 640px;
    padding: 0;
    height: 600px;
}

#blocklyDiv {
    height: 100%;
    width: 100%;
    position: relative;
}

#editor-panel.active {
    display: block;
}
#editor-panel {
    display:none;
}

#print-html {
    font-family: Verdana, sans-serif;
    font-size: 16px;
}

#watch-variables div {
    border-bottom: 1px dashed #3e7e10;
    margin: 4px;
}

.watch_value {
    display: inline-block;
    color: blue;
    font-family: 'Roboto Mono', monospace;
    max-width: 500px;
    padding-left: 1em;
}

.changed_value {
    display: inline-block;
    color: #c00;
    font-family: 'Roboto Mono', monospace;
    max-width: 500px;
    padding-left: 1em;
}

.watch_name {
    color: black;
    font-weight: bold;
    float: left;
}

.changed_name {
    color: #c00;
    font-weight: bold;
    float: left;
}

.watch_title {
    background-color: #3e7e10;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    padding-left: 3em;
    padding-right: 3em;
}

#stdout {
    margin-top: 10px;
}

.reeborg-print {
    font-family: 'Roboto Mono', monospace;
    font-size: 16px;
}

#Reeborg-writes {
    background-color: white;
}

#human-language {
    position: absolute;
    right: 1em;
    top: 10px;
}

/* edit world menu */

#edit-world-nav {
    float: left;
    margin: 0;
    padding: 0;
    background: #e5e5e5;
}

#edit-world-nav li a,
#edit-world-nav li {
    float: left;
}

#edit-world-nav li {
    position: relative;
    list-style: none;
}

#edit-world-nav li a,
#edit-world-nav li.a-like {
    width: 150px;
    padding: .5em;
    font-size: 12pt;
}

#edit-world-nav li a,
#edit-world-nav li {
    text-decoration: none;
    color: white;
    background-color: #123264;
    background-image: -webkit-linear-gradient(top, #2d5ab4 20%, #1e3c78 60%, #123264 80%);
    background-image: -moz-linear-gradient(top, #2d5ab4 20%, #1e3c78 60%, #123264 80%);
    background-image: -ms-linear-gradient(top, #2d5ab4 20%, #1e3c78 60%, #123264 80%);
    background-image: -o-linear-gradient(top, #2d5ab4 20%, #1e3c78 60%, #123264 80%);
    background-image: -linear-gradient(top, #2d5ab4 20%, #1e3c78 60%, #123264 80%);
}

#edit-world-nav li a:hover {
    background-color: #75a110;
    background-image: -webkit-linear-gradient(top, #beff7f, #96c423 50%, #75a110);
    background-image: -moz-linear-gradient(top, #beff7f, #96c423 50%, #75a110);
    background-image: -ms-linear-gradient(top, #beff7f, #96c423 50%, #75a110);
    background-image: -o-linear-gradient(top, #beff7f, #96c423 50%, #75a110);
    background-image: -linear-gradient(top, #beff7f, #96c423 50%, #75a110);
}
/* Submenu */

#edit-world-nav li ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    margin: 0;
    padding: 0;
}

#edit-world-nav li:hover > ul {
    display: block;
}

#edit-world-nav li ul li,
#edit-world-nav li ul li a {
    float: none;
}

#edit-world-nav li ul li a {
    display: block;
}
/* SUBSUB Menu */

#edit-world-nav li ul li ul {
    display: none;
}

#edit-world-nav li ul li:hover ul {
    top: 0;
    left: 100%;
}

#edit-world-submenus-wrapper {
    min-height: 100px;
}

.edit-world-canvas li,
.edit-goal-canvas li,
#edit-tile li {
    position: relative;
    display: inline;
    float: left;
    list-style: none;
    text-align: center;
}

.edit-world-canvas li img {
    margin-right: 10px;
}

#additional-code {
    margin-top: 200px;
}

.editor-highlight, .cm-s-reeborg-dark div.CodeMirror-selected {
    background: #2d5ab4;
}
.float-right {
    float: right;
}

#keyboard-buttons ul li { background: white;
    display: inline-block;
    border: 1px solid silver;
    cursor: pointer;
    height: 20px;
    margin: 5px;
    padding: 10px;
}

#keyboard-buttons ul li img {
    height: 32px;
}

#keyboard-buttons ul li:hover {
    background: #ffd;
}

#keyboard-buttons ul {
    padding-left:0;
    margin-left:0;
    padding-top:0;
    margin-top:0;
}

#mixed-language-info {
    position: absolute;
    background-color: beige;
    bottom: 0;
    padding: 10px;
    margin: 10px;
    border: darkred 1px solid;
    border-radius: 10px;
    line-height: 2em;
}

input[type=range].enabled {
  cursor: pointer;
  color: blue;
}
input[type=range].disabled {
  cursor: not-allowed;
  color: red;
}


table {
    border: solid 1px #dde;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
th {
    border: solid 1px #dde;
    color: #248;
    padding: 1em;
    margin: 1em;
    text-align: left;
}
td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
}

.difficulty {
    margin: auto;
}

.difficulty > img {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
}


.difficulty1, .difficulty2, .difficulty3, .difficulty4 {
  background-color: hsl(120, 100%, 40%);
}

.difficulty5 {
  background: linear-gradient(
    to top,
    hsl(120, 100%, 40%),
    hsl(54, 100%, 50%)
    );
}

.difficulty6 {
  background-color: hsl(54, 100%, 50%);
}

.difficulty7 {
  background: linear-gradient(
    to top,
    hsl(54, 100%, 50%),
    hsl(30, 100%, 50%)
    );
}

.difficulty8 {
  background-color: hsl(30, 100%, 50%);
}

.difficulty9 {
  background: linear-gradient(
    to top,
    hsl(30, 100%, 50%),
    hsl(0, 100%, 50%)
    );
}

.difficulty10 {
  background-color: hsl(0, 100%, 50%);
}


@keyframes glowing {
  0% { box-shadow: 0 0 -20px #ca0; }
  40% { box-shadow: 0 0 40px #ca0; }
  60% { box-shadow: 0 0 40px #ca0; }
  100% { box-shadow: 0 0 -20px #ca0; }
}

p#thought {
  position: absolute;
  z-index: 1000;
  top: 200px;
  left: 200px;
  width: 150px;
  height: 100px;
  text-align: middle;
  line-height: 100px;
  background-color: #fff;
  border: 8px solid #248;
  border-radius: 58px;
  box-shadow: 2px 2px 4px #124;
  animation: glowing 1000ms infinite;
}

p#thought img {
    position: relative;
    top: 20px;
}