/* ---------------------------------------------------- RESET */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
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%;
   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 sans-serif;
   background-color: #eee;
   color: #000;
}

/* TODO : Remove or replace - nicer radio button focus? */
X*:focus {
   outline: none;
}

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

body {
   position: relative;
}

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

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

h4 {
   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: 8px;
}

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

table {
   border-collapse: collapse;
   border-spacing: 0;
}

p {
   margin: 0 0 1em;
}

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

br {
   clear: both;
}

img {
   vertical-align: middle;
}

strong {
   font-weight: bold;
}


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

/* header */

   .banner {
      background-image: url(../images/banner__bg--arrow.png);
      background-repeat: repeat-x;
      background-position: bottom center; /* top center */
      background-color: #c03;
      min-height: 106px; /*270px;*/
      Xtext-align: center;
      Xtext-indent: 0;
      position: relative;
      Xfont-size: 70px;
      Xfont-weight: 500;
      color: #fff;
      Xline-height: 270px;
      Xfont-family: sans-serif;
      Xbox-sizing: border-box;
   }

   .header {
      Xbackground-color: rgba(0, 0, 0, 0.3);
      Xbackground: none;
      Xtext-align: center;
      Xtext-indent: 0; /* ??? */
      font-size: 70px;
      Xfont-weight: 600;
      Xcolor: #fff;
      Xbox-sizing: border-box;
      Xposition: absolute;
      Xtop: 0;
      Xleft: 0;
      Xpadding-top: 60px;
      Xwidth: 100%;
      Xheight: 100%;
      text-indent: -10000px;
   }

   .header::before {
      content: "";
      background-image: url(../images/rutgers-admissions-logo.png);
      background-repeat: no-repeat;
      height: 59px;
      width: 323px;
      position: absolute;
      left: 20px;
      top: 12px;
   }

   .header__SiteTitle {}



/* ---------------------------------------------------- BREADCRUMB */
.breadcrumb {
   Xpadding: 1em 24px;
   font-weight: 400;
   font-size: 0.75em;
   Xline-height: 1.5;

   background-color: #000;
   color: #fff;
   position: relative;
   padding: 0.75em 1em 1.25em;
   margin: 0 0 1em;
   Xbox-shadow: inset 0 -4px 4px -2px rgba(0, 0, 0, 0.2);
   Xborder-bottom: 1px solid #fff;
   Xfont-weight: normal;
}

.breadcrumb * {
   vertical-align: middle;
}

.breadcrumb > a {
   color: rgba(255, 255, 255, 0.5);
   text-decoration: none;
}

.breadcrumb > a:hover,
.breadcrumb > a:focus {
   color: #fff;
   text-decoration: underline;
}



/* ---------------------------------------------------- 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 */
   .nav-utility {
      position: absolute;
      top: 24px;
      right: 24px;
      display: table;
   }

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

   .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;
   }



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

/* main content area */

   .content-container {
      clear: left;
      margin: 0 24px;
      padding: 0 24px;
      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: 0 -24px;
   }

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

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

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

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

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



/* ---------------------------------------------------- FOOTER */

   .footer {
      position: relative;
      color: #777;
      margin: 2em 24px;
      font-size: 11px;
      line-height: 2;
   }

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

   .logo {
      position: absolute;
      right: 0;
      top: 0;
      line-height: 5em; /* centers vertically with text if 2 or 3 lines */
   }









   /* question */
   .question {
      padding: 0;
      margin-bottom: 25px;
      *zoom: 1;
   }

   .q_desc,
   .fLabel {
      display: block;
      font-weight: bold;
      color: #333;
      margin-top: 1.5em;
      xmargin-bottom: 0.25em;
   }
   x.fLabel > label,
   xlabel.fLabel {
      line-height: 1;
   }

   .q_inputs .q_desc {
      margin-bottom: 0;
      padding: 0;
      font-weight: 400;
   }

   .q_inputs .row div {
      float: left;
   }

   label.top b {
      font-weight: 400;
      color: #666;
      font-size: 10px;
   }

   .q_inputs {
      clear: left;
      padding-top: 5px;
   }

   .q_inputs .help {
      margin: 0;
   }

   .q_inputs .help_box_top,
   .q_inputs .row .exit_button {
      float: none !important;
   }

   /* labels */
   label {
      cursor: pointer;
      color: #333;
      xline-height: 2;
   }

   label.bottom {
      xmargin-right: 21px;
      margin-bottom: 1em;
      float: left;
      font-size: 12px;
      xline-height: 1.6;
      font-weight: 400;
   }

   td label.bottom {
      margin: 5px;
   }

   label.top {
      font-weight: 900;
      color: #000;
   }

   li label {
      margin-right: 20px;
      line-height: 1.4;
      font-size: 12px;
   }

   .q_desc label {
      color: #333;
   } /* 000 */

   .q_inputs .q_desc label {
      color: #666;
   }

   .inline-radio li {
      *float: left;
   }

   .inline-radio label {
      float: left;
   }

   table.tests td label.bottom {
      float: none;
      margin: 0;
   }

   table.tests td label {
      font-size: 10px;
   }

   /* microcopy */
   .microcopy {
      clear: left;
      display: inline-block;
      color: #777;
      font-size: 0.75em;
      font-weight: 400;
   }

   /* messages */
   /* errors */
   .q_errors {
      color: #c03;
      font-size: 11px;
      font-weight: 900;
      padding: 4px 10px;
      background-color: #ffefef;
      float: left;
      margin: 3px 0 10px;
      clear: both;
   }

   .q_errors b {
      float: left;
      border: 8px solid #ffefef;
      border-left-color: #c03;
   }

   .dialogbox .q_errors {
      padding-left: 25px;
      float: none;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
   }

   .dialogbox .bad {
      position: absolute;
      margin: -2px 0 0 -20px;
   }

   .dialogbox .msg {
      width: 100%;
      overflow: hidden;
   }

   .msg {
      clear: both;
      margin: 0 0 2em; /* 1em 0 */
      padding: 1em;
      overflow: visible;
      word-wrap: break-word;
      text-overflow: ellipsis;
      border-left: 13px solid #ccc;
      background-color: rgba(0, 0, 0, 0.05);
      font-weight: 400;
      vertical-align: middle;
   }

   .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 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: 0.5em 0 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: 0.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: 0.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;
   }


 
 /* ---------------------------------------------------- FORM ELEMENTS */
   .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;
   }

   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;
   }



/* ---------------------------------------------------- T A B L E S */

/* table {border-collapse:collapse; border-spacing:0;} in reset.css */

   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;*/
      font-family: sans-serif;
      color: #fff;
      text-decoration: none;
      background-color: #aaa;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25),
         0 1px 3px rgba(0, 0, 0, 0.25);
      -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25),
         0 1px 3px rgba(0, 0, 0, 0.25);
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25),
         0 1px 3px rgba(0, 0, 0, 0.25);
      /* text-shadow: 0 -1px 1px rgba(0,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;
   }

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

   .btn:active {
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      box-shadow: none;
      top: 1px;
      color: rgba(255, 255, 255, 0.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: 10px 1em;
      font-size: 100%;
   }





/* create login info box */
   .info {
      background: #ffe;
      font-size: 11px;
      margin-bottom: 2em;
      border: 1px solid #eee;
      padding: 1em;
      float: right;
      margin-left: 35px;
      width: 40%;
   }

   .info h2 {
      margin: 1.5em 0 0.75em;
   }

   .info h2.first {
      margin: 0 0 0.75em;
   }

   .info ul {
      margin: 1em 0 1em 1.5em;
   }

   .info ul li {
      list-style-type: disc;
   }

   .info p {
      margin: 1em 0;
   }

   .login div.q_desc .help {
      display: inline-block;
      float: none;
      margin: 0;
      padding: 0;
      vertical-align: bottom;
   }



/* ---------------------------------------------------- C U S T O M I Z A T I O N */ 

/**
 * D I A L O G   B O X   (pop-up wizard)
 * ------------------------------------ */
   /* structure -

   structural overrides (below): .nihilo .dijitDialog, .nihilo .dijitDialogTitleBar, .nihilo .dijitDialog .dijitDialogPaneContent

   form.dialogbox
      div.collegeChooser (pg1)
         div.btn.previous
      div (pg2)
         div.magnify
            ul.alpha
         div.collegeCeeb
            table.college
         div.btn
         div.btn.primary

   ------------------------------------ */

   .dialogbox {
      min-height: 31em;
      position: relative;
      padding-bottom: 2.5em;
   }

   p.aoi-choice {
      position: absolute;
      bottom: 0;
      right: 0;
   }

   .interests h3,
   .schools h3 {
      margin-left: 10px;
   }

   .interests label,
   .schools label {
      padding: 3px 10px 3px 5px;
      margin: 0;
      border-radius: 3px;
   }

   .interests label input,
   .schools label input {
      top: 1px;
   }

   .interests label:hover,
   .schools label:hover {
      background: #000;
   }

   .interests label:hover span,
   .schools label:hover span {
      color: #fff !important;
   }

   /* nav buttons */

   .dialogbox .btn {
      float: left;
      clear: left;
      margin: 1em 0 0.5em;
   }

   /* fixed a chrome bug in aoi dialog, but that caused the save and continue button to move next to go back and save and logout buttons instead of being on the right */

   .dialogbox .primary {
      float: none;
      display: inline-block;
      clear: none;
      background: #c03;
      margin-left: 1em;
   }

   /* scrollable table of colleges - form.dialogbox table.collegeCeeb */

   .dialogbox .collegeCeeb {
      width: 100% !important;
      float: left;
      clear: left;
      margin-bottom: 0.5em;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
   }

   #otherElpProgram-field {
      display: inline;
   }


/* ---------------------------------------------------- HELPER CLASSES */
/* decorative */
   .important {
      font-weight: 700;
      color: #c03;
   }

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

   .small {
      width: 143px;
   }

   .medium {
      width: 323px;
   }

   .long {
      width: 487px;
   }

   .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;
   }

/* decoration */
   .noborder {
      border: 0 !important;
   }

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

   .nowrap {
      white-space: nowrap;
   }

/* typography */
   .b {
      font-weight: bold;
   }

/* visibility */
   .hide {
      display: none;
      visibility: hidden;
      height: 0;
      width: 0;
      overflow: hidden;
   }



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

   .cf:after {
      clear: both;
   }

/* TODO : Remove - legacy code for unsupported browsers */
   .cf {
      zoom: 1; /* IE6,7 hasLayout trigger */
   }



/* ---------------------------------------------------- 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;
   }




/* ---------------------------------------------------- TABLE FORMATTING */
table {
   width: 100%;
   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;
}




/* ---------------------------------------------------- LAYOUT STYLES */
.pNavDiv {
   background-color: #006;
   color: #fff;
   text-align: center;
   margin: 0;
   padding: 2px 0;
}

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;
}

.fField {
   display: block;
}

textarea {
   width: 100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.inputTxt {
   vertical-align: middle;
   padding: 3px;
}

.inputTxtCounter {
   width: auto;
   border: 1px solid #ccc;
   border-radius: 4px;
   text-align: center;
   color: #c03;
   background-color: #fff;
   font-weight: 700;
   font-family: monspace, monospace;
   font-size: 1.2em;
}

.inputTxtCounterLarge {
   width: auto;
}

/* ---------------------------------------------------- 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;
}


.orange {
   color: #c60;
}

/* ---------------------------------------------------- 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-right: 1em;
   clear: none;
}

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

.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;
}

.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 .fLabel,
.gpa-review .fField {
   font-weight: 400;
   color: #333;
   display: inline;
}
.gpa-review .fField {
   font-weight: 700;
   color: #000;
   font-size: 18px;
   font-family: monospace, monospace;
   xpadding: 0.5em;
   xbackground-color: #eee;
   xborder-radius: 4px;
}
.gpa-review .row {
   padding-top: 0.25em;
   padding-bottom: 0.25em;
}
.gpa-review .collapsible-content {
   padding-top: 1em;
   padding-bottom: 1em;
   margin: 0 0 1em 5px !important;
}
.gpa-review p.fField {
   display: block;
   padding-left: 0;
   padding-right: 0;
}
.gpa-review p.fField:last-child {
   margin: 0;
   padding-bottom: 0;
}
.gpa-review p.fField:before {
   content: "-> ";
   xposition: absolute;
   xtext-indent: -0.75em;
   xline-height: 0.5em;
   xfont-size: 2em;
   color: #999;
}

.question {
   margin-bottom: 10px;
}

.q_inputs {
   padding-top: 1px;
}

fieldset .row {
   margin-bottom: 0;
}

table {
   margin-top: 15px;
   border-left: 0;
}

fieldset {
   margin-bottom: 2em;
}

.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;
}

.application {
   font-family: sans-serif;
   font-size: 14px;
   border-bottom: 1px solid #ddd;
   padding: 16px 0;
   overflow: hidden;
   color: #555;
}

.application:last-child {
   border-bottom: 0;
}

.application__data {
   float: left;
   min-width: 50%;
   max-width: 100%;
   width: 400px;
   line-height: 23px;
   margin: 0 24px 10px 0;
}

.application__program {
   color: #000;
   font-size: 1.2em;
}

.application__school {
   display: block;
}

.application__actions {
   min-width: 150px; /* takes over when > 300px */
   max-width: 100%; /* takes over when < 150px */
   overflow: hidden;
}

.application__actions > .btn {
   margin-bottom: 5px;
}



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

   .nav-utility > li {
      display: inline-block;
      font-size: 12px;
   }
}

@media (max-width: 768px) {
   .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;
   }

   .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 > p {
      margin: 0;
   }
   .sNavDiv .btn + .btn {
      margin-top: 1em;
   }
}

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

   .application__data {
      margin: 0 0 10px 0;
      width: 100%;
   }

   .application__program {
      font-size: 1em;
   }

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

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

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

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

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

   .date-range > .col {
      float: left;
      margin-right: 1em;
   }

   .sNavDiv .btn {
      margin-right: 0;
   }

   #recruitSourceCode,
   #degreeCodeEarned,
   #gradInterestCode,
   #countryCode,
   #countyCode,
   #stateCode,
   #mStateCode,
   #mCountryCode,
   #mCountyCode,
   .medium,
   .long,
   .btn-large {
      width: 100%;
      min-width: 100%;
      margin-left: 0 !important;
      box-sizing: border-box !important;
   }
}

/* ---------------------------------------------------- MODAL */
x.modal-container {
   margin: 60px auto;
   padding-top: 0;
   position: relative;
   width: 160px;
}
x.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;
}
x.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;
   }
}
*/



.header::after {
   content: "";
   height: 100%;
   width: 100%;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
}

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

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

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








/* ---------------------------------------------------- SHAME -------------------------------------------------------- */
.image {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background-image: url(http://dev-rcm.rutgers.edu:8080/resources/rutgers2.jpg);
   background-repeat: no-repeat;
   background-size: cover;

}

.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);
}