/*
 Theme Name:   Panther Tracks - Portland Community College
 Theme URI:    https://www.pcc.edu/panther-tracks/
 Description:  A custom theme for the PCC Panther Tracks site.
 Author:       Portland Community College
 Author URI:   https://www.pcc.edu/
 Version:      1.0
 Template:     pcc
*/
/* ----------------------------------------------------------------
    handwriting font
---------------------------------------------------------------- */
/* ------------------------------------
    import from Google
------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap");
/* ------------------------------------
    headings
------------------------------------ */
#content h3, #content h4 {
  font-family: "Shadows Into Light", Helvetica, Arial, sans-serif;
  font-style: cursive !important;
  font-weight: 400 !important;
  letter-spacing: 0.0625rem;
}

#content h3 {
  font-size: 2.0625em;
}

#content h4 {
  font-size: 1.75em;
}

#content h5 {
  font-size: 1.1875em;
}

#content h6 {
  font-size: 1.0625em;
}

/*----- use in cards no matter the heading level -----*/
#content .card .card-heading {
  font-family: "Shadows Into Light", Helvetica, Arial, sans-serif;
  font-style: cursive !important;
  font-weight: 400 !important;
  letter-spacing: 0.0625rem;
  font-size: 1.5em;
}

#content .card.info .card-heading {
  margin: -0.3125rem 0 0.3125rem;
}

/*----- miscellaneous other adjustments -----*/
#content .features h4 {
  font-family: open_sansbold, Helvetica, Arial, sans-serif;
  font-style: normal !important;
  font-weight: normal !important;
  letter-spacing: 0;
}

#content .open-sesame h4 {
  font-family: open_sanssemibold, Helvetica, Arial, sans-serif;
  font-style: normal !important;
  font-weight: normal !important;
  letter-spacing: 0;
}

#content .card h6 + .yes-no {
  margin-top: 0.3125rem;
}

#content .tabs .card .card-heading {
  font-family: open_sansbold, Helvetica, Arial, sans-serif;
  font-style: normal !important;
  font-weight: normal !important;
  letter-spacing: 0;
  font-size: 1.25em;
}

/* ----------------------------------------------------------------
    homepage
---------------------------------------------------------------- */
#content h3.visually-hide + h4 {
  font-size: 2em;
  margin-top: 0;
}

/* ------------------------------------
    rows/slats
------------------------------------ */
.slats {
  list-style: none;
  margin: 1.25rem 0 0;
}
.slats li {
  padding: 0;
}
.slats li a {
  border-bottom: 0.0625rem solid #c1c1c1;
  display: flex;
  padding: 1.25rem 0.9375rem;
  text-decoration: none;
}
.slats li a:hover, .slats li a:focus {
  background-color: #e9e9e9;
}
.slats li:first-of-type {
  border-top: 0.0625rem solid #c1c1c1;
}
.slats img {
  height: 5rem;
  margin-right: 0.9375rem;
  width: 5rem;
}
.slats h4 {
  color: #333333;
  font-size: 1.625em;
  margin: 0;
}
.slats p {
  margin: 0;
  padding: 0.125rem 0 0;
}

/* ------------------------------------
    pawprints
------------------------------------ */
.slats a .track-details {
  max-width: calc(100% - 10.625rem);
}
.slats a .paws {
  align-self: center;
  background: url("images/paw.png") no-repeat top left transparent;
  background-position: top left;
  height: 3.5625rem;
  margin-left: auto;
  width: 3.6875rem;
}
.slats a:hover .paws, .slats a:focus .paws {
  background-position: top right;
}

/*----- small screens -----*/
@media only screen and (max-width: 39.9375em) {
  .slats a .track-details {
    max-width: 100%;
  }
  .slats a .paws {
    display: none;
  }
}
/* ----------------------------------------------------------------
    sidebar
---------------------------------------------------------------- */
#sidenav .logo {
  margin: 0 auto 1.25rem;
}
#sidenav h3 {
  font-size: 1.5em !important;
}
#sidenav .side-nav li:first-of-type a {
  border-radius: 0;
}
#sidenav #side-nav-children {
  margin-left: 0;
}
#sidenav #side-nav-children li a {
  border-radius: 0;
  padding-left: 1.25rem;
}
#sidenav #side-nav-children li:last-of-type, #sidenav #side-nav-children li:last-of-type a {
  border-radius: 0 0 0.25rem 0.25rem;
}
#sidenav #side-nav-children li span::after {
  content: ". ";
}

/* ------------------------------------
    orientation sidebar
------------------------------------ */
.side-nav.orientation span:not(.epithet)::after {
  content: ". ";
}

/* ----------------------------------------------------------------
    pagination
---------------------------------------------------------------- */
#pagination {
  margin-top: 4.0625rem;
}
#pagination .next-button a,
#pagination .back-button a {
  background: url("/wp-content/themes/pcc/_source/images/paw-gray-left.png") left top no-repeat !important;
  color: #00667a;
  font-size: 1.5em;
  margin-top: -1.375rem;
  padding: 1.5625rem 0 0.625rem 2.5rem;
}
#pagination .next-button a::before,
#pagination .back-button a::before {
  content: "";
}
#pagination .next-button a:hover, #pagination .next-button a:focus,
#pagination .back-button a:hover,
#pagination .back-button a:focus {
  text-decoration: none;
}
#pagination .next-button a:hover,
#pagination .back-button a:hover {
  color: #333333;
}
#pagination .next-button a:focus,
#pagination .back-button a:focus {
  color: #ae4625;
}
#pagination .next-button a {
  background: url("/wp-content/themes/pcc/_source/images/paw-gray.png") right top no-repeat !important;
  padding: 1.5625rem 2.5rem 0.625rem 0;
}
#pagination .next-button a::after {
  content: "";
}
#pagination .next-button.go-home a {
  background: none !important;
  font-size: 1em;
  line-height: 1.3;
  padding-right: 0;
  padding-top: 0.3125rem;
}
#pagination .next-button.go-home a::after {
  display: none;
}

/* ------------------------------------
    small and medium screens
------------------------------------ */
@media only screen and (max-width: 63.9375em) {
  #pagination {
    margin-top: 8.125rem !important;
  }
}
/* ----------------------------------------------------------------
    table icons - scholarship guide #1
---------------------------------------------------------------- */
table#scholarship i {
  display: block;
  font-size: 300%;
  padding: 0.625rem 0;
  text-align: center;
}

/* ----------------------------------------------------------------
    finished track blurb
---------------------------------------------------------------- */
.finished-track {
  margin: 2.5rem 0 5.625rem;
}
.finished-track img {
  margin-top: -0.625rem;
  width: 4.6875rem;
}

/* ----------------------------------------------------------------
    budget form - student's guide to money/student loans #2
---------------------------------------------------------------- */
form#budget {
  padding: 1.25rem 1.25rem 1.875rem;
}
form#budget legend {
  font-family: open_sansbold, Helvetica, Arial, sans-serif;
  font-style: normal !important;
  font-weight: normal !important;
  letter-spacing: 0;
  font-size: 1.1875em;
  line-height: 1.3;
  margin-bottom: 0.625rem;
}
form#budget legend .fineprint {
  font-size: 0.8125em;
}
form#budget label {
  font-family: open_sanssemibold, Helvetica, Arial, sans-serif;
  font-style: normal !important;
  font-weight: normal !important;
}
form#budget .totals {
  font-family: open_sansbold, Helvetica, Arial, sans-serif;
  font-style: normal !important;
  font-weight: normal !important;
  letter-spacing: 0;
  font-size: 1.0625em;
}
form#budget .total-income, form#budget .total-expenses {
  background: #ffffff;
  display: block;
  font-size: 1.125em;
  margin-top: 0.1875rem;
  min-height: 2.5rem;
  padding: 0.3125rem 0.625rem;
}

.tabs form#budget {
  padding: 1.25rem 0;
}

/* ------------------------------------
    small screens
------------------------------------ */
@media only screen and (max-width: 39.9375em) {
  form#budget #totals .cell,
  form#budget #expenses {
    margin-top: 1.25rem;
  }
}
/* ----------------------------------------------------------------
    debt form - student loans #3
---------------------------------------------------------------- */
form#debt #calculateButton {
  padding-right: 1.25rem;
}
form#debt #debtInfo span {
  border-bottom: 0.0625rem solid #4d4d4d;
  display: inline-block;
  margin-left: 0.0625rem;
  min-width: 4.375rem;
  padding: 0 0.125rem;
}

/* ----------------------------------------------------------------
    table icons - student loans #3
---------------------------------------------------------------- */
.max-loan-math {
  font-family: "Shadows Into Light", Helvetica, Arial, sans-serif;
  font-style: cursive !important;
  font-weight: 400 !important;
  letter-spacing: 0.0625rem;
  color: #008099;
  font-size: 1.625em;
  line-height: 1.3;
  margin: 1.25rem 0 3.125rem;
  text-align: center;
}
.max-loan-math .grid-x {
  align-items: center;
  display: flex;
}
.max-loan-math .symbol {
  font-size: 4.125em;
  position: relative;
  top: -0.625rem;
}

/* ------------------------------------
    medium screens
------------------------------------ */
@media only screen and (min-width: 40em) and (max-width: 63.9375em) {
  .max-loan-math .medium-8 {
    margin: 1.25rem auto 0;
  }
}
/* ----------------------------------------------------------------
    loan timeline - student-loans #7
---------------------------------------------------------------- */
.timeline {
  margin-top: 0.9375rem;
}
.timeline .large-1 {
  align-items: center;
  display: flex;
  justify-content: center;
}
.timeline .large-1 p {
  color: #ffffff;
  font-size: 1.25em;
  margin: 0;
  padding: 0 0 0.125rem;
  position: relative;
  transform: rotate(-90deg);
  white-space: nowrap;
}
.timeline .large-11 {
  border-top-style: solid;
  border-top-width: 0.125rem;
  padding: 0.3125rem 0.9375rem;
}
.timeline .school .large-1 {
  background: #1c8264;
}
.timeline .school .large-11 {
  border-color: #1c8264;
}
.timeline .grace .large-1 {
  background: #263c53;
}
.timeline .grace .large-11 {
  border-color: #263c53;
}
.timeline .repayment {
  min-height: 10rem;
}
.timeline .repayment .large-1 {
  background: #3f2b54;
}
.timeline .repayment .large-11 {
  border-color: #3f2b54;
}
.timeline .paid .large-1 {
  background: #c7502a;
}
.timeline .paid .large-11 {
  border-color: #c7502a;
}
.timeline .triangle-down {
  height: 0;
  overflow: hidden;
  padding-left: 50%;
  padding-top: 50%;
  width: 100%;
}
.timeline .triangle-down::after {
  border-left: 31.25rem solid transparent;
  border-right: 31.25rem solid transparent;
  border-top: 31.25rem solid #c7502a;
  content: "";
  display: block;
  height: 0;
  margin-left: -31.25rem;
  margin-top: -31.25rem;
  width: 0;
}

/* ----------------------------------------------------------------
    orientation
---------------------------------------------------------------- */
/* ------------------------------------
    first page sidebar
------------------------------------ */
.side-nav.orientation li.inactive {
  color: #595959;
  font-size: 0.9375em;
  padding: 0.9375rem 1.25rem;
}
.side-nav.orientation li.inactive span:not(.epithet)::after {
  content: ". ";
}

/* ------------------------------------
    review questions forms
------------------------------------ */
#jxPccOrientationForm fieldset > div {
  margin-top: 1.25rem;
}
#jxPccOrientationForm fieldset > div > div:first-of-type {
  font-family: open_sansbold, Helvetica, Arial, sans-serif;
  font-style: normal !important;
  font-weight: normal !important;
  letter-spacing: 0;
}
#jxPccOrientationForm fieldset > div .orientation-question {
  font-family: open_sansregular, Helvetica, Arial, sans-serif;
  font-style: normal !important;
  font-weight: normal !important;
  padding-top: 0.625rem !important;
}
#jxPccOrientationForm fieldset > div.label {
  margin-top: 0;
}
#jxPccOrientationForm fieldset > div label {
  font-size: 0.9375rem;
}
#jxPccOrientationForm fieldset > div input {
  margin-bottom: 0.625rem;
}

/* ----------------------------------------------------------------
    print
---------------------------------------------------------------- */
@media only print {
  #content h3, #content h4, #content .card .card-heading {
    font-weight: bold !important;
    letter-spacing: 0;
  }
}

/*# sourceMappingURL=style.css.map */