============================================================ */
/*  ALL WIDTHS (Allowing responsive overwrites below)           */
/* ============================================================ */

/* org chart */
.org-chart {
  width: 100%;
  overflow: hidden;
}

/* first tier groups */

.l1, .l2, .l3, .head {
  line-height: 0;
  display: inline-block;
  vertical-align: text-top;
}

.l1 {
  padding: 15px 0 10px 15px;
  vertical-align: text-top;
  width: 100%;
}

.l2 {
  margin-bottom: 5px;
  margin-left: 227px;
  margin-right: -227px;
}

.lt-ie9 .nsta {
  background-color: rgb(28, 28, 28);
}

.lt-ie9 .defense-intel {
  background-color: rgb(28, 81, 147);
}

.lt-ie9 .defense-intel .l2 {
  background-color: rgb(7, 61, 125);
}

.lt-ie9 .defense-intel .l3 a {
  background-color: rgb(0, 46, 110);
}

.lt-ie9 .info-data {
  background-color: rgb(186, 84, 18);
}

.lt-ie9 .info-data .l2 {
  background-color: rgb(163, 72, 15);
}

.lt-ie9 .civil-commercial {
  background-color: rgb(228, 196, 123);
}

.lt-ie9 .civil-commercial .l2 {
  background-color: rgb(180, 148, 75);
}

.lt-ie9 .civil-commercial .l3 a {
  background-color: rgb(160, 128, 53);
}

.nsta {
  background-color: rgba(28, 28, 28, 0.7);
  width: 100%;
}

.defense-intel {
  background-color: rgba(28, 81, 147, 1);
}

.defense-intel .l2 {
  background-color: rgba(7, 61, 125, 1);
}

.defense-intel .l3 a {
  background-color: rgba(0, 46, 110, 1);
}

.info-data {
  background-color: rgba(186, 84, 18, 1);
}

.info-data .l2 {
  background-color: rgba(163, 72, 15, 1);
}

.civil-commercial {
  background-color: rgba(228, 196, 123, 1);
}

.civil-commercial .l2 {
  background-color: rgba(180, 148, 75, 1);
}

.civil-commercial .l3 a {
  background-color: rgba(160, 128, 53, 1);
}

/* person cards */
.person {
  position: relative;
  display: inline-block;
  vertical-align: text-top;
  line-height: 1.5em;
  background-size: 70px;
  width: 215px;
  height: 97px;

  /* scale to background size*/
  color: white;
  font-weight: normal;
  margin: 0;
  text-align: center;
  background-repeat: no-repeat;
  background-position: top left;
  text-decoration: none;
  text-shadow: 1px 1px 3px #000;
  font-family: "Open Sans Condensed", "Arial Narrow", Arial, Tahoma, Helvetica, sans-serif;
}

.person > div {
  padding-left: 70px;
}

.dep-name {
  margin-bottom: 10px;
}

/* this will put the department label OVER the headshot image.
.person > .dep-name {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: rgba(5,5,55,.5);
   padding-left: 5px;
   margin: 0;
   text-align: left;
}*/

.l1.nsta > a {
  font-size: 18px;
  width: 100%;
  position: relative;
}

.l1.nsta > a .dep-name {
  font-size: 28px;
  position: absolute;
  top: 0;
  left: 16%;
  line-height: 97px;
  height: 97px;
}

.l1.nsta > a .mgr-name,
.l1.nsta > a .mgr-title,
.l1.nsta > a .mgr-phone {
  text-align: left;
  padding-left: 80px;
}

.l1 > a {
  font-size: 16px;
  width: 227px;
  position: absolute;
}

.l1 > a .dep-name {
  font-size: 20px;
}

.l2 > a {
  font-size: 14px;
}

.l2 > a .dep-name {
  font-size: 18px;
}

.l3 > a {
  font-size: 12px;
}

.l3 > a .dep-name {
  font-size: 14px;
}

/* structure */
.parent {
  padding: 15px 11px 15px 15px;
}

.parent > div {
  margin-top: 5px;
}

.l1 div.rightmost {
  margin-right: 5px;
}

/* images */
/* old CSS before use of sprite:
.defense-intel > a { background-image: url("../img/h/odle-70.jpg");}
.di_defense > a { background-image: url("../img/h/ferguson-70.jpg");}
.di_d_navy > a { background-image: url("../img/h/stirbl-70.jpg");}
.di_d_darpa > a { background-image: url("../img/h/chow-70.jpg");}
.di_d_army > a { background-image: url("../img/h/chow-70.jpg");}
.di_d_defense > a { background-image: url("../img/h/chow-70.jpg");}
.di_intel > a { background-image: url("../img/h/north-70.jpg");}

.info-data > a { background-image: url("../img/h/doyle-70.jpg");}
.id_autonomous > a { background-image: url("../img/h/bergman-70.jpg");}
.id_info > a { background-image: url("../img/h/chow-70.jpg");}
.id_data > a { background-image: url("../img/h/crichton-70.jpg");}

.civil-commercial > a { background-image: url("../img/h/wolfenbarger-70.jpg");}
.cc_civil > a { background-image: url("../img/h/wolfenbarger-70.jpg");}
.cc_c_dhs > a { background-image: url("../img/h/chow-70.jpg");}
.cc_commercial > a { background-image: url("../img/h/graczyk-70.jpg");}
.cc_co_commercial > a { background-image: url("../img/h/wiberg-70.jpg");}
.cc_co_tech > a { background-image: url("../img/h/brokerick-70.jpg");}
*/

/* Headshot Sprite */

/* Instead of using multiple images, this takes a single image with all. To modify a person, modify the sprite file and size accordingly. */
a.person:before {
  background-image: url("../img/headshots-sprite-70.jpg");
  content: "";
  display: block;
  width: 70px;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  max-height: 98px;
}

.nsta > a:before {
  background-position: 0px    0px;
}

/* cox */

.defense-intel > a:before {
  background-position: -70px    0px;
}

/* odle */
.di_defense > a:before {
  background-position: -70px  -98px;
}

/* ferguson */
.di_d_navy > a:before {
  background-position: 0px  -98px;
}

/* stirbl */
.di_d_darpa > a:before {
  background-position: -70px  -98px;
}

/* mattman */
.cc_opensource > a:before {
  background-position: -210px 97px;
}

/* surampudi */
.di_energy > a:before {
  background-position: -280px 196px;
}
/* mandrake */
.di_machine-learning > a:before {
  background-position: -280px 196px;
}


/* chow */
.di_d_army > a:before {
  background-position: -70px -294px;
}

/* sauvageau */
.di_d_defense > a:before {
  background-position: -70px  -98px;
}

/* chow */
.di_intel > a:before {
  background-position: -210px    0px;
}

/* north */

.info-data > a:before {
  background-position: -140px  -98px;
}

/* doyle */
.id_autonomous > a:before {
  background-position: -210px  -98px;
}

/* bergman */
.id_info > a:before {
  background-position: -70px  -98px;
}

/* crichton*/
.id_data > a:before {
  background-position: -0px -196px;
}

/* huang */
.id_interactive > a:before {
  background-position: -210px -98px;
}

/* mandrake */
.id_machine > a:before {
  background-position: -280px -196px;
}
/* crichton-NOT */

.civil-commercial > a:before {
  background-position: -70px -196px;
}


/* wolfenbarger */
.cc_civil > a:before {
  background-position: -70px  -98px;
}

/* chow */
.cc_c_dhs > a:before {
  background-position: -70px  -98px;
}

/* chow */
.cc_commercial > a:before {
  background-position: -140px -196px;
}

/* graczyk */
.cc_co_commercial > a:before {
  background-position: -210px -196px;
}

/* wiberg */
.cc_co_tech > a:before {
  background-position: 0px -294px;
}

/* broderick */
.cc_co_tech > a:before {
  background-position: 0px -294px;
}

/* cabrera */
.di_military > a:before {
    background-position: 70px -99px;
}

/* broderick */

/* This CSS reduces the margins of the person-cards. To go back to normal, comment this little section out. */
/* */

.l1 {
  padding: 4px 0 0 4px;
}

/* */
/* */

.l2 {
  padding: 4px;
}

/* */
/* */

.parent {
  padding: 4px 0 4px 4px;
}

/* */
/* */

.l3 {
  margin-left: 0px;
}

/* */
/* */

.di_defense,
.cc_commercial {
  padding-right: 4px;
}

/* */
/* -------------------------------------------------------------------------------------------------------- */

/* ============================================================ */
/*  NARROW WIDTH / MOBILE                                       */
@media only screen and (max-width: 668px) {
  /* ============================================================ */
  .l1 {
    padding: 0;
  }

  .l1 > a {
    position: relative;
    width: 96%;
    margin: 2%;
  }

  .l2 {
    margin: 5px 0;
    width: 96%;
    padding: 0;
    margin: 2%;
  }

  .l2.parent {
    padding-bottom: 2%;
  }

  .l2.parent > a {
    margin: 2%;
    width: 87%;
  }

  .l2 > a {
    width: 87%;
  }

  .l3 {
    margin: 0 4%;
    width: 94%;
  }

  .l3 > a {
    width: 100%;
  }
}

/* ===================================== */
/*  EVEN SMALLER                         */
@media only screen and (max-width: 586px) {
  /* ===================================== */
}

/* ============================================================ */
/*  INTERMEDIATE WIDTH / TABLETS                                */
@media only screen and (min-width: 668px) and (max-width: 855px) {
  /* ============================================================ */
  .l1 {
    padding: 0;
  }

  .l1 > a {
    position: relative;
    width: 96%;
    margin: 2%;
  }

  .l2 {
    margin: 5px 0;
    width: 96%;
    padding: 0;
    margin: 2%;
  }

  .l2.parent {
    padding-bottom: 2%;
  }

  .l2.parent > a {
    margin: 2%;
    width: 87%;
  }

  .l2 > a {
    width: 87%;
  }

  .l3 {
    margin-left: 5%;
    margin-right: -5%;
    width: 45%;
  }

  .l3 > a {
    width: 100%;
  }
}

@media only screen and (max-width: 950px) {
  .l1.nsta > a .dep-name {
    position: relative;
    top: 0;
    left: 0;
    line-height: 28px;
    height: auto;
    padding-left: 0;
  }

  .l1.nsta > a {
    width: 96%;
    height: auto;
    background-position: left bottom;
  }

  .l1.nsta > a .mgr-phone {
    margin-bottom: 10px;
  }
}

/* ============================================================ */
/*  WIDE                                                        */
@media only screen and (min-width: 1060px) {
  /* ============================================================ */

  /* compact controls */
  .compact {
    padding-bottom: 110px;
  }

  .compact .l1 {
    height: 109px;
    overflow: visible;
    position: relative;
  }

  .compact .l2.parent {
    height: 96px;
    overflow: visible;
    position: relative;
    padding-top: 4px;
    padding-left: 4px;
    padding-bottom: 5px;
  }

  .compact .parent .l3 {
    height: 0;
    overflow: hidden;
  }

  .compact .l2.parent:hover {
    height: auto;
    padding: 4px 3px 4px 4px;
    margin-top: 0;
    left: 0;
    margin-right: -231px;
    z-index: 1;
    border-right: solid 1px transparent;
  }

  .compact .defense-intel .l2.parent:hover {
    border-right-color: rgb(28, 81, 147);
  }

  .compact .info-data .l2.parent:hover {
    border-right-color: rgb(186, 84, 18);
  }

  .compact .civil-commercial .l2.parent:hover {
    border-right-color: rgb(228, 196, 123);
  }

  .compact .parent:hover .l3 {
    height: auto;
  }

  .compact .dep-name {
    margin-bottom: 5px;
  }
}

/* ============================================================ */
/*  ALL SIZES (PRIORITY)                                        */
/* ============================================================