/* adds shadow to link boxes */
    .boxShadow:hover {
        -webkit-box-shadow: 0px 0px 24px -4px rgba(0,0,0,0.4);
        -moz-box-shadow: 0px 0px 24px -4px rgba(0,0,0,0.4);
        box-shadow: 0px 0px 24px -4px rgba(0,0,0,0.4);
    }

    ul.ulRoles {
      position: relative;
      /*left: 50%;*/    /*this was causing problems*/ 
      top: 0;
      padding: 0;
      margin: 0 auto;
      display: block;
      float: left;
      clear: right;
      list-style: none;
      width: 100%;

    }
    li.roleButtonLi {
      position: relative;
      /*right: 50%;*/    /*this was causing problems also*/
      top: 0;
      margin: 10px;
      display: block;
      float: left;
      border: solid;
      border-color: green;
      border-width: 1px; 
      width: 100%;  /* tried this */         
    }


/*Makes 5 Bootstrap columns possible*/
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

    .col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}