Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <p>Live code: <a href="https://www.uottawa.ca/financial-aid-awards/scholarships-and-bursaries">uottawa.ca/financial-aid-awards/scholarships-and-bursaries</a></p>
<!-- Codepen container -->
<div style="width:80%; max-width:300px; border-style:solid; border-width:thin; padding: 10px;">
  <!-- -->
  <div class="restrained">
<div class="greentitle">Admission scholarship</div>
<div class="subtextexplain">based on your pre-university grades</div>
<div class="tableintro grey"><strong>$1,000 to $4,000 for your first year at university</strong></div>
<table>
  <tbody>
    <tr>
      <th style="width:50%">Admission average</th>
      <th>Scholarship</th>
    </tr>
    <tr>
      <td>95% to 100%</td>
      <td>$4,000</td>
    </tr>
    <tr>
      <td>90% to 94.9%</td>
      <td>$3,000</td>
    </tr>
    <tr>
      <td> 85% to 89.9%</td>
      <td>$2,000</td>
    </tr>
    <tr>
      <td>80% to 84.9%</td>
      <td>$1,000 </td>
    </tr>
  </tbody>
</table>
<div class="circle" title="in addition to">
  <div class="bar horizontal"></div>
  <div class="bar vertical"></div>
</div>
<div class="greentitle">Merit scholarship</div>
<div class="subtextexplain">based on your university grades</div>
<div class="tableintro grey"><strong>$1,000 for each full-time term</strong></div>
<div class="tableintro white"><strong>82.5% minimum average</strong></div>
<div class="circle" title="equals">
  <div class="bar equaltop"></div>
  <div class="bar equalbottom"></div>
</div>
<div class="greentitle">Up to $10,000 during your studies</div>
</div>
<br/>
<p>With the University of Ottawa’s automatic scholarship program, if you’ve had very good grades in high school, you start off with an Admission Scholarship for your first year of university. After that, you receive a $1,000 Merit Scholarship for each term that you study full time at the University and meet the required average.</p>
<p>What if your grades in high school could have been better, but you finally find what motivates you to push harder in university? If you have the required average* starting in your second term of first year, you automatically receive a Merit Scholarship. And if things don’t go so well one term? No worries — you start with a clean slate each term so you have a better chance of getting a scholarship for the following term.</p>
<p>Note: 82.5% is equivalent to 8.50 according to the University of Ottawa’s official grading system. </p>
</div>
            
          
!
            
              .greentitle {
	color: #28884F;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
}
.subtextexplain {
	color: #37302B;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
}
.tableintro {
	width: auto;
	padding: 10px;
	text-align:center;
	
}

.restrained {
	display: block;
	max-width: 350px;
	margin: auto;
}

.grey {
	background-color: #2E2A27;
	color: #FDF7EF;
	margin-top: 10px;
}
.white {
	background-color: #fff;
	color: #000;
	border: 1px solid black;
}
.circle {
	border-radius: 50%;
	width: 22px;
	height: 22px;
	background-color: #C28519;
	position: relative;
	margin: auto;
	margin-bottom: 16px;
	margin-top: 16px;
}
.bar {
	margin: 0 auto;
	position: absolute;
	background-color: #fff;
}
.horizontal {
	width: 70%;
	height: 20%;
	left: 15%;
	top: 40%;
}
.vertical {
	width: 20%;
	height: 70%;
	left: 40%;
	top: 15%;
}
.equaltop {
	width: 60%;
	height: 15%;
	left: 20%;
	top: 25%;
}
.equalbottom {
	width: 60%;
	height: 15%;
	left: 20%;
	top: 60%;
}

/* uOttawa styles */
/*  Corporate
    Primary Colour: Garnet
*/
/*  Common CSS for colour schemes
*/
.uos--colour-profile--background--after:after {
  background-color: #8f001a;
}
#uottawa-global-footer-swoosh-right,
#uottawa-global-footer-swoosh-right-bg {
  background-color: #8f001a;
}
.uottawa-assets-endline:after {
  background: #8f001a;
}
h2,
.section-title,
.uottawa-assets-title-abs-top h3,
.uottawa-assets-title-abs-bot h3,
.uos--view-mode-title-position--top .uoe--view-mode--has-image .uoe--view-mode-wrapper .uoe--view-mode-title,
.uos--view-mode-title-position--bottom .uoe--view-mode--has-image .uoe--view-mode-wrapper .uoe--view-mode-title {
  border-left: 4px solid #8f001a;
}
/*
 * This file provides an explosion of colour to the meganav whenever the
 * uos--rainbow-meganav class is applied (see rainbow.js for more details).
 */
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(1) {
  background-color: #ff8000;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(1):hover {
  background-color: #333333;
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(1).uojs--hover > a.uoe--menu-link {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(1) > a.uoe--menu-link {
  color: #000000;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(1) > a.uoe--menu-link:hover {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(1) .uoe--meganav-title {
  background-color: #ff8000;
  color: #000000;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(1) .uoe--meganav-subtitle {
  color: #000000;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(2) {
  background-color: #ffff00;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(2):hover {
  background-color: #333333;
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(2).uojs--hover > a.uoe--menu-link {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(2) > a.uoe--menu-link {
  color: #000000;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(2) > a.uoe--menu-link:hover {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(2) .uoe--meganav-title {
  background-color: #ffff00;
  color: #000000;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(2) .uoe--meganav-subtitle {
  color: #000000;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(3) {
  background-color: #008000;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(3):hover {
  background-color: #333333;
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(3).uojs--hover > a.uoe--menu-link {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(3) > a.uoe--menu-link {
  color: #ffffff;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(3) > a.uoe--menu-link:hover {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(3) .uoe--meganav-title {
  background-color: #008000;
  color: #ffffff;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(3) .uoe--meganav-subtitle {
  color: #ffffff;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(4) {
  background-color: #0000ff;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(4):hover {
  background-color: #333333;
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(4).uojs--hover > a.uoe--menu-link {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(4) > a.uoe--menu-link {
  color: #ffffff;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(4) > a.uoe--menu-link:hover {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(4) .uoe--meganav-title {
  background-color: #0000ff;
  color: #ffffff;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(4) .uoe--meganav-subtitle {
  color: #ffffff;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(5) {
  background-color: #480082;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(5):hover {
  background-color: #333333;
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(5).uojs--hover > a.uoe--menu-link {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(5) > a.uoe--menu-link {
  color: #ffffff;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(5) > a.uoe--menu-link:hover {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(5) .uoe--meganav-title {
  background-color: #480082;
  color: #ffffff;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(5) .uoe--meganav-subtitle {
  color: #ffffff;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(6) {
  background-color: #a000c0;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(6):hover {
  background-color: #333333;
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(6).uojs--hover > a.uoe--menu-link {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(6) > a.uoe--menu-link {
  color: #ffffff;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(6) > a.uoe--menu-link:hover {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(6) .uoe--meganav-title {
  background-color: #a000c0;
  color: #ffffff;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(6) .uoe--meganav-subtitle {
  color: #ffffff;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(7) {
  background-color: #ff69b4;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(7):hover {
  background-color: #333333;
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(7).uojs--hover > a.uoe--menu-link {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(7) > a.uoe--menu-link {
  color: #000000;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(7) > a.uoe--menu-link:hover {
  color: #FFFFFF;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(7) .uoe--meganav-title {
  background-color: #ff69b4;
  color: #000000;
}
.uos--rainbow-meganav #global-navigation ul.uos--navigation--global > li:nth-of-type(7) .uoe--meganav-subtitle {
  color: #000000;
}
.uoe--overlay {
  position: absolute;
  bottom: 10px;
  left: -6px;
  background-color: rgba(47, 47, 47, 0.75);
  color: #FFF;
  width: 90%;
  padding: 12px;
}
.uoe--overlay h1,
.uoe--overlay h2,
.uoe--overlay h3,
.uoe--overlay h4,
.uoe--overlay h5,
.uoe--overlay h6 {
  color: #FFF;
}
.uoe--overlay a,
.uoe--overlay a:hover,
.uoe--overlay a:visited,
.uoe--overlay a:active {
  color: #FFF;
}
.uoe--overlay a:hover {
  text-decoration: underline;
}
.uos--overlay--left-half.uoe--overlay,
.uos--overlay--left-half .uoe--overlay {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 50%;
  width: 50%;
}
.uos--overlay--left-half.uoe--overlay .uoe--button,
.uos--overlay--left-half .uoe--overlay .uoe--button {
  position: absolute;
  bottom: 12px;
  left: 12px;
}
.uoe--header--overlay a,
.uoe--header--overlay a:hover,
.uoe--header--overlay a:visited,
.uoe--header--overlay a:active {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.uoe--header--piped {
  border-left: 4px solid #8F001A;
}
.uoe--button {
  display: inline-block;
  background: #2F2F2F;
  color: #FFF;
  padding: 0.75em 1.75em;
  width: auto;
  border: 2px solid #2F2F2F;
}
.uoe--title-icon {
  width: 40px;
  display: inline-block;
  vertical-align: middle;
}
.uoe--hero-image {
  position: relative;
}
.uoe--hero-image .uoe--overlay {
  position: initial;
  bottom: auto;
  left: auto;
  width: 100%;
  padding: 1rem 1rem 1rem 1.5rem;
}
.uoe--hero-image .uoe--hero-overlay {
  display: none;
  position: absolute;
  top: 50%;
  left: 25px;
  bottom: auto;
  height: auto;
  width: 50%;
  transform: translateY(-50%);
}
.uoe--hero-image .uoe--hero-overlay .uoe--hero-overlay-tag-line {
  font-size: 28px;
  padding: 0;
  font-weight: normal;
}
.uoe--hero-image .uoe--hero-overlay .uoe--hero-overlay-tag-summary {
  font-size: 13px;
  padding: 0;
  padding-top: 12px;
}
.uoe--hero-image .field-name-uottawa-banner-image ~ .uoe--hero-overlay {
  display: block;
}
.uos--overlay--impactful .uoe--hero-image .uoe--hero-overlay.uos--standard-width--always {
  position: absolute;
  left: 50%;
  margin-left: -490px;
  width: 640px;
}
.uos--overlay--impactful .uoe--hero-image .uoe--hero-overlay .uoe--overlay {
  width: 67%;
}
.uos--overlay--impactful .uoe--hero-image .uoe--hero-overlay .uoe--hero-overlay-tag-line {
  font-size: 36px;
}
.uos--overlay--impactful .uoe--hero-image .uoe--hero-overlay .uoe--hero-overlay-tag-summary {
  font-size: 24px;
}
@media (min-width: 736px) and (max-width: 995px) {
  .uos--overlay--impactful .uoe--hero-image .uoe--hero-overlay.uos--standard-width--always {
    margin-left: -367px;
  }
  .uos--overlay--impactful .uoe--hero-image .uoe--hero-overlay.uos--standard-width--always .uoe--overlay {
    width: 100%;
  }
  .uos--overlay--impactful .uoe--hero-image .uoe--hero-overlay .uoe--hero-overlay-tag-line {
    font-size: 28px;
  }
  .uos--overlay--impactful .uoe--hero-image .uoe--hero-overlay .uoe--hero-overlay-tag-summary {
    font-size: 18px;
  }
  .uos--overlay--left-half .uol--list--two-column .uoe--entity--read-more-overlay,
  .uos--overlay--impactful .uol--list--two-column .uoe--entity--read-more-overlay,
  .uol--width--500 .uos--overlay--left-half .uoe--entity--read-more-overlay,
  .uol--width--500 .uos--overlay--impactful .uoe--entity--read-more-overlay {
    background-color: #555;
  }
  .uos--overlay--left-half .uol--list--two-column .uoe--entity--read-more-overlay .uos--color-scheme-brightness--light--overlay,
  .uos--overlay--impactful .uol--list--two-column .uoe--entity--read-more-overlay .uos--color-scheme-brightness--light--overlay,
  .uol--width--500 .uos--overlay--left-half .uoe--entity--read-more-overlay .uos--color-scheme-brightness--light--overlay,
  .uol--width--500 .uos--overlay--impactful .uoe--entity--read-more-overlay .uos--color-scheme-brightness--light--overlay {
    background-color: initial;
  }
  .uos--overlay--left-half .uol--list--two-column .uoe--overlay,
  .uos--overlay--impactful .uol--list--two-column .uoe--overlay,
  .uol--width--500 .uos--overlay--left-half .uoe--overlay,
  .uol--width--500 .uos--overlay--impactful .uoe--overlay {
    position: relative;
    width: 100%;
    bottom: auto;
    left: auto;
    right: auto;
  }
  .uos--overlay--left-half .uol--list--two-column .uoe--overlay .uoe--button,
  .uos--overlay--impactful .uol--list--two-column .uoe--overlay .uoe--button,
  .uol--width--500 .uos--overlay--left-half .uoe--overlay .uoe--button,
  .uol--width--500 .uos--overlay--impactful .uoe--overlay .uoe--button {
    position: relative;
    margin-top: 1em;
  }
  .uos--overlay--left-half .uol--list--two-column .field-name-uottawa-primary-image,
  .uos--overlay--impactful .uol--list--two-column .field-name-uottawa-primary-image,
  .uol--width--500 .uos--overlay--left-half .field-name-uottawa-primary-image,
  .uol--width--500 .uos--overlay--impactful .field-name-uottawa-primary-image {
    height: 100%;
  }
  .uos--overlay--left-half .uol--list--two-column .uoe--entity--read-more-overlay.uoe--entity--has-image,
  .uos--overlay--impactful .uol--list--two-column .uoe--entity--read-more-overlay.uoe--entity--has-image,
  .uol--width--500 .uos--overlay--left-half .uoe--entity--read-more-overlay.uoe--entity--has-image,
  .uol--width--500 .uos--overlay--impactful .uoe--entity--read-more-overlay.uoe--entity--has-image {
    display: -webkit-flex;
    -webkit-flex-direction: column-reverse;
    display: flex;
    flex-direction: column-reverse;
  }
}
@media (min-width: 0px) and (max-width: 735px) {
  .uos--overlay--impactful .uoe--hero-image .uoe--hero-overlay.uos--standard-width--always,
  .uoe--content-snippet--hero-snippet .uoe--hero-overlay.uos--standard-width--always {
    position: relative;
    transform: none;
    margin: 0;
    left: 0;
    width: 100%;
  }
  .uos--overlay--impactful .uoe--hero-image .uoe--hero-overlay.uos--standard-width--always .uoe--overlay,
  .uoe--content-snippet--hero-snippet .uoe--hero-overlay.uos--standard-width--always .uoe--overlay {
    width: 100%;
    margin: 0;
  }
  .uos--overlay--impactful .uoe--hero-image .uoe--hero-overlay .uoe--hero-overlay-tag-line,
  .uoe--content-snippet--hero-snippet .uoe--hero-overlay .uoe--hero-overlay-tag-line {
    font-size: 18px;
  }
  .uos--overlay--impactful .uoe--hero-image .uoe--hero-overlay .uoe--hero-overlay-tag-summary,
  .uoe--content-snippet--hero-snippet .uoe--hero-overlay .uoe--hero-overlay-tag-summary {
    font-size: 14px;
  }
}
@media (min-width: 0) and (max-width: 500px) {
  .uos--overlay--left-half .uoe--entity--read-more-overlay,
  .uos--overlay--impactful .uoe--entity--read-more-overlay {
    background-color: #555;
  }
  .uos--overlay--left-half .uoe--entity--read-more-overlay .uos--color-scheme-brightness--light--overlay,
  .uos--overlay--impactful .uoe--entity--read-more-overlay .uos--color-scheme-brightness--light--overlay {
    background-color: initial;
  }
  .uos--overlay--left-half .uoe--overlay,
  .uos--overlay--impactful .uoe--overlay {
    position: relative;
    width: 100%;
    bottom: auto;
    left: auto;
    right: auto;
  }
  .uos--overlay--left-half .uoe--overlay .uoe--button,
  .uos--overlay--impactful .uoe--overlay .uoe--button {
    position: relative;
    margin-top: 1em;
  }
  .uos--overlay--left-half .field-name-uottawa-primary-image,
  .uos--overlay--impactful .field-name-uottawa-primary-image {
    height: 100%;
  }
  .uos--overlay--left-half .uoe--entity--read-more-overlay.uoe--entity--has-image,
  .uos--overlay--impactful .uoe--entity--read-more-overlay.uoe--entity--has-image {
    display: -webkit-flex;
    -webkit-flex-direction: column-reverse;
    display: flex;
    flex-direction: column-reverse;
  }
}

@import url("https://www.uottawa.ca/financial-aid-awards/modules/system/system.base.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/modules/system/system.messages.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/modules/system/system.theme.css?ph2j50");
</style>
<style>
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/jquery_update/replace/ui/themes/base/minified/jquery.ui.core.min.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/jquery_update/replace/ui/themes/base/minified/jquery.ui.theme.min.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/jquery_update/replace/ui/themes/base/minified/jquery.ui.button.min.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/jquery_update/replace/ui/themes/base/minified/jquery.ui.resizable.min.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/jquery_update/replace/ui/themes/base/minified/jquery.ui.dialog.min.css?ph2j50");
</style>
<style>
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/ldap/ldap_user/ldap_user.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/date/date_api/date.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/date/date_popup/themes/datepicker.1.7.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/fences/field.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/modules/node/node.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/modules/search/search.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/modules/user/user.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/views/css/views.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/ckeditor/css/ckeditor.css?ph2j50");
</style>
<style>
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/ctools/css/ctools.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/ldap/ldap_servers/ldap_servers.admin.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/contrib/panels/css/panels.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen/custom_panels/rows_1/uottawa_g_rtl/uottawa_g_rtl.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/webcms/widgets/uottawa_core_styles/css/ucs_collapsible.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen/custom_panels/rows_1/uottawa_b/uottawa_b.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen/custom_panels/rows_1/uottawa_s/uottawa_s.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/www.uottawa.ca.financial-aid-awards/files/less/view-modes-common.zDntHQO6KvJM-ob-RlQpYBwr_bXU28CmNe5JAmeBJT4.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/custom/user_actions/user_actions.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/modules/custom/server_info/server_info.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/www.uottawa.ca.financial-aid-awards/files/less/corporate.9MnrweIVzDgIQFqnzu6eK_Gkt26xfszzAM-4QVynqjU.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/modules/toolbar/toolbar.css?ph2j50");
</style>
<style>
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen/css/page_structure.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen/css/layout/uz_dirs.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen/css/layout/uz_paddings.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen/css/layout/uz_widths.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen/css/krumo/uz_krumo.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen/polyfill_details/css/uz_polyfill_details.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/legacy/css/uza_legacy.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/base/css/uza_base.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/icons/css/uza_icons.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/typography/css/uza_typography.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/node/css/uza_node.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/forms/css/uza_forms.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/tables/css/uza_tables.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/events/css/uza_events.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/lists/css/uza_lists.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/common/css/uza_common.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/back_top/css/uza_back_top.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/global_header/css/uza_global_header.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/global_navigation/css/uza_global_navigation.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/site_id/css/uza_site_id.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/local_navigation/css/uza_local_navigation.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/contact_footer/css/uza_contact_footer.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/global_footer/css/uza_global_footer.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/inpage_navigation/css/uza_inpage_navigation.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/all/themes/custom/uottawa_zen_assets/corp_home/css/uza_corp_home.css?ph2j50");
@import url("https://www.uottawa.ca/financial-aid-awards/sites/www.uottawa.ca.financial-aid-awards/files/less/rainbow.7PeKcKNalQxohbgA2XAOmXuErarjUCi1-le-wyz6afU.css?ph2j50");

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console