#allocate-container
{
width:900px;
margin: 0px auto;
}
#draghelper{
  position:absolute;
  padding: 5px;
  background-color:#f5f5f5;
  border:1px solid #999;
  width:180px;
}
li {margin-bottom: 10px}
ol {margin-top: 5px}

.jbutton{
  position:absolute;
  right:17vw;
  border-radius: 6px;
  border:1px solid grey;
  padding:2px;
  background-color: #900;
  color:#fff;
  font-weight:bold;
}
.jbutton_hidden{
position:absolute;
right:10%;
visibility:hidden;
}

.DragContainer{
  border: #336 1px dotted;
  padding: 2px;
  float:left;
  margin:3px;
  width:200px;
  min-width: 14em;
  max-height:50em;
  overflow:auto;
  background-color: #005DAB;
  color:#fff;
  font-size:small;
}
.OverDragContainer {border 2px solid #699;padding: 5px;float:left;width:200px;background-color:#eee}

.DragBox {
  color:#009;
  font-size:10px;
  font-family:verdana,sans-serif
  border:1px solid #000;
  padding: 0px;
  margin-bottom:2px;
  cursor:move;
  background-color: #f5f5f5;
  background-repeat:no-repeat;
  overflow:hidden;
}

.DragBox p {
    width: 99px;
    padding: 5px;
    margin: 0px;
    font-size: x-small;
}

.DragBox img{float:right;margin-bottom:1em;}

.nonDragBox {
  color:#009;
  font-size:10px;
  font-family:verdana,sans-serif;
  padding: 0px;
  margin-bottom:2px;
  background-color: #f5f5f5;
  background-repeat:no-repeat;
  overflow:hidden;
}

.nonDragBox p {
    width: 99px;
    padding: 5px;
    margin: 0px;
    font-size: x-small;
}

.jobHeader {
    font-size: 0.9em;
    width: 90%;
    color: rgb(0, 0, 0);
    padding: 10px;
    text-align: center;
    margin-top: 0px;
}

.jobblock{
  border:1px solid grey;
  width:100%;
  margin-top:1em;
  background-color: #efefef
}

.nonDragBox img{float:right;margin-bottom:1em;}


.OverDragBox {cursor:pointer;padding:2px;background-color:#eee;border: thin red solid;color:#fff;background-repeat:no-repeat;height:80px;width:80%;}

.DragDragBox {thin #003 solid ;padding: 2px;font-size:10px;width:80%;background-color:#eee;cursor:pointer;}
.miniDragBox {border:1px solid #000;padding:2px;font-size:10px;width:70%;background-color:#eee;cursor:pointer;}

.OverDragBox {  background-color: #ffff99}
.DragDragBox {opacity:50; background-color: #ff99cc;background-image:none !important;width:100%;}

legend {
  font-weight: bold;
  font-size: 12px;
  color: #666699;
  width: initial;
}

fieldset {padding:3px}

.History {  font-size: 10px; overflow: auto; width: 100%; height: 82px}
#DragContainer8 { border:1px solid #669999;padding:5px;width:110px;height:110px}
.miniDragBox {  float: left; margin: 2px; width: 20px; height: 20px}

.bin{
  float:right;
  clear:right;
  margin-right:-4px;
  margin-bottom: 29px;
  min-height:5em;
  background-image:url('/share/images/orangebin.gif');
  background-repeat:no-repeat;
  background-position:center;
  border:none;
  background-color: rgba(0,0,0,0);
}

fieldset.bin {width:200px;float:right;margin-right:0px;background-color:#efefef;border:1px solid grey}
fieldset .bin  .DragBox{opacity:0.5;}

#scrollBottomDetect { position: fixed; bottom: 0; height: 40px; width: 800px;}
#scrollTopDetect { position: fixed; top: 0; height: 40px; width: 100%;}
#savebutton{height:40px;background-color:#600;color:#fff!important;font-weight:bold;float:right;padding:5px;}
.jobblock{ display:inline-block; }
.avatars,.ambassadors{width:100%;display:inline-block}
.notallocated{float:right}

@media (max-width:480px)
{
  #container{width: 100%}
  .jobblock{width: 100%}
 .DragContainer{width: 90%}

}