/*!
 * Custom styles from older site used for migration needs to display older page content.  
 * Mainly any styles needed that we could not pull from bootstap or ifactory css
 */

/* GrayBackground Box similar to PersonList  */


/* New Font folder styles to replace purchased ones licensed by USC for use   */
/*  Avenir LT W01_35 Light1475496 replaced with National2-Bold   */
@font-face {
  font-family: 'National2-Bold';
  src: url(fonts/National2-Bold.otf);
}
/*  Avenir LT W01_55 Roman1475520 replaced with National2-Regular  */
@font-face {
  font-family: 'National2-Regular';
  src: url(fonts/National2-Regular.otf);
}
/*  Avenir LT W01_85 Heavy1475544 replaced with National2-Extrabold   */
@font-face {
  font-family: 'National2-Extrabold';
  src: url(fonts/National2-Extrabold.otf);



}


.grayBack { list-style: none; margin: 0 0 20px 0; padding: 20px; border: 1px solid #ccc; display: block; background: #e9e9e9; width:100%; }


.bioSectionTitle
{
	font-weight:bold;
	text-transform: uppercase;
}
.bioArticles
{
	
}
.bioBooks
{
	clear:both;
}
.bioBooks img
{
	float:left;
	
	margin-right: 10px;
	margin-bottom: 10px;
	padding:0px;
	border-width:0px;
	background:none;
	box-shadow:none;
	width:200px;
}

form.directorySearch fieldset { margin: 0 0 20px 0; }
form.directorySearch ul { list-style: none; margin: 0; padding: 0; }
form.directorySearch li { display: block; float: left; margin: 0 20px 0 0; }
form.directorySearch li input[type="text"] { width: 258px; }
form.directorySearch li input[type="submit"] { margin: 20px 0 0 0; }
form.directorySearch li select { width: 280px; }

ul.personList { list-style: none; margin: 0; padding: 0; width: 654px; }
ul.personList li { margin: 0 0 20px 0; padding: 20px; border: 1px solid #ccc; display: block; height: 122px; }
ul.personList li.odd { background: #e9e9e9; }
ul.personList li.even { background: #f9f9f9; }
a.personList-thumb { float: left; margin: 0 20px 0 0; }
ul.personList h5 { margin: 0 0 5px 0; padding: 0; font-size: 1.6em; font-weight: normal; border-bottom: 1px solid #ccc; }
ul.personList h5 a { color: #333; text-decoration: none; }
ul.personList p { margin: 0; padding: 0; }
ul.personList p.personList-title { font-style: italic; font-size: 1.1em; color: #999; }

div.personDisplay-header h5 { border-bottom: 1px solid #999; font-size: 1.8em; }
div.personDisplay-header img { float: left; margin: 0 20px 0 0; }
div.personDisplay-header p { margin: 0; }
div.personDisplay-header p.personDisplay-title { font-style: italic; }
span.personDisplay-info { display: block; background: #fff; padding: 10px 0; border-top: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; -moz-border-radius: 0 10px 10px 0; -webkit-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; -moz-box-shadow: 0 0 15px #ddd inset; -webkit-box-shadow: 0 0 15px #ddd inset; box-shadow: 0 0 15px #ddd inset; }
div.personDisplay-bio { width: 654px; }

div.personList { list-style: none; width: 630px; margin: 0 0 20px 0; padding: 20px; border: 1px solid #ccc; display: block; background: #e9e9e9; }


/*!
div.imgBox { display: inline-block; border: 10px solid #fff; -moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; padding: 0; vertical-align: top; background: #fff; margin-top: 15px; margin-bottom: 15px; }
div.imgLeft { margin-right: 15px; float: left; }
div.imgRight {  margin-left: 15px; float: right; }
div.imgBox span { display: block; background: #fff; padding: 10px 0 0 0; font-size: 0.7em; color: #999; font-style: italic; line-height: 1.2em; }
div.imgBox img {  border: 1px solid #ccc; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; background: none; margin-top: 0; margin-bottom: 0; }
div.imgBox img.left {  margin-right: 0; float: none; }
div.imgBox img.right {  margin-left: 0; float: none; }
 */


.width25 img, .width50 img, .width75 img, .width100 img, .width125 img, .width150 img, .width175 img, .width200 img, .width225 img, .width250 img, .width275 img, .width300 img, .width325 img, .width350 img, .width375 img, .width400 img, .width425 img, .width450 img, .width475 img, .width500 img, .width525 img, .width550 img {
    background: #fff none repeat scroll 0 0;
    border: medium none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    vertical-align: top;
}
.width25 { width: 25px; }
.width50 { width: 50px; }
.width75 { width: 75px; }
.width100 { width: 100px; }
.width125 { width: 125px; }
.width150 { width: 150px; }
.width175 { width: 175px; }
.width200 { width: 200px; }
.width225 { width: 225px; }
.width250 { width: 250px; }
.width275 { width: 275px; }
.width300 { width: 300px; }
.width325 { width: 325px; }
.width350 { width: 350px; }
.width375 { width: 375px; }
.width400 { width: 400px; }
.width425 { width: 425px; }
.width450 { width: 450px; }
.width475 { width: 475px; }
.width500 { width: 500px; }
.width525 { width: 525px; }
.width550 { width: 550px; }
.width25,
.width50,
.width75,
.width100,
.width125,
.width150,
.width175,
.width200,
.width225,
.width250,
.width275,
.width300,
.width325,
.width350,
.width375,
.width400,
.width425,
.width450,
.width475,
.width500,
.width525,
.width550 { display: block; border: 10px solid #fff; -moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; padding: 0; vertical-align: top; background: #fff; margin-top: 15px; margin-bottom: 15px; }



div.event-title, div.reservation-title { padding: 20px 0; border-bottom: 1px solid #ccc; }
div.news-title h1, div.announcement-title h1, div.event-title h1 { margin: 0 0 10px 0; line-height: 1.3em; }
div.event-title h2 { margin: 0; line-height: 1.3em; }
div.event-title h3 { margin: 0 0 10px 0; line-height: 1.3em; }
div.news-title h2, div.announcement-title h2 { font-size: 1.4em; line-height: 1.3em; color: #666; margin: 0; font-weight: normal; font-style: italic; }
div.news-title p, div.announcement-title p { color: #999; margin: 0 0 5px 0; line-height: 1.3em; }
div.event-title p { color: #333; margin: 0 0 5px 0; line-height: 1.3em; font-size: 1.2em; }
div.event-title p span { color: #666; font-size: 0.8em; }
div.event-title p span strong { display: block; float: left; width: 120px; }
div.event-title p.reservation { float: right; }
div.event-title p.reservation a { -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; display: block; float: right; border: 1px solid #ccc; padding: 5px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fff; text-decoration: none; border-radius: 5px; font-size: 0.8em; margin: 0 0 0 10px; }
div.event-title p.reservation a:hover { -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666; border: 1px solid #fff; background: #900; text-decoration: none; color: #fff; }
div.event-title p span em { color: #990000; }


.alertMsg, .confirmMsg, .errorMsg { margin: 30px 0; color: #fff; -moz-border-radius: 8px 8px 8px 8px; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; padding: 20px; }
.alertMsg a, .confirmMsg a, .errorMsg a, .alertMsg a:hover, .confirmMsg a:hover, .errorMsg a:hover, .alertMsg a:visited, .confirmMsg a:visited, .errorMsg a:visited { color: #fff; }
.alertMsg { background: #039 url(../images/bg-alert.gif) no-repeat top left; border: 1px solid #039; }
.confirmMsg { background: #060 url(../images/bg-confirm.gif) no-repeat top left; border: 1px solid #060; }
.errorMsg { background: #900 url(../images/bg-error.gif) no-repeat top left; border: 1px solid #900; }
.alertMsg p, .confirmMsg p, .errorMsg p { color: #fff; margin: 0; padding: 0 0 0 70px; }

/* line 191, ../scss/_base.scss */
input[type="date"], input[type="tel"] { font-family: 'National2-Regular'; font-weight: 400; color: #000000; font-size: 16px; line-height: 50px; height: 50px; }
@media screen and (min-width: 768px) { /* line 191, ../scss/_base.scss */
  input[type="date"], input[type="tel"] { font-size: 18px; } }
@media screen and (min-width: 1025px) { /* line 191, ../scss/_base.scss */
  input[type="date"], input[type="tel"] { font-size: 21px; } }
  /* line 97, ../scss/_content.scss */
section#mainContent input[type="date"], section#mainContent input[type="tel"] { width: 100%; background: #fafafa; border: solid 1px #d6d6d6; padding: 10px; -webkit-box-shadow: 0px 0px 8px 0px rgba(186, 186, 186, 0.42); -moz-box-shadow: 0px 0px 8px 0px rgba(186, 186, 186, 0.42); box-shadow: 0px 0px 8px 0px rgba(186, 186, 186, 0.42); margin-bottom: 30px; font-size: 18px; }


div.alumBox {
  /*  background: rgba(0, 0, 0, 0) url("images/gold-arrow@2x.png") no-repeat scroll right center / 10px auto;  */
	background-color:#FFFFFF;
    color:#000;
    display: block;
    font-size: 18px;
    padding: 12px 20px 0px 10px;
	font-family:"National2-Bold",arial,sans-serif;
	font-weight:400;
	line-height:1.3;
	margin-bottom:0px;}
@media screen and (min-width: 768px) { /* line 191, ../scss/_base.scss */
  div.alumBox { font-size: 21px; } }
@media screen and (min-width: 1025px) { /* line 191, ../scss/_base.scss */
  div.alumBox { font-size: 32px; } }

.thumbnail  { display: inline-block; float: center; padding: 10px;}

/* To make anchors go under header on programs index pages */
.anchor{
  display: block;
  height: 150px; /*same height as header*/
  margin-top: -150px; /*same height as header*/
  visibility: hidden;
}




/* Social Media Button with Icons */
div.soloBtnBar.social {
  position: relative;
  margin-bottom: 50px;
}

div.soloBtnBar.social div.inner > div {
  width: 100%;
  float: left;
  padding-right: 0;
}

div.soloBtnBar.social div.inner > div a {
  background: #980000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 !important;
  color: #ffffff;
  font-size: 20px;
  font-size: 1.2vw;
  text-align: center;
  transition: background-color .3s ease-out;
  text-decoration: none;
}

div.soloBtnBar.social div.inner > div a:hover {
  background-color: #660000;
  transition: background-color .3s ease-out;
}

/* Three Button Row with Social Media Button */
div.soloBtnBar.threeButtons {
  position: relative;
  margin-bottom: 50px;
}

div.soloBtnBar.threeButtons div.inner > div {
  width: 32%;
  float: left;
  padding-right: 5px;
}

/* Social button gets more width to accommodate icons */
div.soloBtnBar.threeButtons div.inner > div.social-button {
  width: 36%;
}

div.soloBtnBar.threeButtons div.inner > div a {
  background: #980000;
  display: block;
  padding: 20px 0 !important;
  color: #ffffff;
  font-size: 20px;
  font-size: 1.2vw;
  text-align: center;
  transition: background-color .3s ease-out;
  text-decoration: none;
}

div.soloBtnBar.threeButtons div.inner > div a:hover {
  background-color: #660000;
  transition: background-color .3s ease-out;
}

/* Social media button within three-button row */
div.soloBtnBar.threeButtons div.inner > div.social-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: auto;
  min-height: 60px;
}

.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  line-height: 1;
  height: 100%;
}

.social-icon {
  width: 24px;
  height: 24px;
  background: transparent;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #ffffff;
  flex-shrink: 0;
  line-height: 1;
}

.social-icon i {
  font-size: 16px;
  color: #ffffff;
}

.social-text {
  text-decoration: none;
  margin: 0;
  font-size: 20px;
  font-size: 1.2vw;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 1025px) {
  div.soloBtnBar.social div.inner > div a {
    font-size: 16px;
  }
  
  div.soloBtnBar.threeButtons div.inner > div a {
    font-size: 16px;
  }
  
  .social-text {
    font-size: 16px;
  }
  
  .social-icon {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }
  
  .social-icon i {
    font-size: 14px;
  }
}

@media screen and (max-width: 900px) {
  div.soloBtnBar.threeButtons div.inner > div {
    width: 30%;
  }
  
  div.soloBtnBar.threeButtons div.inner > div.social-button {
    width: 40%;
  }
  
  .social-icons {
    gap: 6px;
  }
  
  .social-icon {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
  
  .social-icon i {
    font-size: 12px;
  }
  
  .social-text {
    font-size: 14px;
  }
}

@media screen and (max-width: 700px) {
  div.soloBtnBar.social div.inner > div {
    width: 100%;
  }
  
  div.soloBtnBar.threeButtons div.inner > div {
    width: 100%;
    margin-bottom: 10px;
  }
  
  div.soloBtnBar.threeButtons div.inner > div.social-button {
    width: 100%;
  }
  
  .social-icons {
    gap: 10px;
  }
  
  .social-icon {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
  
  .social-icon i {
    font-size: 12px;
  }
  
  .social-text {
    font-size: 14px;
  }
}

/* End Social media button within three-button row */