.rolodex-button {
	border-width: 0px 0px 0px 0px !important;
	border-style: solid !important;
	border-radius: 7px 7px 0px 0px;
	-webkit-transition: all 150ms ease;
    transition: all 150ms ease;
    color: black;
    background-color: #BBB;
	font-size: 1.1em;
	text-align: center;
	padding: 0.2em 0.1em;
	width: 3.615384615384615%;
	margin-top: 0.5em;
}

.rolodex-button:hover {
	color: white;
}

.rolodex-button.reset {
	color: white;
	width: 6%;
	background-color: #222;
}

.rolodex-button.reset:hover {
	background-color: #555;
}

.rolodex-button.active {
	color: white;
}

.yellow:hover {
	background-color: #A48A00 !important;
}

.red:hover {
	background-color: #9B350D !important;
}

.purple:hover {
	background-color: #7D009B !important;
}

.blue:hover {
	background-color: #07459B !important;
}

.green:hover {
	background-color: #0A8F33 !important;
}


.active.yellow {
	background-color: #BA9D00;
}

.active.red {
	background-color: #BA3C09;
}

.active.purple {
	background-color: #9200B2;
}

.active.blue {
	background-color: #0060E4;
}

.active.green {
	background-color: #09B03D;
}


/* ------------------ Ag-specific style ---------------- */
  .staffview #expinfo img {
    max-width: 200; 
  }

  .staffview  .dir_row {
    content: "";
    display: table;
    clear: both;
  }


/* limit input length */
  .filter-controls input {max-width:20em}

/* set the inputs and their result text to be inline-blocks  so they stack */
  .filter-controls input, .filter-controls p {max-width:20em; display:inline-block;}

/* put a margin on the app container so it is not up against the sides  */
  #appcontainer { margin:2em}

/* shade every other to a light grey color */
 .staffview:nth-child(even), .staffview_row_even { background-color: #eee;}

/* stack the image and content , make act like table cells, scale to section width  */
.dir_column_left {
   float:left; 
   /* float: none; */
   display: inline-block;
   width: 210px;
   /* min-width: 175px; */
   vertical-align: middle;
   }

/* must initilize width to some value */
.dir_column_right  {
    display: inline-block;
    /* float:right; */
    /* width: inherit; */
    /* width: 65%; */
    vertical-align: middle;
    min-width: 146px;
    max-width: 800px;
}
div.adv-filters button {
  font: normal bold 1rem "Rubik",sans-serif;
    line-height: 1;
    text-transform: none;
    display: inline-block;
    padding: .5rem 1.25rem;
    background-color: #FE5C00;
    color: #fff;
    border-bottom: 0 solid #FE5C00;
    margin-top: 0;
    margin-bottom: 0;
}

div.job-type p {
   margin-top: 0.5em;
   margin-bottom: 1px;
   color: #434343;
   font-family: "Rubik",sans-serif;
   font-size: 1em;
}
div.pa-row p {
   margin-top: 0.5em;
   margin-bottom: 1px;
   color: #434343;
   font-family: "Rubik",sans-serif;
   font-size: 1em;
}

.pa-row {
    display: none;
    margin-bottom:2em;
}
.job-type {
   display: none;
}
.adv-filters {
   margin-bottom:2em;
}
.paging {
  display: none;
  margin-top:0.5em;
  margin-bottom:0.5em;
}
/* separate the Staff data  */
.staffview .dir_row {margin-bottom:1em;max-width:100%}

@media only screen and (max-width: 600px) {
.dir_column_right  {
    width:95%;
    max-width: 100%;
 } }
 @media only screen and (min-width: 600px) {
.dir_column_right  {
    xwidth: 100%;
/*    width: calc(90% - 150px); */
    
    xmax-width: 65%;
 } }

/* ************************************* */
/*  override Header CSS to keep display  */
/* ************************************* */
@media screen and (max-width: 39.9375em)
{
.main-nav__college-header img {
    display: inherit;
}
.main-nav__college-header img {
    margin-top: 0 !important;
    height: 5.04938rem !important;
    width: 9.75rem !important;
    margin-right: .625rem;
}

.main-header--college, .main-header--alternate {
    visibility: initial;
}

.main-nav__container{padding-top:2em}
}