#main {
  width: 1000px;
}

#grid {
  float: left;
  margin-left: 10px;
}

#grid DIV {
   float: left;
}

.tid {
    color: #aaa;
}

#saveBtn, 
#clearBtn {
    font-weight: bold;
    font-size: 14px;
    margin-right: 20px;
}

#saveBtn.saved {
    background: #0a0;
    color: #fd0;
}

#grid .room {
   width: 80px;
   height: 80px;
   margin: 1px;
   border: 1px dashed #000;
   background-color: #ddd;
}

#grid .roomHighlight {
   background-color: #fcc;
}


#grid .roomSelected {
   background-color: #ffc;
}

#grid .roomNumber {
   width: 100%;
   font-size: 18px;
   font-weight: bold;
   color: red;
   text-align: center;
}

#grid .roomLabel {
   clear: left;
   color: #888;
   width: 50%;
   text-align:right;
   font-size: 14px;
}

#grid .roomClass {
   font-weight: bold;
   color: blue;
   font-size: 14px;
}

#grid.dullTN .roomClass.TN,
#grid.dullVN .roomClass.VN,
#grid.dullGL .roomClass.GL {
   color: #aaa;
}

#grid .roomCapacity {
  float: left;
  color: #080;
  font-size: 10px;
}

#grid #r212 {width: 120px; height: 100px; margin-top: 20px;}
#grid #r217 {margin-left: 20px; margin-top: 21px;} /* 21px ??? */
#grid #r218 {height: 100px;}
#grid #r219 {height: 100px;}
#grid #r220 {height: 100px;}
#grid #r221 {margin-left: 20px; width: 120px; height: 120px;}

#grid #r207 {clear: left; width: 120px;}
#grid #r208 {clear: left; width: 120px;}
#grid #r209 {clear: left; width: 120px;}
#grid #r210 {clear: left; width: 120px;}
#grid #r211 {clear: left; width: 120px;}

#grid #r213 {width: 164px; margin-left: 20px;}
#grid #r214 {width: 164px; margin-left: 20px;}
#grid #r215 {width: 164px; margin-left: 20px;}
#grid #r216 {width: 164px; margin-left: 20px;}

#grid #r228 {width: 164px;}
#grid #r229 {width: 164px;}
#grid #r230 {width: 164px;}
#grid #r231 {width: 164px;}

#grid #r222 {margin-left: 20px; width: 120px;}
#grid #r223 {margin-left: 20px; width: 120px;}
#grid #r224 {margin-left: 20px; width: 120px;}
#grid #r225 {margin-left: 20px; width: 120px;}
#grid #r226 {margin-left: 20px; width: 120px;}

#grid #r236 {height: 100px; width: 108px; margin-left: 20px;}
#grid #r235 {height: 100px; width: 108px; }
#grid #r234 {height: 100px; width: 108px; }

#grid #r202 {clear: left; margin-top: 20px; margin-left: 172px;}
#grid #r232 {margin-top: 20px; width: 108px;}
#grid #r233 {margin-top: 20px; width: 128px;}

#toggler {
   float: left;
}

#tpanel {
   float: left;
}

#tpanel .title {
   font-weight: bold;
   font-size: 14pt;
   color: blue;
}

#tpanel .label {
   text-align: right;
}

#tpanel INPUT {
   font-weight: bold;
   color: #000;
}

#tpopup {
   position: fixed;
   left: 330px;
   top: 100px;
   border: 1px dashed red;
   background-color: #ffd;
   display: none;
   padding: 1px;
}

#tpopup #tlist {
   width: 300px;
   height: 300px;
   background-color: white;
   border: 1px solid #aaa;
   overflow: auto;
}

#tpopup .controls {
}

#tpopup .controls button.icon {
    padding: 0px;
    margin: 0px;
    border: 0px;
    background-color: transparent;
    vertical-align: middle;
    color: #aaa;
}

#tpopup .controls button.icon:hover {
    color: #27a;
}

#tpopup .controls #tfilter {
   width: 180px;
   background-color: white;
   border: 1px solid #aaa;
}

#tpopup .tname {
   cursor: pointer;
}

#tpopup .onname {
   background-color: #fcc;
}

#tpopup .nobody {
   color: #a00;
   font-style: italic;
   text-align: center;
}

.swap, 
.teacher {
    display: inline-block;
    vertical-align: middle;
    color: #888;
    font-size: 20px;
    cursor: pointer;
}

.swap:hover, 
.teacher:hover {
    color: #27f;
}