style1.css

body{
    background-color:#000;
    font-family:Arial;
    font-size:11pt;
    position:fixed;
    left:0px;
    margin: 0px;
}


/*****************************
GENERAL
 *****************************/


#header{
    position:fixed;
    top:0px;
    width:100%;
    height:50px;
    background-color:gray;
    padding:0px;
}



.headerButton {
     float: right;
     margin: 15px;
}

#content{
    position:absolute;
    top:50px;
    left:0px;
    padding:0px;
 }

#Drawer{
     position:fixed;
     left:0px;
     background-color:darkslateblue;
     height: 100%;
     width: 200px;
 }

#code{
     position:absolute;
     top:0px;
     left:200px;
 }

 /*****************************
  CODE / HEADER
  *****************************/

.header {
     float: right;
     margin: 15px;
}

table{
     border-style: solid; 
     border-radius: 10px;
}

th table{
    border:none;
}

th {
     white-space:nowrap;
}

.expr{
     border: gray; 
     border-style: solid;
     border-radius: 10px;
     padding: 2px;
}



#List li{
     cursor:mover;
     margin-bottom:5px;
}

form{
     height: 10px;
}

.droppable{
     border: gray;
     border-style: solid; 
     border-radius: 10px;
     padding: 2px;
}



/*****************************
 DRAWER
 *****************************/

#options{
     width:200px;
     float:top;
     background-color:darkslateblue;
     z-index:100;
     overflow-y: auto;
}

#options span {
     padding: 5px;
     border: 1px solid black;
     border-radius: 5px;
     line-height:30px;
     white-space: nowrap;
}

#options .toggleHeader{
    width:100%;
    text-align:center;
    border-bottom: 1px solid #000;
    border-top:1px solid #000;
}

#options  div{
    margin: 3px;
    display:none;
}

#options h1{
    margin-top:0px;
    margin-bottom:0px;
    font-size:20px;
}

#storage{
    position:fixed;
    bottom:0px;
    padding-top: 5px;
    padding-left:5px;
    width:195px;
    height:100px;
    background-color:#fff;
    list-style:none;
}

#storagePopup {
    position:absolute;
    top:50px;
    left:250px;
    width:500px;
    height:500px;
    background-color:gray;
    padding:10px;
}

#codePopup {
    position:absolute;
    top:50px;
    left:250px;
    width:50%;
    height:500px;
    background-color:white;
    padding:10px;
}

.noborder{
    border:none;
}
table .ERROR{
    background-color:red !important;
}
.expr .ERROR{
    background-color:red !important;
}
table{
    background-color:white;
}

.wired{
    opacity:.4;
}

.highlighted{
    background-color:yellow !important;
}

.ErrorMessage{
    background-color:#FCF0AD;
    position:absolute;
    
}

.definition{
    width:100%;
    text-align:center;
    border-bottom: 1px solid #000;
    border-top:1px solid #000;
    background-color:white;
}

.outputMessage{
    background-color:white;
}

.output{
    background-color:white;
    overflow:auto
}

.errorOutput{
    background-color:#FCF0AD;
    width:300px;
    overflow:auto;
}

/******************************
Dialog Box
********************************/
/*prevents user from clicking outside dialog box when open*/
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.ui-dialog {
background-color:#fff;
padding: 5px;
}

/****************************
Defines
****************************/
#graybox{
    background-color: gray;
    opacity:1;
    width:100%;
    heigth:100%;
    opacity:.6;
    position:absolute;
    top:0px;
    left:0px;
    visibility:hidden;
    z-index:101;
}