.container { width: 100%;}
  
  .nums {
    float: left;
    width: 8%;
    border: 1px solid #000;
    margin-right:2px;
}
  
  
  .num {
    height: 25px;
    border: 1px solid;
    text-align: center;
    line-height: 25px;
}

.candidates {
    border: 1px solid;
    float: left;
    width: 80%;
}

footer {
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}

.candidate {
    height: 25px;
    border: 1px solid;
}

#sortable { list-style-type: none; margin: 0; padding: 0; width: auto; }

#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.2em; font-size: 0.6em; height: 15px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
#sortable li {  border: 1px solid #d6cece; }
        

       .fg {
          background: #6699FF;
          color: #fff;
		}

      .ff {
          background: #66BB66;
          color: #fff;
		}
		
      .sf {
          background: #326760;
          color: #fff;
		}
	  
	  .sd {
          background: #752F8B;
          color: #fff;
		}
        
      .lab {
          background: #CC0000;
          color: #fff;
		}
        
      .spbp {
          background: #8E2420;
          color: #fff;
		}

      .gp {
          background: #22AC6F;
          color: #fff;
		}
		
      .aon {
          background: #44532A;
          color: #fff;
		}
	  
	  .i4c {
          background: #FFC0CB;
          color: #fff;
		}
		
    .ind {
          background: #888;
          color: #fff;
		}

    .ii {
          background: #3BEE56;
          color: #fff;
		}


      .nat {
          background: #264A3C;
          color: #fff;
		}
		
		.ren {
          background: #FFA500;
          color: #fff;
		}
		
		.sp {
          background: #FF3300;
          color: #fff;
		}
.ra {
          background: #488A89;
          color: #fff;
		}
		
.aw {
background: #DB1DEC;
color: #fff;
}