/* Northwestern Alumni Association 2017 - CSS overwrite */

/* Remove icons from links to files */
a.pdf, a[href$=".pdf"], a[href$=".PDF"],
a.pdf, a[href$=".doc"], a[href$=".DOC"],
a.pdf, a[href$=".docx"], a[href$=".DOCX"],
a.xls, a.xlsx, a[href$=".xlsx"], a[href$=".XLSX"], a[href$=".xls"], a[href$=".XLS"] {
    padding-right: 0;
    background: none;
}

/* More containers */

.contain-900 {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
}
.contain-600 {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

/* Allow for multi-column lists */
.list-columns-4  {
  -webkit-column-count: 4; /* Chrome, Safari, Opera */
  -moz-column-count: 4; /* Firefox */
  column-count: 4;
  -webkit-olumn-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
}
.list-columns-3  {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  -webkit-olumn-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
}
.list-columns-2 {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
}
.list-columns-4 li,
.list-columns-3 li,
.list-columns-2 li {
  display: inline-block; /* Helps with vertical alignment */
  width: 100%;
}
  @media only screen and (max-width: 1000px) {
    .list-columns-4 {
      -webkit-column-count: 3; /* Chrome, Safari, Opera */
      -moz-column-count: 3; /* Firefox */
      column-count: 3;
    }
  }
  @media only screen and (max-width: 800px) {
    .list-columns-3,
    .list-columns-4 {
      -webkit-column-count: 2; /* Chrome, Safari, Opera */
      -moz-column-count: 2; /* Firefox */
      column-count: 2;
    }

  }
  @media only screen and (max-width: 600px) {
    .list-columns-4,
    .list-columns-3,
    .list-columns-2 {
      -webkit-column-count: 1; /* Chrome, Safari, Opera */
      -moz-column-count: 1; /* Firefox */
      column-count: 1;
     }
  }


/* Margins for figure and figure.pull-right */


#ContentMiddle figure,
.content figure,
figure {
  margin: 0 0 2em 0;
  display: table;
}
#ContentMiddle figcaption,
.content figcaption,
figcaption {
  caption-side: bottom;
  color       : #716c6b;
  display     : table-caption;
  font-family : "Akkurat Pro Regular", sans-serif;
  font-size   : 0.9rem;
  line-height : normal;
  margin      : 0.25rem 0 0 0;
  padding     : 0;
}
#ContentMiddle figure.pull-right,
.content figure.pull-right {
  max-width: 50%;
  float    : right;
  margin   : 0 0 2em 2em;
}
#ContentMiddle figure.pull-left,
.content figure.pull-left {
  max-width: 50%;
  float    : left;
  margin   : 0 2em 2em 0;
}



@media (max-width: 767px) { 
  #ContentMiddle figure.pull-right,
  .content figure.pull-right,
  #ContentMiddle figure.pull-left,
  .content figure.pull-left {
    max-width: 100%;
    float    : none;
    margin   : 0 0 2em 0;
  }
}



@media screen and (max-width: 480px) {
  .align-image-center, .align-image-left, .align-image-right {
    display: block;
    margin-bottom: 1em;
  }
}
@media screen and (min-width: 481px) {
  p .align-image-center, p .align-image-left, p .align-image-right {
    margin-top: 4px; /* Compensate for <p>'s line-height */
  }
}

/* Tidying up pull-quotes */

figure.quote figcaption p ,
.content figure.quote figcaption p:last-of-type, 
.content-full figure.quote figcaption p:last-of-type{
  margin: 0;
}

figure figcaption figure.quote,
.landing-page figure figcaption figure.quote {
  margin-bottom: 0;
}


/* For schedules such as http://www.alumni.northwestern.edu/s/1479/02-naa/16/interior_lvls.aspx?sid=1479&gid=2&pgid=23757 */
.schedule-item {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.schedule-item .schedule-time {
  font-weight: bold;
  min-width: 100px;
  flex-grow: 0;
  flex-shrink: 0;
  margin-right: 1em;
  display: block;
}

.schedule-item .schedule-info {
  flex-grow: 1;
}

.schedule-item:not(:first-of-type) p:first-child{
    margin-top:0
}

.rss-club-event .preview p:last-child {
  margin-bottom: 0;
}

/* Fixing iModules janky toolbar */

ul.imod-cms-menu2-horizontal li a {
  height: auto !important;
}

#mContent, #mMobileContent, #mNewsListing, #mEventCalendar, #mCampaignListing, #mMembershipListing, #mModuleContent, #mMobileModuleContent, #mModuleNewsListing, #mModuleEventCalendar, #mModuleCampaignListing, #mModuleMembershipListing, #mModuleGroupsFeatures, #mDirectorySearchModule, #mDirectorySearch, #mPatternizedModule {
  width: 350px !important;
}

#CmsMasterMenu ul.imod-cms-menu2 {
  font-size: 12px !important;
}


ul.imod-cms-menu2 li a, ul.imod-cms-menu2 li a:visited {
  padding: 6px 8px !important;
}
li.imod-cms-menu2-li-hover, ul.imod-cms-menu2 li a:hover {
  padding: 5px 7px !important;
}


/* Wonkiness on event registration form */
.content .imod-guest-list ul>li {
  padding: 0.5rem 1rem;;
  background: none;
}

/* Layout helpers */
.margin-top-0 {
  margin-top: 0 !important;
}
.margin-bottom-0 {
  margin-bottom: 0 !important;
}
.nobr {
  white-space: nowrap;
}

/*.structLeftExtras a in style.css needs to be rewritten to exclude .button*/

.structLeftExtras a.button {
  color: white;
}

.structLeftExtras a.button:hover {
  text-decoration: none;
}

#left-nav .structLeftExtras ul {
  list-style: none;
}


/* For tabs on reunion page, for example */
#tabs a[aria-selected="true"]:hover {
  cursor: default;
}


/* Prevent the carat in select options from overwriting the text */
#main .imod_fieldWrapper .imod_fieldInput select, #main .imod_fieldWrapper .imod_col2 select, #main .imod_fieldWrapper .imod_col3 select, #main .imod_fieldWrapper .imod_col4 select {
    padding: 0.5em 2em 0.5em 0.5em;
  }

/* Get rid of the carat on selects larger than 1 */
select[size]:not([size='1']) {
    background: none !important;
    padding: 0.5em !important;
}

/* Remove garbage margins from empty sections */
.standard-page #main > section.emptyParent, .standard-page #main-content > section.emptyParent {
  margin-bottom: 0;
}

.standard-page #main-content {
  min-height: 0;
}

.Error, .error, .Success, .success {
  font-family: "Akkurat Pro Regular", Arial, sans-serif !important;
  font-size: 1rem !important;
  line-height: normal !important;
  padding: 1rem !important;
  background-image: none !important;
  margin: 0 0 2rem !important;
  color: #342f2e !important;
  font-weight: normal !important;
  width: auto !important;
}
.content .Error ul, .content .error ul,
.content .Success ul, .content .success ul {
  margin: 0;
  padding-left: 0;
}

.content .Success ul>li, .content-full .Success ul>li,
.content .success ul>li, .content-full .success ul>li,
.content .Error ul>li, .content-full .Error ul>li,
.content .error ul>li, .content-full .error ul>li {
  background-position-y: 0.4em;
}
.content .Success ul>li:last-child, .content-full .Success ul>li:last-child,
.content .success ul>li:last-child, .content-full .success ul>li:last-child,
.content .Error ul>li:last-child, .content-full .Error ul>li:last-child,
.content .error ul>li:last-child, .content-full .error ul>li:last-child {
  padding-bottom: 0;
}

/*Identity checkpoint modal*/
.fancybox-skin {
  background: #ffffff !important;
  border-radius: 0 !important;
}

/* Remedy uneven blocks */
[class^="split"] *:first-child {
  margin-top: 0;
}

/* Fixing nested headers and anchors in FAQ-style dropdowns */
.expander1 * h3>a, .expander1 * h4>a {
    background: none;
    padding: 0;
}

.expander>div h4.sectionHeader {
    font: 18px "Akkurat Pro Bold", "Arial Black", sans-serif;
}

/* Good ol’ clearfix */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Fix deck head on hero images for mobile */
@media screen and (max-width: 768px) {
  .landing-page .hero.mobile-hero .mobile-hero-text p.heroSmall, .standard-page .hero.mobile-hero .mobile-hero-text p.heroSmall {
    font-size: 24px;
  }
}

/* Suppress dark filter on mobile */
@media (max-width: 480px) {
  .hero .hero-image:before {
    background: none;
  }
}

.hero .hero-image {
  background-size: cover;
}

/* Slip a hashtag into the bottom-right of hero images */
.hero-bug {
  bottom: 1rem;
  color: white;
  font-family: "Poppins Extra Light", "Courier New", sans-serif;
  font-size: 2rem;
  position: absolute;
  right: 1rem;
}

/* Bring hero text into conformity with .edu */

.hero p.heroProse {
  font       : 24px "Akkurat Pro Regular",Arial,sans-serif;
  color      : #fff;
  text-shadow: 1px 1px 0px #000;
}

/* Make the hero shallower at middle viewports */
@media (max-width: 1100px) and (min-width: 769px) {  
  .landing-page .hero .hero-image {
    height: 400px;
  }
}


/*For use on lists such as http://www.alumni.northwestern.edu/s/1479/02-naa/16/interior.aspx?sid=1479&gid=2&pgid=21065
Allows us to make them proper lists.*/


.sort .row.row-data li {
    -webkit-flex-direction : column;
    -webkit-justify-content: center;
    background             : none;
    box-sizing             : border-box;
    display                : -ms-flexbox;
    display                : -webkit-flex;
    display                : flex;
    flex-direction         : column;
    justify-content        : center;
    list-style             : none;
    margin-bottom          : 20px;
    margin-right           : 1rem;
    padding                : 0;
    text-align             : center;
}

.sort .row.row-data--small li {
    font-size : 18px;
    min-height: 100px;
    width     : calc(25% - 1rem * 3 / 4);
}
.sort .row.row-data--small li:nth-child(4n) {
    margin-right: 0;
}
.sort .row.row-data--large li {
    font-size : 24px;
    min-height: 200px;
    width     : calc(33% - 1rem * 2 / 3);
}
.sort .row.row-data--large li:nth-child(3n) {
    margin-right: 0;
}
.sort .row.row-data--large a .sub {
  font-size: 16px;
}

ul.row {
    list-style: none;
    padding: 0;
}


.sort .row.row-data li a,
.sort .row.row-data--large a {
    margin: 0;
    width: 100%;
    height: 100%;
}

ul.row.row-data.row-data--small {
    align-items: flex-start;
}

@media screen and (max-width: 768px) {

  .sort .row.row-data--small li,
  .sort .row.row-data--large li {
    font-size: 20px;
    width    : calc(50% - 0.5rem);
  }  
  .sort .row.row-data--large li:nth-child(3n),
  .sort .row.row-data--small li:nth-child(4n) {
    margin-right: 1rem;
  }
  .sort .row.row-data--small li:nth-child(even),
  .sort .row.row-data--large li:nth-child(even) {
    margin-right: 0;
  }
  .sort .row.row-data--small li a,
  .sort .row.row-data--large li a{
    width: 100%;
  }


}

@media screen and (max-width: 480px) {
  .sort .row.row-data--small li,
  .sort .row.row-data--large li  {
    margin-right: 0;
    width: 100%;
  }
}

@media (min-width: 769px) {
  .sort .row.row-data--small li a,
  .sort .row.row-data--large li a {
    min-height: 120px;
  }
}

/* Prevent printer icon from overlapping content */
.imodcalendardetail {
  clear: both;
}

/* Fix errors in Global's vendor.css, bring weight into conformity with Global */
.content h2 em {
  font-family: "Poppins Light", Impact, sans-serif;
  font-style: italic;
}
.content h3 em {
  font-family: "Poppins Bold", Impact, sans-serif;
  font-style: italic;
}

.landing-page .news-home h3 em {
  font-family: "Akkurat Pro Bold Italic", "Arial Black", sans-serif;
}

.content h2 {
  font-family: "Poppins Light",  Impact, sans-serif;
}

.content .hero h2 {
  font-family: "Poppins Extra Bold", Impact, sans-serif;
}


/* Prevent these from bumping against edge of screen */
@media (max-width: 970px) {
  .withBottomBar.contain-970 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Make the home page news module thumbnails a consistent aspect ratio */
.news-home .news-features .thumb {
  height: 0;
  overflow: visible;
  padding-bottom: 66.66%;
}

/* Excessive padding at the top of event lists */
.standard-page .event:first-child {
  margin-top: 0.5rem;
}

/* Clean up some spacing in the meganav */
nav#top-nav h5 {
    margin-bottom: 0.5rem;
}
nav#top-nav h5 + p {
    margin-top: 0;
}
nav#top-nav p + a.button {
    margin-top: -0.5rem;    
}
nav#top-nav img + p {
    margin-top: 0.5rem;    
}

/* Notes and alerts */
.note {
  padding: 1rem;
  background: #f0f0f0;
  margin-bottom: 2rem;
}

.note p {
  line-height: 1.4;
}

.note p:first-child {
  margin-top: 0;
}

.note p:last-child {
  margin-bottom: 0;
}

.note.note-disclaimer p {
  font-size: 0.75rem;
}
.note.note-disclaimer h5 {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

/* fix link color on background heroes */

.landing-page .background-select.purple-slashes p {
  line-height: normal;
}

.landing-page .background-select.purple-slashes p a {
  color: white;
  line-height: normal;
}

/* On FAQs, align arrow at top, not center */

.expander1 h3>a, .expander1 h4>a {
    background: url(https://common.northwestern.edu/v8/css/images/icons/arrow-right-dkpurple.svg) .5rem 14px/8px 16px no-repeat;
    padding   : .5em 0 .5rem 2rem;
}
.expander1 h3.open>a, .expander1 h4.open>a {
    background: url(https://common.northwestern.edu/v8/css/images/icons/arrow-down-dkpurple.svg) .5rem 16px/16px 8px no-repeat;
    padding   : .5em 0 .5rem 2rem;
}

/* Copy of #main .imod_formItemWrapper .EventsHeader, #main .imod_fieldWrapper .EventsHeader */
h3.formHeader {
    background    : #f0f0f0;
    border        : none;
    color         : #4e2a84;
    font-family   : "Poppins Bold",Impact,sans-serif;
    font-weight   : normal;
    padding       : 15px 15px 10px;
    text-transform: uppercase;
}

/* Make form expander icon purple */
#MainBody .expand img {
  background: #4e2a84;
}

#top-nav ul li a.button, .button, .content a.button, .content p.button a, .content-full a.button, .content-full p.button a, .hero a.button, .tl-slideshow a.button, input[type=submit] {
  border-radius: 0;
}

/* Eliminate multiple margins when buttons are within a paragraph */
p .button, .content p a.button {
    margin-bottom: 0
}


/*For multiple buttons*/
@media (max-width: 500px) {  

  .button + .button {
    display: block;
    margin-left: 0;
    margin-top: 1rem;
  }
}


/* Fix excessive margins within feature boxes */
.feature-box .feature-copy *:last-child {
    margin-bottom: 0;
}

/* Create possibility of no photo in bios */
.standard-page .people-small .people-wrap-nophoto  .people-content,
.standard-page .people-big .people-wrap-nophoto  .people-content
 {
  width: 100%;
  float: none;
}
#ContentMiddle figure.people-image, .content figure.people-image {
  margin-bottom: 0.5rem;
}


/* Eliminate the need for inline style on these */
.background-select-image-slash {
  background: url('https://alumni.northwestern.edu/_files/images/slashes-white-bg.gif') no-repeat center / cover;
}

.background-select-image-slash-purple {
  background: url('https://alumni.northwestern.edu/_files/images/purple-slashes-standard.jpg') no-repeat center / cover;
  color: white;
}

/**Added h2 option **/
.background-select-image-slash-purple p,
.background-select-image-slash-purple p.subhead,
.background-select-image-slash-purple h3,
.landing-page .content .background-select-image-slash-purple h3,
.background-select-image-slash-purple h2,
.landing-page .content .background-select-image-slash-purple h2 {
  color: white;
}

.background-select-image-slash-purple a.button {
    background: #836eaa;
    border-color: #836eaa;
}

/* Uncenter elements on event pages */
.imod_eventDetails h2.imod_eventName,
.imod_eventDetails .imod_eventButtons {
  float: none;
  text-align: left;
}

/* Twitter, FB embeds */
iframe.twitter-tweet,
iframe[src*=facebook] {
  margin-bottom: 2rem;
}

/* Book recommendation feature */
.bookrec {
  display: -webkit-box;     
  display: -moz-box;       
  display: -ms-flexbox;   
  display: -webkit-flex;    
  display: flex;
  margin-bottom: 2rem;
}

.content #ContentMiddle figure.bookrec--cover {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 150px;
  margin: 0 2rem 1rem 0;
}

.bookrec--notes {
  flex-grow: 1;
}

@media (max-width: 500px) {  
  .bookrec {
    display: block;
  }
}

/* same as .news-page .subhead at Global */
.subhead,
.content #ContentMiddle .subhead {
    font: 34px/1.2em "Poppins Extra Light", "Courier New", sans-serif;
    color: #716c6b;
    margin: 0 0 2rem 0;
}

/* Utilities for the help documentation */
.help-hot {
  background   : #E4E0EE;
  border       : 1px solid #4E2A84;
  display      : flex;
  margin-bottom: 2rem;
  margin-top   : 1rem;
  padding      : 1rem;
}

.help-hot-content *:first-child,
.content .help-hot-content *:first-child {
    margin-top: 0;
}

.help-hot-content *:last-child,
.content .help-hot-content *:last-child {
    margin-bottom: 0;
}

.help-hot:before {
  -webkit-font-smoothing: antialiased;
  color                 : #4E2A84;
  content               : "\f06a";
  display               : block;
  display               : inline-block;
  flex-grow             : 0;
  flex-shrink           : 0;
  font-family           : FontAwesome;
  font-size             : 1.5rem;
  line-height           : 1;
  text-rendering        : auto;
  width                 : 30px;
}

.help-icon {
    background-repeat: no-repeat;
    background-size  : contain;
    display          : inline-block;
    height           : 1.5rem;
    margin-bottom    : -0.25rem;
    position         : relative;
    width            : 1.5rem;
}

.help-icon-hyperlink {
  background-image : url(/s/1479/images/gid2/editor/help/hyperlink_icon.jpg);
}
.help-icon-spellcheck {
  background-image : url(/s/1479/images/gid2/editor/help/SpellCheck.jpg);
}.help-icon-edit {
  background-image : url(/s/1479/images/gid2/editor/help/EditIcon.jpg);
}.help-icon-field-edit {
  background-image : url(/s/1479/images/gid2/editor/help/FieldEditIcons.jpg);
  width: calc(1.5rem * 65 / 19); /* height x ratio of icon*/
}


/* Club membership form cleean-up */

.content table .idbmsMembershipLevelItem[id$="trDescription"] td,
.content table .idbmsMembershipLevelAltItem[id$="trDescription"] td

 {
    padding-bottom: 1rem;
    padding-left: 1rem;
    font-size: 0.8rem !important    ; 
}

tr.idbmsMembershipLevelHeader td {
/*    background: #4e2a84;
    font      : 21px "Akkurat Pro Bold", "Arial Black", sans-serif;
    color     : #fff;
    padding   : .7rem 1rem;
    text-align: left;
    border    : 2px solid #fff;*/
}

tr.idbmsMembershipLevelHeader + tr td {
    padding-top: 1rem;
}

.membership-levels-fieldset input:checked + label {
    font-family: 'Akkurat Pro Bold'
}

/* Promoted results show only one at a time, so let's change this to singular */
.gsc-webResult.gsc-result.gsc-promotion:before {
  content: 'Highlighted Result';
}

/* Reverse (white) button with matching overlay animation */
a.button.button--reverse,
.hero a.button.button--reverse {
  background: #fff;
  color: #4e2a84;
  border: 2px solid #4e2a84;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Overlay base – subtle light purple wash (same as standard button) */
a.button.button--reverse::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #b6acd1; /* same hover tone as normal purple button */
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.2s ease-out;
}

/* Hover state – fill with light purple while text turns white */
a.button.button--reverse:hover,
a.button.button--reverse:focus {
  color: #fff;
  text-decoration: none;
}

/* Trigger the overlay expansion */
a.button.button--reverse:hover::before,
a.button.button--reverse:focus::before {
  transform: scaleX(1);
}
