/*@import url('https://fonts.googleapis.com/css?family=Titillium+Web:200,200i,400,400i,700,700i');*/
/*<link href="https://fonts.googleapis.com/css?family=Titillium+Web:200,200i,400,400i,700,700i" rel="stylesheet">*/
/* ---------------------------------------------------- RESET */
html,
body,
div,
span,
applet,
object,
iframe,
Xh1,
Xh2,
Xh3,
Xh4,
Xh5,
Xh6,
p,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
   background: transparent;
}

html {
   height: 100%;
   box-sizing: border-box;
   -ms-text-size-adjust: 100%; /* 3 */
   -webkit-text-size-adjust: 100%; /* 3 */
   -webkit-tap-highlight-color: rgba(0,0,0,0); /* disable form field focus outline */
   font: 100%/1.5 'Titillium Web', sans-serif;
   background-color: #eee;
   color: #000;
   overflow-y: scroll;
}

*,
*:before,
*:after {
   box-sizing: inherit;
}

body {
   position: relative;
}

h2,
h3,
h4,
h5,
h6 {
   line-height: 1;
   margin-bottom: 1em;
}

* + h2,
* + h3,
* + h4,
* + h5,
* + h6 {
   margin-top: 1.5em;
}

h4 {
   font-size: .875em;
}

p {
   margin: 0 0 1em;
}

* + p {
   margin-top: 1em;
}

br {
   clear: both;
}

img {
   vertical-align: middle;
}

/* TODO : Is bold too bold? Is 500 or 600 better? */
strong {
   font-weight: bold;
}

small {
   font-size: .875em;
}

.ui-list {
   list-style: none;
}

.list {
   margin-top: 1em;
   margin-bottom: 1em;
   padding-left: 18px; /* 16px is ideal, but overflow hidden cuts off in chrome / 40px */
}

.list li + li {
   margin-top: .5em;
}

input + label {
   vertical-align: middle; /* vertiacally align checkbox and radio buttons with labels */
}



/* ---------------------------------------------------- HEADER */

   .header {
      background-image: url(../images/banner__bg--arrow.png);
      background-repeat: repeat-x;
      background-position: bottom center;
      background-color: #c03;
      min-height: 106px;
      position: relative;
      color: #fff;
   }

      /* h1 */.header__site-brand {
         margin: 0;
         line-height: 85px;
         position: relative;
      }

         /* a */.header__home-link {
            position: absolute;
            width: 175px;
            top: 0;
            left: 24px;
            line-height: 85px;
         }

            /* img */.header__site-logo_R {
               display: none
            }

            /* img */.header__site-logo_Rutgers {
               max-width: 100%;
               height: auto;
               position: absolute;
               top: 24px;
            }

            /* span */.header__site-name {
               position: absolute;
               top: 20px;
               left: 100%;
               font-size: 36px;
               font-weight: 300;
               white-space: nowrap;
               color: #fff;
               line-height: 48px;
               border-left: 1px solid rgba(255,255,255,.5);
               padding-left: 24px;
               margin-left: 24px;
            }



/* ---------------------------------------------------- NAVIGATION */

/* main navigation / progress bar */
   .nav {
      margin: -0.5em 0 2em;
      background-color: #000;
   }

   .nav li {
      position: relative;
      font-size: 12px; /* font size for arrows */
      float: left;
      overflow: hidden;
   }

   .nav li:before,
   .nav li:after {
      content: "";
      width: 0;
      height: 0;
      border: 1em solid #f00;
      position: absolute;
      right: 0;
      border-color: transparent;
      top: 0;
      border-right: 0;
      bottom: 0;
      margin: auto;
      border-left: 0.75em solid #555;
   }

   .nav li:after {
      right: 1px;
      border-left: 0.75em solid #000;
   }

   .nav li:last-child:before,
   .nav li:last-child:after {
      border: 0;
   }

   .nav a,
   .nav a:visited {
      font-size: 14px;
      cursor: pointer;
      color: #999;
      text-decoration: none;
      padding: 0 32px 0 16px;
      display: block;
      text-transform: uppercase;
      line-height: 48px;
      transition: color 0.4s;
   }

   .nav a:hover {
      color: #fff;
   }

   .nav a.current,
   .nav a.current:hover {
      color: #fff;
      font-weight: 900;
   }

   /* error indicators */
   .nav i,
   i {
      position: absolute;
      width: 16px;
      height: 16px;
      overflow: hidden;
      background: url(../images/icons_8.png) no-repeat 0 0;
   }

   .nav i {
      right: 12px;
      top: 15px;
   }

   i.good {
      background-position: 100% 50%;
   }

   i.bad {
      background-position: 0 50%;
   }


/* ---------------------------------------------------- NAVIGATION - UTILITY */

/* TODO : Refactor / clean up */
   X.nav-utility {
      Xposition: absolute;
      Xtop: 18px; /* ( 85 - 48 ) / 2 */
      Xright: 24px;
      Xdisplay: table;
   }

   .nav-utility > li {
      position: relative;
      vertical-align: middle;
      line-height: 1; /* 95px */
      color: #fff;
      display: table-cell;
   }

   X.nav-utility > li:first-child {
      padding-right: 8px; /* margin doesn't work on table-cell */
   }

   .nav-utility a {
      display: inline-block;
      line-height: 48px;
      text-decoration: none;
      color: #fff;
      padding: 0 8px;
      transition: background-color 0.4s;
   }

   .nav-utility a:hover {
      background-color: #c03;
   }

   .nav-utility li.dd {
      transition: background 0.5s;
   }
   .nav-utility li.dd.hover {
      background-color: #c03;
   }

   .nav-utility li.dd.hover > ul {
      opacity: 1;
      transition: opacity 0.5s;
      visibility: visible;
   }

   .nav-utility ul {
      position: absolute;
      top: 100%;
      right: 0;
      width: 250px;
      background-color: #c03;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.5s, visibility 0s 0.5s;
      z-index: 1;
   }

   .nav-utility ul a {
      line-height: 1;
      display: block;
      padding: 12px 8px;
      color: rgba(255, 255, 255, 0.7);
      transition: all 0.5s ease;
   }

   .nav-utility ul a:hover,
   .nav-utility ul a:focus {
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.2);
      color: #fff;
   }






#menu {
   font-size: 16px;
   background-color: #B2002C;/* rgb(189, 0, 47);  *//* #c03; */

   box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
   Xmargin: 3em 0 6em;
   Xpadding: 0 24px;
   height: 48px; /* Menu height */
   overflow: hidden; /* Don't show anything outside the nav */

   position: absolute;
    top: 20px;
    right: 24px;
    z-index: 2;
    max-width: 50%;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .2);
    Xmax-width: 92px;
}

#menu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
   max-height: 96px; /* Menu height x 2 */
   position: relative; /* Position the menu button relative to this item */
}

#menu li {
   /* display: inline-block; */
   display: block;
   text-align:  center;
}

#menu a {
   /* display: inline-block; */
   display: block; /* BG */
   padding: 0 1em;
   Xcolor: rgb(236, 236, 236);
   Xletter-spacing: 0.1em;
   text-decoration: none;
   text-transform: uppercase;
   white-space: nowrap;
   line-height: 48px; /* Menu height */
   height: 48px; /* Menu height */
}

#menu a:hover {
   background-color: rgba(0, 0, 0, .08);
}

#menu li:last-child { /* The menu button */
   position: absolute; /* Move the menu button out of flow */ /* BG */
   Xright: 0; /* BG */

   bottom: 48px; /* Move upwards, the same distance as the menu height */
   Xbackground-image: linear-gradient(to right, rgba(19, 51, 61, 0) 0, rgba(19, 51, 61, 1) 2em);
   Xbackground-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, #c03 2em);
   Xpadding-left: 3em;

   display: block;
   width: 100%;
   background-color: #C03;
}

#menu li:nth-last-child(2) { /* The close button */
   display: none;
}

nav#menu:target {
   height: auto;
   padding: 0;
}
nav#menu:target {
   /* BG v1 */
   max-width: 100%;
}
nav#menu:target ul {
   max-height: none;
}

nav#menu:target li {
   display: block;
}

nav#menu:target a {
   display: block;
   Xpadding: 0 2em;
   background-color: #BC002F;/* rgba(255, 255, 255, 0.05); */

}

nav#menu:target a:hover {
   /* background-color: rgba(255, 255, 255, 0.08); */
   background-color: #c03;
}

nav#menu:target li:not(:first-child) {
   margin-top: 2px;
}

nav#menu:target li:last-child {
   display: none;
}

Xnav#menu:target li:nth-last-child(2) {
   xdisplay: inline-block;
   position: absolute;
   top: 0;
   right: 0;
   margin: 0;
   border-left: 2px solid rgba(0, 0, 0,.05);
}



/* ---------------------------------------------------- NAVIGATION - BREADCRUMB */

   .breadcrumb {
      background-color: #000;
      color: #fff;
      padding: 0 1.5em .75em;
   }

      .breadcrumb * {
         vertical-align: middle;
      }

      .breadcrumb__label {}  /* .visually-hidden-no-size | You are here: */

      .breadcrumb__link,
      .breadcrumb__delimeter {
         color: rgba(255, 255, 255, 0.5);
         text-decoration: none;
      }

      .breadcrumb__link:hover,
      .breadcrumb__link:focus {
         color: #fff;
         text-decoration: underline;
      }

      .breadcrumb__page {}



/* ---------------------------------------------------- STRUCTURE */

/* main content area */
   .content-container {
      clear: left;
      margin: 24px;
      padding: 0;
      background-color: #fff;
      -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
      -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
      box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
   }

   .cols--equal {
      margin: 24px 0;
   }

   .cols--equal__container {
      width: 100%;
      display: table;
      table-layout: fixed;
      border-collapse: collapse;
   }

   .cols--equal__container > div {
      display: table-cell;
      vertical-align: top;
      position: relative;
   }

   .cols--equal__container > div:first-child {
      Xborder-right: 1px dashed #ddd;
   }

   .cols--equal__container > div:last-child {
      Xborder-left: 1px dashed #ddd;
   }

   .cols--equal .section-heading {
      margin-top: 0;
   }



/* ---------------------------------------------------- FOOTER */
   
   .footer {
      position: relative;
      Xcolor: #777;
      margin: 2em 24px;
      Xfont-size: 11px;
      line-height: 2;
   }

   .footer > p {
      margin: 0 175px 0 0; /* make room for the logo */
   }

   .footer__link_Rutgers {
      margin-top: 1em;
      display: inline-block;
   }



/* ---------------------------------------------------- MESSAGES */

/* message base */
   .msg {
      clear: both;
      margin: 0 0 2em; /* TODO : Abstract out. Use l-m-b helper class instead */
      padding: 1em;
      overflow: visible;
      word-wrap: break-word;
      text-overflow: ellipsis;
      border-left: 13px solid #ccc;
      background-color: rgba(0, 0, 0, .05);
      font-weight: 400;
      vertical-align: middle; /* TODO : Move to .msg * | not inherited */
   }

   .msg-info {
      border-color: #19a3dc;
   }

   .msg-success {
      border-color: #ce9;
   }

   .msg-errors {
      border-color: #c03;
   }

   .msg__heading {
      border-bottom: 1px solid;
      margin: 0 0 1em 0;
      padding: 0 0 .5em 0;
   }

   .msg-info > .msg__heading {
      color: #19a3dc;
   }

   .msg-success > .msg__heading {
      color: #0a0;
   }

   .msg-errors > .msg__heading {
      color: #c03;
   }

   .msg :last-child {
      margin-bottom: 0;
   }

   .msg__list > li {
      padding: .5em 0 .5em 2em;
      position: relative;
   }

/* circle bullet for "icons" */
   .msg__list > li:before {
      content: "";
      width: 1.5em;
      height: 1.5em;
      position: absolute;
      background-color: #fff;
      border-radius: 50%;
      top: .5em; /* same as top padding in li */
      left: 0;
   }

/* bullet */
   .msg__list > li:after {
      content: "\2022"; /* \00b7 */
      width: 1.5em; /* 1em */
      height: 1.5em; /* 1em */
      position: absolute;
      font-weight: 700;
      top: .5em; /* same as top padding in li / needed for alignment in wrapping bullets */
      left: 0; /* .5em */
      color: #999;
      text-align: center;
      xtext-indent: -2px;
   }

/* place ! "icon" in circle */
   .msg-errors li:after,
   .msg.section-incomplete:after {
      content: "!";
      color: #c03;
      xtext-indent: 0;
   }

/* place checkmark "icon" in circle */
   .msg-success li:after,
   .msg.section-complete:after {
      content: "\2713";
      color: #0a0;
      xtext-indent: -3px; /* center checkmark */
   }

/* place i "icon" in circle */
   .msg-info li:after {
      content: "i";
      color: #19a3dc;
   }

/* microcopy */
   .microcopy {
      clear: left;
      display: inline-block;
      color: #777;
      font-size: .75em; /* TODO : Remove. Use <small class="microcopy"> instead. */
      font-weight: 400;
   }



/**
* F O R M   E L E M E N T S
* ------------------------------------ */
   .fieldset {
      clear: both;
      display: block;
      margin: 2em 0;
      _zoom: 1;
      _overflow: hidden;
      _position: relative;
   }

   .legend,
   .section-heading {
      margin-top: 3em;
      text-transform: uppercase;
      color: #c03;
      font-weight: 700;
   }

   .fieldset > .section-heading:first-child {
      margin-top: 0;
   }

   .legend {
      line-height: 1.5;
      margin-top: 0;
      margin-bottom: 1.5em;
      text-transform: none;
   }

   .section-institution {
      border-top: 1px solid #ddd;
   }

   .collapsible-content > :first-child {
      margin-top: 0;
   }

   input[type="text"],
   input[type="email"],
   input[type="text"],
   input[type="password"],
   select,
   textarea,
   .inputTxt {
      border: solid 1px #ccc;
      border-top-color: #888;
      color: #333;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 16px;
   }

   select {
      padding: 2px 2px 2px 0;
   }

   select.small {
      width: 151px;
   }

   td label.bottom select {
      display: inline;
   }

   xinput {
      margin: 0 2px 0 0;
   }

   /*input[type="text"]:hover, input[type="password"]:hover, input[type="text"]:focus, input[type="password"]:focus, select:hover, select:focus, textarea:hover, textarea:focus {background-color:#FFF7DF;} removed since not all widgets do this consistently */
   input[type="text"],
   input[type="password"],
   .hasDatepicker,
   input.txt,
   .dateMMYYYY input,
   input.MMYYYY,
   .gpa input,
   .credits input,
   input.small,
   input.medium,
   input.long {
      display: block;
      margin: 0;
      padding: 3px;
   }

   input[readonly="readonly"],
   input[readonly="readonly"]:hover,
   input[readonly="readonly"]:focus {
      background-color: #ebebe4;
   }

   .hasDatepicker {
      background: #fff url("../images/calendar.png") no-repeat scroll 98% 50%;
      background-color: #fff !important;
   }

   .ui-datepicker-month {
      font-weight: 400;
      font-size: 12px;
      line-height: 30px;
   }

   .ui-datepicker-title select {
      display: inline;
      font-size: 12px !important;
      padding: 0;
      width: auto !important;
   }

   /* set font-size for button, then take the calculated line-height from firefox and add it to button. Now all the other browsers have the same line-height that firefox has. I also set height equal to line-height. */
   /* input button is slightly bigger than a button because of different size calculations, so take the height of input and apply it as line-height to input, button, and a */
   /* mozilla has line-height:normal !important set in useragent css for inputs that can't be overwritten so set it for all browsers */

   input.btn {
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      line-height: normal !important;
   }

   input::-moz-focus-inner,
   button::-moz-focus-inner {
      padding: 0;
      border: 0;
   }

   .date {
      display: inline;
   }

   .MMYYYY {
      width: 73px;
   }

   .hours input.hours {
      width: 30px;
      display: inline;
   }

   .MMYYYY input.MMYYYY {
      display: inline;
      width: 75px;
   }

   input.small {
      width: 135px;
   }

   /* input (checkbox and radio button) */
   input[type="checkbox"],
   input[type="radio"] {
      width: auto;
      margin: 0;
      vertical-align: middle;
   }

   /* textarea */
   .comment textarea {
      margin: 0;
      border: 1px solid #ccc;
      border-top-color: #666;
      padding: 0;
      width: 99.5%;
      font-family: Verdana, sans-serif;
      font-weight: 400;
      color: #333;
   }

   /* academic interests */
   .criteria {
      font-size: 11px;
      color: #c03;
      font-weight: 900;
   }

   .disabled {
      position: absolute;
      visibility: hidden;
   } /* takes the acadmic interes out of normal flow causing the space to collapse */

   .disabled label {
      cursor: text;
   }

   .disabled label span {
      color: #aaa;
   }

   :disabled {
      cursor: not-allowed;
   }

   input[type="text"]:disabled {
      background: #eee;
   }

   /* login */
   .login h2 small {
      color: #aaa;
      font-size: 9px;
   }

   .login h2 a {
      font-weight: 400;
   }



/* ---------------------------------------------------- TABLES */

table {
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
   border-left: solid 1px #ccc;
   border-top: solid 1px #ccc;
   margin-bottom: 2em;
}

th {
   border-bottom: solid 1px #ccc;
   border-right: solid 1px #ccc;
   background-color: #eee;
   font-family: Arial, sans-serif;
}

td {
   border-bottom: solid 1px #ccc;
}

table.highlight tr:hover td,
tr.highlight td {
   background: #ffc;
}


   th,
   td {
      padding: 10px;
      vertical-align: middle;
   }

   table.list {
      margin: 10px 0 0;
      border-top: 1px solid #ddd;
      width: 100%;
   }

   table.list td {
      border-bottom: 1px dotted #eee;
   }

   table.list th {
      text-align: left;
      font-size: 11px;
      color: #666;
      font-weight: 400;
      padding-top: 0;
      padding-bottom: 3px;
      border-bottom: 1px solid #ddd;
   }

   /* tables in dialog boxes */
   .heading {
      position: relative;
      overflow: hidden;
      clear: both;
      font-size: 11px;
      border-bottom: 1px solid #999;
      padding: 5px 0;
      background: #ddd;
   }

   /* admin tables */
   table.admin {
      background: #fff;
   }

   table.admin thead th {
      background: #555;
      color: #fff;
      font-weight: 400;
      white-space: nowrap;
   }

   .off label,
   label.off {
      color: #999;
      cursor: text;
   }


/* ---------------------------------------------------- BUTTONS  -  navigation & submit */
/* base */
   .btn,
   .btn:visited {
      white-space: nowrap;
      position: relative;
      display: inline-block;
      border: 0;
      /* border-bottom: 1px solid rgba(0,0,0,0.25); - replaced with inset box-shadow */
      padding: 5px 8px; /* 3px 7px;*/
      color: #fff;
      background-color: #999; /*#aaa;*/
      text-decoration: none;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .25);
      -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .25);
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .25);
      cursor: pointer;
      font-size: 12px; /* 100%; */
      vertical-align: middle;
      line-height: normal;
   /* disable default field rendering */
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      appearance: none;
      text-align: center;
      text-shadow: none;
   }

   .btn:hover,
   .btn:focus {
      background-color: #888;
      color: #fff;
      /* text-shadow: none; */
      text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
   }

   .btn:active {
      text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
      box-shadow: none;
      top: 1px;
      color: rgba(255, 255, 255, .7);
      background-color: #777;
   }

/* inactive */
   .btn-disabled,
   .btn-disabled:visited,
   .btn-disabled:hover,
   .btn-disabled:focus,
   .btn-disabled:active {
      background-color: #ccc;
      color: #eee;
      position: relative;
      top: 0;
      text-shadow: none;
      box-shadow: none;
      cursor: text;
      cursor: not-allowed;
   }

/* primary action button */
   .btn-primary,
   .btn-primary:visited {
      background-color: #c03;
      text-transform: uppercase;
   }

   .btn-primary:hover,
   .btn-primary:focus {
      background-color: #b7092d;
   }

   .btn-primary:active {
      background-color: rgb(155, 9, 38);
   }

/* large button */
   .btn-large {
      padding: 1em;
      font-size: 100%;
   }



/* ---------------------------------------------------------- HELPER CLASSES */


/* size */
   .auto {
      width: auto;
   }

   .w5 {
      width: 5%;
   }

   .w10 {
      width: 10%;
   }

   .w25 {
      width: 25%;
   }

   .w33 {
      width: 33%;
   }

   .w50 {
      width: 50%;
   }

   .w66 {
      width: 66%;
   }

   .w75 {
      width: 75%;
   }

   .w100 {
      width: 100%;
   }


/* text alignment */
   .tj {
      text-align: justify;
   }

   .tl,
   .l {
      text-align: left !important;
   }

   .tc,
   .c {
      text-align: center !important;
   }

   .tr,
   .r {
      text-align: right !important;
   }

   .vat {
      vertical-align: top;
   }

   .vab {
      vertical-align: bottom;
   }

   .vac {
      vertical-align: middle;
   }

/* placement */
   .fn {
      float: none;
   }

   .fl {
      float: left !important;
   }

   .fr {
      float: right;
   }

   .cn {
      clear: none;
   }

   .cl {
      clear: left;
   }

   .cr {
      clear: right;
   }

   .cb {
      clear: both;
   }

/* clear fix - clear floats */
   .cf:before,
   .cf:after {
      content: "";
      display: table;
   }

   .cf:after {
      clear: both;
   }


/* Spacing - margins - default 24px or 1.5em */

   .l-mx-auto {
      margin-left: auto;
      margin-right: auto;
   }

   .l-m-0 {
      margin: 0;
   }

   .l-mx-0 {
      margin-left: 0;
      margin-right: 0;
   }

   .l-my-0 {
      margin-top: 0;
      margin-bottom: 0;
   }

   .-l-mx {
      margin-left: 1.5em;
      margin-right: 1.5em;
   }

   .l-my {
      margin-top: 1.5em;
      margin-bottom: 1.5em;
   }

   .l-mt {
      margin-top: 1.5em;
   }

   .l-mr {
      margin-right: 1.5em;
   }

   .l-mb {
      margin-bottom: 1.5em;
   }

   .l-ml {
      margin-left: 1.5em;
   }


/* decorative */

   .important {
      font-weight: 700;
      color: #c03;
   }

   .l-b-0,
   .noborder {
      border: 0 !important;
   }

   .l-pb-0,
   .nobottompadding {
      padding-bottom: 0 !important;
   }

   .nowrap {
      white-space: nowrap;
   }

   .hide,
   .is-hidden {
      display: none;
      visibility: hidden;
   }

   .-bg-white {
      background-color: #fff;
   }



/* ---------------------------------------------------------- HELP Dialog */
   /* help (?) button */
   .help {
      display: inline-block;
      height: 16px;
      width: 16px;
      xmargin-left: 0.5em;
      text-indent: 16px;
      overflow: hidden;
      background: url(../images/icons.png) -16px 0;
      cursor: pointer;
      vertical-align: middle;
      position: relative;
      top: -1px;
   }

   /* help dialog pop-up */
   .help .help_box {
      position: absolute;
      padding-top: 4px;
      width: 330px;
      z-index: 999;
      color: #000;
      font: 12px sans-serif;
      border: 1px solid #ccc;
      padding: 7px 10px;
      background: #f5f5f5;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
   }

   /* close (x) button */
   .help .help_box_top {
      margin-bottom: 10px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 5px;
      z-index: 1000;
      text-align: right;
   }

   .help .exit_button {
      cursor: pointer;
      background: url(../images/icons.png) no-repeat 313px 50%;
      color: #000;
      font-weight: bold;
      overflow: hidden;
      padding: 0 20px 0 0;
      position: relative;
      z-index: 1001;
   }

   /* help content */
   .help .help_box_main {
      overflow: auto;
      max-height: 350px;
      height: auto;
      z-index: 999;
      font: 12px Verdana, sans-serif;
   }

   .help .help_box_main h3 {
      margin: 1em 0;
      padding-top: 1em;
      border-top: 1px dotted #ccc;
   }

   .help .help_box_main h3.first {
      border: 0;
      margin-top: 0;
      padding-top: 0;
   }

   .help .help_box_main p {
      margin: 1em 0;
      color: #555;
      font-size: 11px;
   }
 


/******************************************************************** LAYOUT STYLES */
label.readonly {
   color: #066;
   cursor: help;
}

.row {
   padding: 0; /* stop vertical margin collapsing*/
   margin: 0;
   clear: both;
}

.row.msg {
   margin: 1em 0;
}

.row.msg .fLabel {
   padding: 1em;
}


/******************************************************************** BOTTOM BUTTONS */

.sNavDiv {
   margin: 2em 0 1em;
   border-top: 1px solid #ddd;
   padding-top: 2em;
}

.sNavDiv .btn {
   margin-right: 1em;
}

.error {
   background-color: #ffc;
   border: dashed 1px #c60;
   color: #c60;
   padding: 1em;
   margin: 2em 0;
   font-weight: bold;
}


/******************************************************************** NAVIGATION LINKS */
a:link.pNavLink {
   font-family: Verdana, Arial, sans-serif;
   font-weight: bold;
   color: #fff;
   text-decoration: none;
   border: 0;
   background: transparent;
}

a:visited.pNavLink {
   font-family: Verdana, Arial, sans-serif;
   font-weight: bold;
   color: #fff;
   text-decoration: none;
   border: 0;
   background: transparent;
}

a:active.pNavLink {
   font-family: Verdana, Arial, sans-serif;
   font-weight: bold;
   color: #fff;
   text-decoration: none;
   border: 0;
   background: transparent;
}

a:hover.pNavLink {
   font-family: Verdana, Arial, sans-serif;
   font-weight: bold;
   color: #fc3;
   text-decoration: none;
   border: 0;
   background: transparent;
}

/******************************************************************** IMAGE LINKS */
a:link.img,
a:visited.img {
   border: 0;
   text-decoration: none;
}

/******************************************************************** FOOTNOTE LINKS */
a:link.footnote {
   border: solid 1px #c60;
   background-color: #c60;
   text-decoration: none;
   padding: 0 1px;
   font-size: x-small;
   color: #fff;
}

a:visited.footnote {
   border: solid 1px #c60;
   background-color: #c60;
   text-decoration: none;
   padding: 0 1px;
   font-size: x-small;
   color: #fff;
}

a:hover.footnote {
   border: solid 1px #c60;
   background-color: #fc3;
   text-decoration: none;
   padding: 0 1px;
   font-size: x-small;
   color: #c60;
}

.col {
   float: left;
   margin: 0 1em 1em 0;
   clear: none;
}

.collapsible-content {
   clear: both;
   margin: 2em 0 2em 5px !important;
   padding: 2em 24px;
   border-left: 2px dashed #ccc;
   background-color: #f2f2f2;
}

.is-open {
   display: block !important;
}

.btn-tooltip {
   border: none;
   background: none;
   position: relative;
}

.tooltip-content {
   height: auto;
   display: block;
   position: absolute;
   bottom: 130%;
   left: 50%;
   z-index: 200;
   width: 180px;
   margin: 0 0 5px -90px;
   padding: 0.75em 1em;
   text-align: center;
   color: #fff;
   font-size: 12px;
   border-radius: 4px;
   background-color: #474747;
   -webkit-transition: all 0.3s cubic-bezier(0.3, 0, 0, 1);
   transition: all 0.3s cubic-bezier(0.3, 0, 0, 1);
   -webkit-transform: rotateX(20deg) scale(0.8);
   transform: rotateX(20deg) scale(0.8);
   -webkit-transform-origin: center 120%;
   transform-origin: center 120%;
   -webkit-backface-visibility: hidden;
   opacity: 0;
}

.btn-tooltip {
   display: inline-block;
   text-align: center;
   min-width: 40px;
}

.btn-tooltip:focus .tooltip-content,
.btn-tooltip:hover .tooltip-content {
   -webkit-transform: rotateX(0deg) scale(1);
   transform: rotateX(0deg) scale(1);
   opacity: 1;
}

.gpa-review .collapsible-content {
   padding-top: 1em;
   padding-bottom: 1em;
   margin: 0 0 1em 5px !important;
}

.gpa-review p.fField:before {
   content: "-> ";
   xposition: absolute;
   xtext-indent: -0.75em;
   xline-height: 0.5em;
   xfont-size: 2em;
   color: #999;
}

.accordion-title {
   cursor: default;
   border-top: 1px solid #ddd;
   display: table;
   border-collapse: separate; /* override border-collapse in .cols--equal__container */
   line-height: 1;
   width: 100%;
   padding: 0.5em 0;
   margin: 0;
}

.accordion-title:first-child {
   border-top: 0;
}

.accordion-title > strong {
   vertical-align: middle;
   display: table-cell;
   padding-left: 0.5em;
}

.toggle-trigger {
   display: table-cell;
   height: 1.5em;
   line-height: 1;
   width: 1.5em;
   text-align: center;
   background-color: #eee;
   color: #999;
   font-family: monospace, monospace;
   vertical-align: middle;
   font-size: 15px;
   padding: 5px;
   font-weight: 400;
}

.accordion-content {
   padding-left: 30px;
   margin-bottom: 3em;
   font-size: 0.875em; /* 14px */
}

.section-institution > .accordion-content {
   padding-left: 0;
   font-size: 100%;
}

.section-faq {
   margin-top: 3em;
}

.section-faq > .accordion-title > strong {
   font-weight: 300;
}

.applications {
   border-top: 1px solid #ddd;
}

.accordion-content > .applications {
   margin-left: -30px;
}



/* RESPONSIVE ADJUSTMENTS
   ---------------------------------------------------------------------------- */
@media (max-width: 1300px) {
   .nav-utility {
      Xposition: static;
      Xbackground-color: #000;
      Xpadding-left: 25px;
      Xdisplay: block;
   }

   .nav-utility > li {
      display: inline-block;
   }
}

@media (max-width: 767px) {
   .content-main,
   .content-aside {
      border: 0;
      padding: 0;
      float: none;
      width: auto;
   }

   .content-aside {
      xmargin-top: 5em;
      border-top: 1px solid #ddd;
      padding-top: 2em;
   }

   .breadcrumb.l-mb {
      margin-bottom: 0;
   }

   .cols--equal {
      margin: 0;
   }

   .cols--equal__container {
      display: block;
   }

   .cols--equal__container > div {
      display: block;
      margin-bottom: 3em;
      padding: 0 0 3em;
      border: 0;
      border-bottom: 1px solid #ddd;
   }

   .cols--equal__container > div:first-child {
      border-right: 0;
   }

   .cols--equal__container > div:last-child {
      border-bottom: 0;
      border-left: 0;
      padding-bottom: 0;
   }

   .cols--equal-height.cols-2 {
      width: auto;
      margin: 0;
      border: 0;
   }

   .cols-2__left {
      width: auto;
      float: none;
      margin-left: 0;
      padding-right: 0;
   }

   .cols-2__main {
      padding-left: 0;
   }

   /* Footer logo */
   .logo {
      position: static;
   }

   .footer {
      text-align: center;
   }

   .footer > p {
      margin: 0;
   }

   .footer__link_Rutgers {
      margin-top: 2em;
   }

   .sNavDiv .btn + .btn {
      margin-top: 1em;
   }

   #menu {
      max-width: 48px;
      right: 0;
      position: fixed;
   }


}






@media (max-width: 552px) {
   Xbody {
      font-size: 14px;
   }

   .content-container {
      margin-left: 10px;
      margin-right: 10px;
   }

   X.nav-utility,
   X.footer {
      padding-left: 10px;
      padding-right: 10px;
   }

   X.footer {
      margin-left: 0;
      margin-right: 0;
   }


   .application {
      padding-left: 0;
      padding-right: 0;
   }

   .col {
      float: none;
      margin-right: 0;
   }

   .btn {
      display: block;
   }

   .header__home-link {
      top: 24px;
      width: 48px;
   }
   
   .header__site-logo_Rutgers{
      display: none;
   }

   .header__site-logo_R {
      max-width: 40px;
      height: 36px;
      position: absolute;
      top: 0;
      display: block; /* needed to override display: none */
   }

   X.header__site-name {
      font-size: 16px;
      line-height: 1;
      white-space: normal;
      padding-left: 8px;
      margin-left: 8px;
      top: 28px;
   }

   .header__site-name {
      font-weight: 400;
      font-size: 18px;
      line-height: 1;
      white-space: normal;
      padding-left: 8px;
      margin-left: 4px;
      top: 0;
   }

}

/* ----------------------------------------------- MODAL ----------------------------------------------------------- */
.modal-container {
   margin: 60px auto;
   padding-top: 0;
   position: relative;
   width: 160px;
}
.modal-container .modal-btn {
   display: block;
   margin: 0 auto;
   color: #fff;
   width: 160px;
   height: 50px;
   line-height: 50px;
   background: #446cb3;
   font-size: 22px;
   border: 0;
   border-radius: 3px;
   cursor: pointer;
   text-align: center;
   box-shadow: 0 5px 5px -5px #333;
   transition: background 0.3s ease-in;
}
.modal-container .modal-btn:hover {
   background: #365690;
}
.modal-container .modal-content,
.modal-container .modal-backdrop {
   height: 0;
   width: 0;
   opacity: 0;
   visibility: hidden;
   overflow: hidden;
   cursor: pointer;
   transition: opacity 0.2s ease-in;
}
.modal-title {
   position: absolute;
   top: 12px;
   margin: 0;
}
.modal-container .modal-close {
   color: #aaa;
   position: absolute;
   right: 5px;
   top: 5px;
   padding-top: 3px;
   background: #fff;
   font-size: 16px;
   width: 25px;
   height: 25px;
   font-weight: bold;
   text-align: center;
   cursor: pointer;
}
.modal-container .modal-close:hover {
   color: #333;
}
.modal-container .modal-content-btn {
   xposition: absolute;

   text-align: center;
   cursor: pointer;
   bottom: 12px; /*20px;*/
   xright: 30px;
   background: #446cb3;
   color: #fff;
   width: 50px;
   border-radius: 2px;
   font-size: 14px;
   height: 32px;
   xpadding-top: 9px;
   font-weight: normal;
   display: inline-block; /* BG */
   line-height: 32px; /* BG */
   margin-top: 1em; /* BG */
}
.modal-container .modal-content-btn:hover {
   color: #fff;
   background: #365690;
}
#modal-content {
   overflow-y: auto;
   height: 100%;
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   padding-top: 1em;
}

.modal-container #modal-toggle {
   display: none;
}
.modal-container #modal-toggle.active ~ .modal-backdrop,
.modal-container #modal-toggle:checked ~ .modal-backdrop {
   background-color: rgba(0, 0, 0, 0.6);
   xwidth: 100vw;
   xheight: 100vh;
   width: 100%; /* BG */
   height: 100%; /* BG */
   position: fixed;
   left: 0;
   top: 0;
   z-index: 9;
   visibility: visible;
   opacity: 1;
   transition: opacity 0.2s ease-in;
}

.modal-container #modal-toggle.active ~ .modal-content,
.modal-container #modal-toggle:checked ~ .modal-content {
   opacity: 1;
   background-color: #fff;
   xmax-width: 400px;
   xwidth: 400px;
   xheight: 280px;
   padding: 40px 10px 64px 20px; /*10px 30px;*/
   position: fixed;
   left: 0; /*calc(50% - 200px);*/
   top: 0; /*12%;*/
   border-radius: 4px;
   z-index: 10; /*999;*/
   pointer-events: auto;
   cursor: auto;
   visibility: visible;
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);
   /* BG centering */
   width: 80%; /* BG */
   height: 80%; /* BG */
   margin: auto; /* BG */
   right: 0; /* BG */
   bottom: 0; /* BG */
}

/*@media (max-width: 400px) {
   .modal-container #modal-toggle.active ~ .modal-content,
   .modal-container #modal-toggle:checked ~ .modal-content {
      left: 0;
   }
}
*/


X.nav-utility {
   top: 30px;
   z-index: 2;
}

X.nav-utility > li,
X.nav-utility a {
   font-size: 13px;
}

.nav-utility ul {
   top: 100%;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}


.icon {
   width: 1.3em;
   height: 1.3em;
   overflow: hidden;
   background: #007fac;
   border-radius: 50%;
   display: inline-block;
   line-height: 1.3;
   color: #fff;
   border: 1px solid #fff;
   box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.5);
}

/* SHAME -------------------------------------------------------- */
X.image {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background-image: url();
   background-repeat: no-repeat;
   background-size: cover;

}
X.cols--equal__main { height: 640px;}



.cta-box {
   background: rgba(255,255,255,.8);
   border: 5px double #fff;
   padding: 24px;
}

.cols--equal {
   background: url(images/rutgers-graduation-min.jpg) no-repeat;
   background-size: cover;
   background-attachment: fixed;
   background-position: right center;

   margin: 0;
   padding: 24px;
}

X.image {
   max-width: 100%;
   width: auto;
}


.noscript__container {margin: 24px;}



/* section */
   .grid {
      clear: both;
      Xpadding-left: 24px;
      Xpadding-right: 24px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
   }

   .grid__row {
      Xbackground-color: #fff;
   }

   .grid__row-card:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      Xmargin: 0 24px;
      background-color: rgba(0, 0, 0, .65);
   }

   .grid__row-card {
      -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
      -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
      box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
      background-image: url(../images/rutgers-graduation-min.jpg);
      background-size: cover;
      background-position: center;
   }

   .img-responsive {
      display: none;
   }

   .grid__col {
      overflow: hidden;
      position: relative;
   }

   .grid__col-aside {
      display: none;
   }

   .grid__col-main {
      color: #fff;
      text-shadow: 1px 1px 1px #000;
   }

   .grid__col-main > h2 {
      font-size: 3em;
      font-weight: 400;
   }

   .grid__col-main > p {
      font-size:  1.3125em;
      font-weight: 400;
   }


@media (min-width: 768px)
{

   .grid {
      padding-left: 24px;
      padding-right: 24px;
   }


   .grid__row-card {
      background-image: none;
   }

   .grid__row-card:before {
      content: none;
      background: none;
   }

   .grid__col-aside {
      display: block;
   }

   .img-responsive {
      display: inline-block;
   }

   .grid__col-main {
      color: #000;
      text-shadow: none;
   }


   .btn-toggle__label.visually-hidden-no-size {
      clip: auto;
      overflow: visible;
      position: static;
      opacity: 1;
   }


}



@media (min-width: 992px)
{

   .grid__row {
      width: 100%;
      display: table;
      table-layout: fixed;
      border-collapse: collapse;
   }

   .grid__col {
      display: table-cell;
      vertical-align: top;
   }

   .grid__col:before,
   .grid__col:after {
      content: "";
      clear: both;
      display: block;
   }

   .grid__col-aside {
      background-image: url(../images/rutgers-graduation-min.jpg);
      background-position: center;
      background-size: cover;
      background-origin: padding-box;
      background-repeat: no-repeat;
   }

   .img-responsive {
      display: none;
   }

}



   .cols--equal {
      margin: 24px 0;
   }

   .cols--equal__container {
      width: 100%;
      display: table;
      table-layout: fixed;
      border-collapse: collapse;
   }

   .cols--equal__container > div {
      display: table-cell;
      vertical-align: top;
      position: relative;
   }

   .cols--equal__container > div:first-child {
      Xborder-right: 1px dashed #ddd;
   }

   .cols--equal__container > div:last-child {
      Xborder-left: 1px dashed #ddd;
   }

   .cols--equal .section-heading {
      margin-top: 0;
   }


.img-responsive {
   max-width: 100%;
   height: auto;
}

.pad-24 {
   padding: 24px;
}

.pad-lr-24 {
   padding-left: 24px;
   padding-right: 24px;
}

.pad-tb-24 {
   padding-top: 24px;
   padding-bottom: 24px;
}


.visually-hidden-no-size,
.tooltip-content {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;
   opacity: 0;
}

.visually-hidden-has-size {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   width: 1px;
   opacity: 0;
}

.showvisuallyhidden,
.btn-tooltip:focus .tooltip-content,
.btn-tooltip:hover .tooltip-content {
   clip: auto;
   overflow: visible;
}