html { height: 100%; }

body {
    height: 100%;
    min-width:1000px;
    width: 100%;
}


.gridCanvas {
    height: 100%;
}
/*#app{
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 999;}*/

#myLocation,  #myLocationAct, #selectr, #character, #program,#save, #newFile, #openFile, #switchMode, #editProgram, #openNewActivity,#runAgain, #next, #previous, #again, #test{
    z-index:    999;
    position: relative;
}

#trash{
    opacity:    0.5;
    /*background: #000;*/
    width:      100%;
    height:     100%;
    top:        0;
    left:       0;
    position:   fixed;
}

.display-none {
    display: none;
}

.commandButton{
    padding-top: 5px;
    display:block;
    width:100%;
    height:7%;
    text-align: center;
    vertical-align: middle;
    color:white; /*#3e3e3e;*/
    background:#4287f5; /*#7cb289;*/
    float: left;
    cursor: pointer;
}

.commandButtonLink{
    padding-top: 5px;
    display:block;
    width:100%;
    height:7%;
    float: left;
}

.commandButtonInactive{
    padding-top: 5px;
    display:block;
    width:100%;
    height:7%;
    text-align: center;
    vertical-align: middle;
    color:white; /*#3e3e3e;*/
    background:#4287f5; /*#7cb289;*/
    float: left;
}

.commandButton:hover {
    background-color: white;
    color: #4287f5;
}



.commandDraggable {
    background: #989fab;
    height:30px;
    width:50px;
}

.commandDropped {
    background: #7d9ed1;
    height:7%;
    width:100%;
    border: lightgrey 1px solid;

}

.commandDroppedInside {
    background: #7d9edd;
    height:45%;
    width:90%;
    border: lightgrey 1px solid;
    float:right;
}

.commandDroppedRepeat {
    background: #7d9ed1;
    height:15%;
    width:100%;
    border: lightgrey 1px solid;

}

.dragAreaMain {
    height: 94%;
    min-height: 50px;
    padding-left: 0px;
    margin-bottom: 0px;
    outline: 1px solid lightgrey;
    overflow: auto;
    /*
    background: url('background.png') no-repeat ;
    */
}

.dragArea {
    min-height: 50px;
    /*
    outline: 1px dashed;
    */
}

.commandInput{
    width:25%;
    float: right;
}


option:hover {
    /*optional rendered */
    background-color: red;
}

@media only screen and (max-height: 500px) {
    #footer {
        display: none;
    }
}

/*#footer {
    position: relative;
    margin-top: -50px; !* negative value of footer height *!
    height: 50px;
    clear:both;
    padding-top:20px;
}*/