<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<!-- Global Head -->
<div class="main-head">
<div class="main-head__logo"><a href="/"><img src="http://jordanbrewer.com/_images/myPLTW_logo.svg" width="130" alt="myPLTW Logo"></a></div>
<div class="main-head__nav">
<ul>
<li><a href="">My Sites</a></li>
</ul>
</div>
<div class="account">
<div class="account__image"><img src="http://jordanbrewer.com/_images/account.png" alt="" width="38px"></div>
<div class="account__name">trendyminds@pltw.org</div>
<ul class="account__nav list-styled">
<li class="account__item"><a href="">Account</a></li>
<li class="account__item"><a href="">Help</a></li>
<li class="account__item"><a href="">Log Out</a></li>
</ul>
<div class="icon icon--down-arrow"></div>
</div>
<div class="notifications">
<span>
<img src="http://jordanbrewer.com/_images/myPLTW_not.svg" width="24" alt="Notifications"/>
</span>
<ul class="list-styled">
<li>Your request to join <strong>PLTW High School</strong> has been accepted!</li>
<li>Your request to join <strong>PLTW High School</strong> has been accepted!</li>
<li><a href="">See all notifications</a></li>
</ul>
</div>
<div class="right__search">
<input type="text" placeholder="Search for sites and people" />
</div>
</div>
<!-- Portal Navbar -->
<div class="subnav">
<div class="wrapper">
<span class="subnav__title">PLTW Styleguide</span>
<ul class="subnav__group">
<li><a href="#" class="current">Subnav Link</a></li>
<li><a href="#">Subnav Link</a></li>
<li><a href="#">Subnav Link</a></li>
</ul>
<ul class="subnav__group--right">
<li><a href="#">Subnav Link</a></li>
</ul>
</div>
</div>
<div class="wrapper">
<!-- Grid -->
<section>
<div class="section__title">The PLTW Grid</div>
<p class="bit-60">The grid is comprised of 12 columns with a max-width of 1200px. All templates will house its main content in the two-thirds majority (8 columns) sections. This will either live on the left or right side, it is not consistent throughout myPLTW intentionally. Secondary, filters, or contextual information live in the side bar section (4 columns). This will either live on the left or right side, it is not consistent throughout myPLTW intentionally.</p>
<div class="row">
<div class="column bit-1 grid__tile"></div>
</div>
<div class="row">
<div class="column bit-3 grid__tile"></div>
<div class="column bit-3 grid__tile"></div>
<div class="column bit-3 grid__tile"></div>
</div>
<div class="row">
<div class="column bit-4 grid__tile"></div>
<div class="column bit-4 grid__tile"></div>
<div class="column bit-4 grid__tile"></div>
<div class="column bit-4 grid__tile"></div>
</div>
<div class="row">
<div class="column bit-25 grid__tile"></div>
<div class="column bit-75 grid__tile"></div>
</div>
<div class="row">
<div class="column bit-70 grid__tile"></div>
<div class="column bit-25 offset-5 grid__tile"></div>
</div>
</section>
<!-- Buttons -->
<section class="bit-1">
<div class="section__title">Buttons</div>
<p class="bit-60">myPLTW makes use of two types of buttons: a solid button and hollow button. The solid button is reserved for the main action on the page. There should only be one solid button on each page to establish a clear hierarchy on the page. The hollow button is for all other actions on the page.</p>
<button class="btn__primary">Primary CTA</button>
<button class="btn__secondary">Secondary CTA</button>
</section>
<!-- Body Text -->
<section class="bit-70">
<div class="section__title">Body Text</div>
<p>Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.</p>
</section>
<div class="row">
<!-- Text -->
<section class="fonts column bit-2">
<div class="section__title">Font Weights</div>
<div class="fonts__title--light">Proxima Nova Light</div>
<p>Used for page titles exclusively.</p>
<div class="fonts__title--regular">Proxima Nova Regular</div>
<p>Default weight. Used for main content sections.</p>
<div class="fonts__title--medium">Proxima Nova Medium</div>
<p>Used for navigation, tabs and menus.</p>
<div class="fonts__title--semibold">Proxima Nova Semibold</div>
<p>Used for selected items in navigation, tabs and menus.</p>
<div class="fonts__title--bold">Proxima Nova Bold</div>
<p>Used for section headings.</p>
</section>
<!-- Headings -->
<section class="column bit-2">
<div class="section__title">Headings</div>
<h1>Page Titles with optional <strong>bold text!</strong></h1>
<h2>Section Titles</h2>
</section>
</div>
<!-- Buttons -->
<section>
<div class="section__title">Breadcrumbs</div>
<p class="bit-60">Breadcrumbs appear on all internal pages that fall below the top level of navigation. They appear directly above the page title and have the appearance of inline links.</p>
<a href="#" class="breadcrumbs">< Course Catalog</a>
<h1>Example Course: Getting Started with Autodesk Revit 2016</h1>
</section>
<!-- Message Thread -->
<section>
<div class="section__title">Message Tiles</div>
<div class="news bit-70">
<div class="news-item tile__background">
<div class="news-item__header">
<div class="news-item__info">
<div class="news-item__title">PLTW Announcement</div>
<div class="news-item__sub-title">March 1, 2016</div>
</div>
</div>
<div class="news-item__content">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor... <a href="">Read More</a></p>
</div>
</div>
<div class="news-item tile__background">
<div class="news-item__header">
<div class="news-item__info">
<div class="news-item__title">PLTW Announcement</div>
<div class="news-item__sub-title">March 1, 2016</div>
</div>
</div>
<div class="news-item__content">
<p>You can find the new assignment in the LMS along with some examples of new questions. Message me in the LMS if you have any questions on the assignment. See you all Monday morning... <a href="">Read More</a></p>
</div>
</div>
</div>
</section>
<!-- Tile Small -->
<section>
<div class="section__title">Small Tiles - Courses</div>
<div class="row">
<a href="#" class="column bit-4 tile__small">
<div class="small__program--shared"> </div>
<div class="small__programName--shared">Shared</div>
<div class="small__title">PLTW: The Experience</div>
<ul class="tile__tags">
<li>Online</li>
<li>Resource</li>
</ul>
<p>Vestibulum id ligula porta felis euismod semper.</p>
<span class="btn__secondary bottom-left">View Course</span>
<span class="tile__info--right">4 hours</span>
</a>
<a href="#" class="column bit-4 tile__small">
<div class="small__program--gateway"> </div>
<div class="small__programName--gateway">PLTW Gateway</div>
<div class="small__title">Design and Modeling</div>
<ul class="tile__tags">
<li>Live</li>
<li>Online</li>
</ul>
<p>Vestibulum id ligula porta felis euismod semper.</p>
<span class="btn__secondary bottom-left">View Course</span>
<span class="tile__info--right">2 hours</span>
</a>
<a href="#" class="column bit-4 tile__small">
<div class="small__program--biomed"> </div>
<div class="small__programName--biomed">PLTW Biomedical Sciences</div>
<div class="small__title">Human Body Systems</div>
<ul class="tile__tags">
<li>Live</li>
</ul>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<span class="btn__secondary bottom-left">View Course</span>
<span class="tile__info--right">4 hours</span>
</a>
<a href="#" class="column bit-4 tile__small">
<div class="small__program--resource"> </div>
<div class="small__programName--resource">Resource</div>
<div class="small__title">Getting Started with Autodesk 123D</div>
<ul class="tile__tags">
<li>Resource</li>
</ul>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<span class="btn__secondary bottom-left">View Course</span>
<span class="tile__info--right">2 hours</span>
</a>
</div>
</section>
<!-- Tile Small - Sites -->
<section class="bit-1">
<div class="section__title">Small Tiles - Sites</div>
<div class="row">
<a href="#" class="column bit-4 tile__small--site">
<div class="site__title">Kenton City High School</div>
<div class="site__location">Kenton City, Indiana</div>
<ul class="tile__programs">
<li class="gateway"> </li>
<li class="compsci"> </li>
<li class="eng"> </li>
<li class="biomed"> </li>
</ul>
<span class="btn__secondary bottom-left">Request to Join</span>
</a>
<a href="#" class="column bit-4 tile__small--site">
<div class="site__title">John F. Kennedy Elementary School</div>
<div class="site__location">Indianapolis, Indiana</div>
<ul class="tile__programs">
<li class="eng"> </li>
</ul>
<span class="btn__secondary bottom-left">Request to Join</span>
</a>
<a href="#" class="column bit-4 tile__small--site">
<div class="site__title">New Palestine High School</div>
<div class="site__location">New Palestine, Indiana</div>
<ul class="tile__programs">
<li class="gateway"> </li>
<li class="compsci"> </li>
<li class="biomed"> </li>
</ul>
<span class="btn__secondary bottom-left">Request to Join</span>
</a>
<a href="#" class="column bit-4 tile__small--site">
<div class="site__title">Center Grove High School</div>
<div class="site__location">Greenwood, Indiana</div>
<ul class="tile__programs">
<li class="gateway"> </li>
<li class="compsci"> </li>
</ul>
<span class="btn__secondary bottom-left">Request to Join</span>
</a>
</div>
</section>
<!-- Tile Large -->
<section>
<div class="section__title">Large Tiles</div>
<div class="row">
<a href="#" class="column bit-3 tile__large">
<div class="large__program--eng">
<img src="http://jordanbrewer.com/_images/engineering_inverse.svg" class="program__icon" />
<div class="large__title">Digital Electronics</div>
</div>
<ul class="tile__tags">
<li>Live</li>
<li>Online</li>
</ul>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
<span class="btn__secondary bottom-left">View Track</span>
<span class="large__info--right">3 Courses Required</span>
</a>
<a href="#" class="column bit-3 tile__large">
<div class="large__program--gateway">
<img src="http://jordanbrewer.com/_images/gateway_inverse.svg" class="program__icon" />
<div class="large__title">Energy and the Environment</div>
</div>
<ul class="tile__tags">
<li>Live</li>
<li>Online</li>
</ul>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla.</p>
<span class="btn__secondary bottom-left">View Track</span>
<span class="large__info--right">6 Courses Required</span>
</a>
<a href="#" class="column bit-3 tile__large">
<div class="large__program--biomed">
<img src="http://jordanbrewer.com/_images/biomed_inverse.svg" class="program__icon" />
<div class="large__title">Human Body Systems</div>
</div>
<ul class="tile__tags">
<li>Live</li>
<li>Online</li>
</ul>
<p>Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<span class="btn__secondary bottom-left">View Track</span>
<span class="large__info--right">2 Courses Required</span>
</a>
</div>
</section>
<!-- Filters -->
<section>
<div class="section__title">Filters</div>
<div class="row">
<div class="column bit-25">
<div class="tile__small--dark">
<div class="filter__programs">
<div class="filter__title">Filter</div>
<ul class="filter__list">
<li><a href="#">All Types</a></li>
<li><a href="#"><span class="shared"> </span>Shared Programs</a></li>
<li><a href="#"><span class="launch"> </span>PLTW Launch</a></li>
<li><a href="#"><span class="gateway"> </span>PLTW Gateway</a></li>
<li><a href="#"><span class="compsci"> </span>PLTW Computer Science</a></li>
<li><a href="#"><span class="eng"> </span>PLTW Engineering</a></li>
<li><a href="#"><span class="biomed"> </span>PLTW Biomedical Science</a></li>
<li><a href="#"><span class="resource"> </span>Resources</a></li>
<li><a href="#"><span class="ongoing"> </span>On-going</a></li>
</div>
</div>
<div class="tile__small--dark">
<div class="filter__format">
<div class="filter__title">Format</div>
<ul class="filter__list">
<li><input type="checkbox" class="checkbox" name="format1" id="format1" /><label for="format1" class="checkbox__label">Live</label></li>
<li><input type="checkbox" class="checkbox" name="format2" id="format2" /><label for="format2" class="checkbox__label">Online</label></li>
<li><input type="checkbox" class="checkbox" name="format3" id="format3" /><label for="format3" class="checkbox__label">Self-Paced</label></li>
</ul>
</div>
<div class="filter__resource">
<div class="filter__title">Resources</div>
<ul class="filter__list">
<li><input type="checkbox" class="checkbox" name="topic1" id="topic1" /><label for="topic1" class="checkbox__label">ABP</label></li>
<li><input type="checkbox" class="checkbox" name="topic2" id="topic2" /><label for="topic2" class="checkbox__label">Software</label></li>
<li><input type="checkbox" class="checkbox" name="topic3" id="topic3" /><label for="topic3" class="checkbox__label">Assessments</label></li>
</ul>
</div>
<div class="filter__ongoing">
<div class="filter__title">On-Going</div>
<ul class="filter__list">
<li><input type="checkbox" class="checkbox" name="ongoing1" id="ongoing1" /><label for="ongoing1" class="checkbox__label">ABP</label></li>
<li><input type="checkbox" class="checkbox" name="ongoing2" id="ongoing2" /><label for="ongoing2" class="checkbox__label">Software</label></li>
<li><input type="checkbox" class="checkbox" name="ongoing3" id="ongoing3" /><label for="ongoing3" class="checkbox__label">Assessments</label></li>
<li><input type="checkbox" class="checkbox" name="ongoing4" id="ongoing4" /><label for="ongoing4" class="checkbox__label">On-going</label></li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
<script>
// Vendor js
! function e(t, n, r) {
function i(o, a) {
if (!n[o]) {
if (!t[o]) {
var c = "function" == typeof require && require;
if (!a && c) return c(o, !0);
if (s) return s(o, !0);
var u = new Error("Cannot find module '" + o + "'");
throw u.code = "MODULE_NOT_FOUND", u
}
var l = n[o] = {
exports: {}
};
t[o][0].call(l.exports, function(e) {
var n = t[o][1][e];
return i(n ? n : e)
}, l, l.exports, e, t, n, r)
}
return n[o].exports
}
for (var s = "function" == typeof require && require, o = 0; o < r.length; o++) i(r[o]);
return i
}({
1: [function(e, t, n) {
"use strict";
var r = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
return typeof e
} : function(e) {
return e && "function" == typeof Symbol && e.constructor === Symbol ? "symbol" : typeof e
};
! function(e, n, i) {
function s(e, t) {
return ("undefined" == typeof e ? "undefined" : r(e)) === t
}
function o() {
var e, t, n, r, i, o, a;
for (var c in v)
if (v.hasOwnProperty(c)) {
if (e = [], t = v[c], t.name && (e.push(t.name.toLowerCase()), t.options && t.options.aliases && t.options.aliases.length))
for (n = 0; n < t.options.aliases.length; n++) e.push(t.options.aliases[n].toLowerCase());
for (r = s(t.fn, "function") ? t.fn() : t.fn, i = 0; i < e.length; i++) o = e[i], a = o.split("."), 1 === a.length ? A[a[0]] = r : (!A[a[0]] || A[a[0]] instanceof Boolean || (A[a[0]] = new Boolean(A[a[0]])), A[a[0]][a[1]] = r), S.push((r ? "" : "no-") + a.join("-"))
}
}
function a(e) {
var t = E.className,
n = A._config.classPrefix || "";
if (b && (t = t.baseVal), A._config.enableJSClass) {
var r = new RegExp("(^|\\s)" + n + "no-js(\\s|$)");
t = t.replace(r, "$1" + n + "js$2")
}
A._config.enableClasses && (t += " " + n + e.join(" " + n), b ? E.className.baseVal = t : E.className = t)
}
function c(e, t) {
if ("object" == ("undefined" == typeof e ? "undefined" : r(e)))
for (var n in e) w(e, n) && c(n, e[n]);
else {
e = e.toLowerCase();
var i = e.split("."),
s = A[i[0]];
if (2 == i.length && (s = s[i[1]]), "undefined" != typeof s) return A;
t = "function" == typeof t ? t() : t, 1 == i.length ? A[i[0]] = t : (!A[i[0]] || A[i[0]] instanceof Boolean || (A[i[0]] = new Boolean(A[i[0]])), A[i[0]][i[1]] = t), a([(t && 0 != t ? "" : "no-") + i.join("-")]), A._trigger(e, t)
}
return A
}
function u(e, t) {
return !!~("" + e).indexOf(t)
}
function l() {
return "function" != typeof n.createElement ? n.createElement(arguments[0]) : b ? n.createElementNS.call(n, "http://www.w3.org/2000/svg", arguments[0]) : n.createElement.apply(n, arguments)
}
function f() {
var e = n.body;
return e || (e = l(b ? "svg" : "body"), e.fake = !0), e
}
function d(e, t, r, i) {
var s, o, a, c, u = "modernizr",
d = l("div"),
p = f();
if (parseInt(r, 10))
for (; r--;) a = l("div"), a.id = i ? i[r] : u + (r + 1), d.appendChild(a);
return s = l("style"), s.type = "text/css", s.id = "s" + u, (p.fake ? p : d).appendChild(s), p.appendChild(d), s.styleSheet ? s.styleSheet.cssText = e : s.appendChild(n.createTextNode(e)), d.id = u, p.fake && (p.style.background = "", p.style.overflow = "hidden", c = E.style.overflow, E.style.overflow = "hidden", E.appendChild(p)), o = t(d, e), p.fake ? (p.parentNode.removeChild(p), E.style.overflow = c, E.offsetHeight) : d.parentNode.removeChild(d), !!o
}
function p(e) {
return e.replace(/([A-Z])/g, function(e, t) {
return "-" + t.toLowerCase()
}).replace(/^ms-/, "-ms-")
}
function m(t, n) {
var r = t.length;
if ("CSS" in e && "supports" in e.CSS) {
for (; r--;)
if (e.CSS.supports(p(t[r]), n)) return !0;
return !1
}
if ("CSSSupportsRule" in e) {
for (var s = []; r--;) s.push("(" + p(t[r]) + ":" + n + ")");
return s = s.join(" or "), d("@supports (" + s + ") { #modernizr { position: absolute; } }", function(e) {
return "absolute" == getComputedStyle(e, null).position
})
}
return i
}
function h(e) {
return e.replace(/([a-z])-([a-z])/g, function(e, t, n) {
return t + n.toUpperCase()
}).replace(/^-/, "")
}
function g(e, t, n, r) {
function o() {
c && (delete C.style, delete C.modElem)
}
if (r = s(r, "undefined") ? !1 : r, !s(n, "undefined")) {
var a = m(e, n);
if (!s(a, "undefined")) return a
}
for (var c, f, d, p, g, v = ["modernizr", "tspan"]; !C.style;) c = !0, C.modElem = l(v.shift()), C.style = C.modElem.style;
for (d = e.length, f = 0; d > f; f++)
if (p = e[f], g = C.style[p], u(p, "-") && (p = h(p)), C.style[p] !== i) {
if (r || s(n, "undefined")) return o(), "pfx" == t ? p : !0;
try {
C.style[p] = n
} catch (y) {}
if (C.style[p] != g) return o(), "pfx" == t ? p : !0
}
return o(), !1
}
var v = [],
y = {
_version: "3.3.1",
_config: {
classPrefix: "",
enableClasses: !0,
enableJSClass: !0,
usePrefixes: !0
},
_q: [],
on: function(e, t) {
var n = this;
setTimeout(function() {
t(n[e])
}, 0)
},
addTest: function(e, t, n) {
v.push({
name: e,
fn: t,
options: n
})
},
addAsyncTest: function(e) {
v.push({
name: null,
fn: e
})
}
},
A = function() {};
A.prototype = y, A = new A;
var w, S = [],
E = n.documentElement,
b = "svg" === E.nodeName.toLowerCase();
! function() {
var e = {}.hasOwnProperty;
w = s(e, "undefined") || s(e.call, "undefined") ? function(e, t) {
return t in e && s(e.constructor.prototype[t], "undefined")
} : function(t, n) {
return e.call(t, n)
}
}(), y._l = {}, y.on = function(e, t) {
this._l[e] || (this._l[e] = []), this._l[e].push(t), A.hasOwnProperty(e) && setTimeout(function() {
A._trigger(e, A[e])
}, 0)
}, y._trigger = function(e, t) {
if (this._l[e]) {
var n = this._l[e];
setTimeout(function() {
var e, r;
for (e = 0; e < n.length; e++)(r = n[e])(t)
}, 0), delete this._l[e]
}
}, A._q.push(function() {
y.addTest = c
});
b || ! function(e, n) {
function i(e, t) {
var n = e.createElement("p"),
r = e.getElementsByTagName("head")[0] || e.documentElement;
return n.innerHTML = "x<style>" + t + "</style>", r.insertBefore(n.lastChild, r.firstChild)
}
function s() {
var e = T.elements;
return "string" == typeof e ? e.split(" ") : e
}
function o(e, t) {
var n = T.elements;
"string" != typeof n && (n = n.join(" ")), "string" != typeof e && (e = e.join(" ")), T.elements = n + " " + e, f(t)
}
function a(e) {
var t = C[e[b]];
return t || (t = {}, x++, e[b] = x, C[x] = t), t
}
function c(e, t, r) {
if (t || (t = n), y) return t.createElement(e);
r || (r = a(t));
var i;
return i = r.cache[e] ? r.cache[e].cloneNode() : E.test(e) ? (r.cache[e] = r.createElem(e)).cloneNode() : r.createElem(e), !i.canHaveChildren || S.test(e) || i.tagUrn ? i : r.frag.appendChild(i)
}
function u(e, t) {
if (e || (e = n), y) return e.createDocumentFragment();
t = t || a(e);
for (var r = t.frag.cloneNode(), i = 0, o = s(), c = o.length; c > i; i++) r.createElement(o[i]);
return r
}
function l(e, t) {
t.cache || (t.cache = {}, t.createElem = e.createElement, t.createFrag = e.createDocumentFragment, t.frag = t.createFrag()), e.createElement = function(n) {
return T.shivMethods ? c(n, e, t) : t.createElem(n)
}, e.createDocumentFragment = Function("h,f", "return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&(" + s().join().replace(/[\w\-:]+/g, function(e) {
return t.createElem(e), t.frag.createElement(e), 'c("' + e + '")'
}) + ");return n}")(T, t.frag)
}
function f(e) {
e || (e = n);
var t = a(e);
return !T.shivCSS || v || t.hasCSS || (t.hasCSS = !!i(e, "article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")), y || l(e, t), e
}
function d(e) {
for (var t, n = e.getElementsByTagName("*"), r = n.length, i = RegExp("^(?:" + s().join("|") + ")$", "i"), o = []; r--;) t = n[r], i.test(t.nodeName) && o.push(t.applyElement(p(t)));
return o
}
function p(e) {
for (var t, n = e.attributes, r = n.length, i = e.ownerDocument.createElement(N + ":" + e.nodeName); r--;) t = n[r], t.specified && i.setAttribute(t.nodeName, t.nodeValue);
return i.style.cssText = e.style.cssText, i
}
function m(e) {
for (var t, n = e.split("{"), r = n.length, i = RegExp("(^|[\\s,>+~])(" + s().join("|") + ")(?=[[\\s,>+~#.:]|$)", "gi"), o = "$1" + N + "\\:$2"; r--;) t = n[r] = n[r].split("}"), t[t.length - 1] = t[t.length - 1].replace(i, o), n[r] = t.join("}");
return n.join("{")
}
function h(e) {
for (var t = e.length; t--;) e[t].removeNode()
}
function g(e) {
function t() {
clearTimeout(s._removeSheetTimer), n && n.removeNode(!0), n = null
}
var n, r, s = a(e),
o = e.namespaces,
c = e.parentWindow;
return !_ || e.printShived ? e : ("undefined" == typeof o[N] && o.add(N), c.attachEvent("onbeforeprint", function() {
t();
for (var s, o, a, c = e.styleSheets, u = [], l = c.length, f = Array(l); l--;) f[l] = c[l];
for (; a = f.pop();)
if (!a.disabled && z.test(a.media)) {
try {
s = a.imports, o = s.length
} catch (p) {
o = 0
}
for (l = 0; o > l; l++) f.push(s[l]);
try {
u.push(a.cssText)
} catch (p) {}
}
u = m(u.reverse().join("")), r = d(e), n = i(e, u)
}), c.attachEvent("onafterprint", function() {
h(r), clearTimeout(s._removeSheetTimer), s._removeSheetTimer = setTimeout(t, 500)
}), e.printShived = !0, e)
}
var v, y, A = "3.7.3",
w = e.html5 || {},
S = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,
E = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,
b = "_html5shiv",
x = 0,
C = {};
! function() {
try {
var e = n.createElement("a");
e.innerHTML = "<xyz></xyz>", v = "hidden" in e, y = 1 == e.childNodes.length || function() {
n.createElement("a");
var e = n.createDocumentFragment();
return "undefined" == typeof e.cloneNode || "undefined" == typeof e.createDocumentFragment || "undefined" == typeof e.createElement
}()
} catch (t) {
v = !0, y = !0
}
}();
var T = {
elements: w.elements || "abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",
version: A,
shivCSS: w.shivCSS !== !1,
supportsUnknownElements: y,
shivMethods: w.shivMethods !== !1,
type: "default",
shivDocument: f,
createElement: c,
createDocumentFragment: u,
addElements: o
};
e.html5 = T, f(n);
var z = /^$|\b(?:all|print)\b/,
N = "html5shiv",
_ = !y && function() {
var t = n.documentElement;
return !("undefined" == typeof n.namespaces || "undefined" == typeof n.parentWindow || "undefined" == typeof t.applyElement || "undefined" == typeof t.removeNode || "undefined" == typeof e.attachEvent)
}();
T.type += " print", T.shivPrint = g, g(n), "object" == ("undefined" == typeof t ? "undefined" : r(t)) && t.exports && (t.exports = T)
}("undefined" != typeof e ? e : this, n);
var x = {
elem: l("modernizr")
};
A._q.push(function() {
delete x.elem
});
var C = {
style: x.elem.style
};
A._q.unshift(function() {
delete C.style
});
y.testProp = function(e, t, n) {
return g([e], i, t, n)
};
A.addTest("svg", !!n.createElementNS && !!n.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect), o(), a(S), delete y.addTest, delete y.addAsyncTest;
for (var T = 0; T < A._q.length; T++) A._q[T]();
e.Modernizr = A
}(window, document)
}, {}],
2: [function(e, t, n) {
"use strict";
function r(e, t) {
if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function")
}
e("../../_tmp/scripts/modernizr"), e("picturefill");
var i = function s() {
r(this, s)
};
new i
}, {
"../../_tmp/scripts/modernizr": 1,
picturefill: 3
}],
3: [function(e, t, n) {
! function(e) {
var t = navigator.userAgent;
e.HTMLPictureElement && /ecko/.test(t) && t.match(/rv\:(\d+)/) && RegExp.$1 < 41 && addEventListener("resize", function() {
var t, n = document.createElement("source"),
r = function(e) {
var t, r, i = e.parentNode;
"PICTURE" === i.nodeName.toUpperCase() ? (t = n.cloneNode(), i.insertBefore(t, i.firstElementChild), setTimeout(function() {
i.removeChild(t)
})) : (!e._pfLastSize || e.offsetWidth > e._pfLastSize) && (e._pfLastSize = e.offsetWidth, r = e.sizes, e.sizes += ",100vw", setTimeout(function() {
e.sizes = r
}))
},
i = function() {
var e, t = document.querySelectorAll("picture > img, img[srcset][sizes]");
for (e = 0; e < t.length; e++) r(t[e])
},
s = function() {
clearTimeout(t), t = setTimeout(i, 99)
},
o = e.matchMedia && matchMedia("(orientation: landscape)"),
a = function() {
s(), o && o.addListener && o.addListener(s)
};
return n.srcset = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", /^[c|i]|d$/.test(document.readyState || "") ? a() : document.addEventListener("DOMContentLoaded", a), s
}())
}(window),
function(e, n, r) {
"use strict";
function i(e) {
return " " === e || " " === e || "\n" === e || "\f" === e || "\r" === e
}
function s(t, n) {
var r = new e.Image;
return r.onerror = function() {
T[t] = !1, te()
}, r.onload = function() {
T[t] = 1 === r.width, te()
}, r.src = n, "pending"
}
function o() {
U = !1, q = e.devicePixelRatio, F = {}, B = {}, A.DPR = q || 1, I.width = Math.max(e.innerWidth || 0, C.clientWidth), I.height = Math.max(e.innerHeight || 0, C.clientHeight), I.vw = I.width / 100, I.vh = I.height / 100, y = [I.height, I.width, q].join("-"), I.em = A.getEmValue(), I.rem = I.em
}
function a(e, t, n, r) {
var i, s, o, a;
return "saveData" === z.algorithm ? e > 2.7 ? a = n + 1 : (s = t - n, i = Math.pow(e - .6, 1.5), o = s * i, r && (o += .1 * i), a = e + o) : a = n > 1 ? Math.sqrt(e * t) : e, a > n
}
function c(e) {
var t, n = A.getSet(e),
r = !1;
"pending" !== n && (r = y, n && (t = A.setRes(n), A.applySetCandidate(t, e))), e[A.ns].evaled = r
}
function u(e, t) {
return e.res - t.res
}
function l(e, t, n) {
var r;
return !n && t && (n = e[A.ns].sets, n = n && n[n.length - 1]), r = f(t, n), r && (t = A.makeUrl(t), e[A.ns].curSrc = t, e[A.ns].curCan = r, r.res || ee(r, r.set.sizes)), r
}
function f(e, t) {
var n, r, i;
if (e && t)
for (i = A.parseSet(t), e = A.makeUrl(e), n = 0; n < i.length; n++)
if (e === A.makeUrl(i[n].url)) {
r = i[n];
break
}
return r
}
function d(e, t) {
var n, r, i, s, o = e.getElementsByTagName("source");
for (n = 0, r = o.length; r > n; n++) i = o[n], i[A.ns] = !0, s = i.getAttribute("srcset"), s && t.push({
srcset: s,
media: i.getAttribute("media"),
type: i.getAttribute("type"),
sizes: i.getAttribute("sizes")
})
}
function p(e, t) {
function n(t) {
var n, r = t.exec(e.substring(d));
return r ? (n = r[0], d += n.length, n) : void 0
}
function r() {
var e, n, r, i, s, c, u, l, f, d = !1,
m = {};
for (i = 0; i < a.length; i++) s = a[i], c = s[s.length - 1], u = s.substring(0, s.length - 1), l = parseInt(u, 10), f = parseFloat(u), J.test(u) && "w" === c ? ((e || n) && (d = !0), 0 === l ? d = !0 : e = l) : K.test(u) && "x" === c ? ((e || n || r) && (d = !0), 0 > f ? d = !0 : n = f) : J.test(u) && "h" === c ? ((r || n) && (d = !0), 0 === l ? d = !0 : r = l) : d = !0;
d || (m.url = o, e && (m.w = e), n && (m.d = n), r && (m.h = r), r || n || e || (m.d = 1), 1 === m.d && (t.has1x = !0), m.set = t, p.push(m))
}
function s() {
for (n(Q), c = "", u = "in descriptor";;) {
if (l = e.charAt(d), "in descriptor" === u)
if (i(l)) c && (a.push(c), c = "", u = "after descriptor");
else {
if ("," === l) return d += 1, c && a.push(c), void r();
if ("(" === l) c += l, u = "in parens";
else {
if ("" === l) return c && a.push(c), void r();
c += l
}
} else if ("in parens" === u)
if (")" === l) c += l, u = "in descriptor";
else {
if ("" === l) return a.push(c), void r();
c += l
} else if ("after descriptor" === u)
if (i(l));
else {
if ("" === l) return void r();
u = "in descriptor", d -= 1
}
d += 1
}
}
for (var o, a, c, u, l, f = e.length, d = 0, p = [];;) {
if (n(O), d >= f) return p;
o = n(G), a = [], "," === o.slice(-1) ? (o = o.replace(V, ""), r()) : s()
}
}
function m(e) {
function t(e) {
function t() {
s && (o.push(s), s = "")
}
function n() {
o[0] && (a.push(o), o = [])
}
for (var r, s = "", o = [], a = [], c = 0, u = 0, l = !1;;) {
if (r = e.charAt(u), "" === r) return t(), n(), a;
if (l) {
if ("*" === r && "/" === e[u + 1]) {
l = !1, u += 2, t();
continue
}
u += 1
} else {
if (i(r)) {
if (e.charAt(u - 1) && i(e.charAt(u - 1)) || !s) {
u += 1;
continue
}
if (0 === c) {
t(), u += 1;
continue
}
r = " "
} else if ("(" === r) c += 1;
else if (")" === r) c -= 1;
else {
if ("," === r) {
t(), n(), u += 1;
continue
}
if ("/" === r && "*" === e.charAt(u + 1)) {
l = !0, u += 2;
continue
}
}
s += r, u += 1
}
}
}
function n(e) {
return l.test(e) && parseFloat(e) >= 0 ? !0 : f.test(e) ? !0 : "0" === e || "-0" === e || "+0" === e ? !0 : !1
}
var r, s, o, a, c, u, l = /^(?:[+-]?[0-9]+|[0-9]*\.[0-9]+)(?:[eE][+-]?[0-9]+)?(?:ch|cm|em|ex|in|mm|pc|pt|px|rem|vh|vmin|vmax|vw)$/i,
f = /^calc\((?:[0-9a-z \.\+\-\*\/\(\)]+)\)$/i;
for (s = t(e), o = s.length, r = 0; o > r; r++)
if (a = s[r], c = a[a.length - 1], n(c)) {
if (u = c, a.pop(), 0 === a.length) return u;
if (a = a.join(" "), A.matchesMedia(a)) return u
}
return "100vw"
}
n.createElement("picture");
var h, g, v, y, A = {},
w = function() {},
S = n.createElement("img"),
E = S.getAttribute,
b = S.setAttribute,
x = S.removeAttribute,
C = n.documentElement,
T = {},
z = {
algorithm: ""
},
N = "data-pfsrc",
_ = N + "set",
M = navigator.userAgent,
L = /rident/.test(M) || /ecko/.test(M) && M.match(/rv\:(\d+)/) && RegExp.$1 > 35,
R = "currentSrc",
D = /\s+\+?\d+(e\d+)?w/,
$ = /(\([^)]+\))?\s*(.+)/,
k = e.picturefillCFG,
P = "position:absolute;left:0;visibility:hidden;display:block;padding:0;border:none;font-size:1em;width:1em;overflow:hidden;clip:rect(0px, 0px, 0px, 0px)",
j = "font-size:100%!important;",
U = !0,
F = {},
B = {},
q = e.devicePixelRatio,
I = {
px: 1,
"in": 96
},
W = n.createElement("a"),
H = !1,
Q = /^[ \t\n\r\u000c]+/,
O = /^[, \t\n\r\u000c]+/,
G = /^[^ \t\n\r\u000c]+/,
V = /[,]+$/,
J = /^\d+$/,
K = /^-?(?:[0-9]+|[0-9]*\.[0-9]+)(?:[eE][+-]?[0-9]+)?$/,
X = function(e, t, n, r) {
e.addEventListener ? e.addEventListener(t, n, r || !1) : e.attachEvent && e.attachEvent("on" + t, n)
},
Z = function(e) {
var t = {};
return function(n) {
return n in t || (t[n] = e(n)), t[n]
}
},
Y = function() {
var e = /^([\d\.]+)(em|vw|px)$/,
t = function() {
for (var e = arguments, t = 0, n = e[0]; ++t in e;) n = n.replace(e[t], e[++t]);
return n
},
n = Z(function(e) {
return "return " + t((e || "").toLowerCase(), /\band\b/g, "&&", /,/g, "||", /min-([a-z-\s]+):/g, "e.$1>=", /max-([a-z-\s]+):/g, "e.$1<=", /calc([^)]+)/g, "($1)", /(\d+[\.]*[\d]*)([a-z]+)/g, "($1 * e.$2)", /^(?!(e.[a-z]|[0-9\.&=|><\+\-\*\(\)\/])).*/gi, "") + ";"
});
return function(t, r) {
var i;
if (!(t in F))
if (F[t] = !1, r && (i = t.match(e))) F[t] = i[1] * I[i[2]];
else try {
F[t] = new Function("e", n(t))(I)
} catch (s) {}
return F[t]
}
}(),
ee = function(e, t) {
return e.w ? (e.cWidth = A.calcListLength(t || "100vw"), e.res = e.w / e.cWidth) : e.res = e.d, e
},
te = function(e) {
var t, r, i, s = e || {};
if (s.elements && 1 === s.elements.nodeType && ("IMG" === s.elements.nodeName.toUpperCase() ? s.elements = [s.elements] : (s.context = s.elements, s.elements = null)), t = s.elements || A.qsa(s.context || n, s.reevaluate || s.reselect ? A.sel : A.selShort), i = t.length) {
for (A.setupRun(s), H = !0, r = 0; i > r; r++) A.fillImg(t[r], s);
A.teardownRun(s)
}
};
h = e.console && console.warn ? function(e) {
console.warn(e)
} : w, R in S || (R = "src"), T["image/jpeg"] = !0, T["image/gif"] = !0, T["image/png"] = !0, T["image/svg+xml"] = n.implementation.hasFeature("http://wwwindow.w3.org/TR/SVG11/feature#Image", "1.1"), A.ns = ("pf" + (new Date).getTime()).substr(0, 9), A.supSrcset = "srcset" in S, A.supSizes = "sizes" in S, A.supPicture = !!e.HTMLPictureElement, A.supSrcset && A.supPicture && !A.supSizes && ! function(e) {
S.srcset = "data:,a", e.src = "data:,a", A.supSrcset = S.complete === e.complete, A.supPicture = A.supSrcset && A.supPicture
}(n.createElement("img")), A.selShort = "picture>img,img[srcset]", A.sel = A.selShort, A.cfg = z, A.supSrcset && (A.sel += ",img[" + _ + "]"), A.DPR = q || 1, A.u = I, A.types = T, v = A.supSrcset && !A.supSizes, A.setSize = w, A.makeUrl = Z(function(e) {
return W.href = e, W.href
}), A.qsa = function(e, t) {
return e.querySelectorAll(t)
}, A.matchesMedia = function() {
return e.matchMedia && (matchMedia("(min-width: 0.1em)") || {}).matches ? A.matchesMedia = function(e) {
return !e || matchMedia(e).matches
} : A.matchesMedia = A.mMQ, A.matchesMedia.apply(this, arguments)
}, A.mMQ = function(e) {
return e ? Y(e) : !0
}, A.calcLength = function(e) {
var t = Y(e, !0) || !1;
return 0 > t && (t = !1), t
}, A.supportsType = function(e) {
return e ? T[e] : !0
}, A.parseSize = Z(function(e) {
var t = (e || "").match($);
return {
media: t && t[1],
length: t && t[2]
}
}), A.parseSet = function(e) {
return e.cands || (e.cands = p(e.srcset, e)), e.cands
}, A.getEmValue = function() {
var e;
if (!g && (e = n.body)) {
var t = n.createElement("div"),
r = C.style.cssText,
i = e.style.cssText;
t.style.cssText = P, C.style.cssText = j, e.style.cssText = j, e.appendChild(t), g = t.offsetWidth, e.removeChild(t), g = parseFloat(g, 10), C.style.cssText = r, e.style.cssText = i
}
return g || 16
}, A.calcListLength = function(e) {
if (!(e in B) || z.uT) {
var t = A.calcLength(m(e));
B[e] = t ? t : I.width
}
return B[e]
}, A.setRes = function(e) {
var t;
if (e) {
t = A.parseSet(e);
for (var n = 0, r = t.length; r > n; n++) ee(t[n], e.sizes)
}
return t
}, A.setRes.res = ee, A.applySetCandidate = function(e, t) {
if (e.length) {
var n, r, i, s, o, c, f, d, p, m = t[A.ns],
h = A.DPR;
if (c = m.curSrc || t[R], f = m.curCan || l(t, c, e[0].set), f && f.set === e[0].set && (p = L && !t.complete && f.res - .1 > h, p || (f.cached = !0, f.res >= h && (o = f))), !o)
for (e.sort(u), s = e.length, o = e[s - 1], r = 0; s > r; r++)
if (n = e[r], n.res >= h) {
i = r - 1, o = e[i] && (p || c !== A.makeUrl(n.url)) && a(e[i].res, n.res, h, e[i].cached) ? e[i] : n;
break
}
o && (d = A.makeUrl(o.url), m.curSrc = d, m.curCan = o, d !== c && A.setSrc(t, o), A.setSize(t))
}
}, A.setSrc = function(e, t) {
var n;
e.src = t.url, "image/svg+xml" === t.set.type && (n = e.style.width, e.style.width = e.offsetWidth + 1 + "px", e.offsetWidth + 1 && (e.style.width = n))
}, A.getSet = function(e) {
var t, n, r, i = !1,
s = e[A.ns].sets;
for (t = 0; t < s.length && !i; t++)
if (n = s[t], n.srcset && A.matchesMedia(n.media) && (r = A.supportsType(n.type))) {
"pending" === r && (n = r), i = n;
break
}
return i
}, A.parseSets = function(e, t, n) {
var i, s, o, a, c = t && "PICTURE" === t.nodeName.toUpperCase(),
u = e[A.ns];
(u.src === r || n.src) && (u.src = E.call(e, "src"), u.src ? b.call(e, N, u.src) : x.call(e, N)), (u.srcset === r || n.srcset || !A.supSrcset || e.srcset) && (i = E.call(e, "srcset"), u.srcset = i, a = !0), u.sets = [], c && (u.pic = !0, d(t, u.sets)), u.srcset ? (s = {
srcset: u.srcset,
sizes: E.call(e, "sizes")
}, u.sets.push(s), o = (v || u.src) && D.test(u.srcset || ""), o || !u.src || f(u.src, s) || s.has1x || (s.srcset += ", " + u.src, s.cands.push({
url: u.src,
d: 1,
set: s
}))) : u.src && u.sets.push({
srcset: u.src,
sizes: null
}), u.curCan = null, u.curSrc = r, u.supported = !(c || s && !A.supSrcset || o), a && A.supSrcset && !u.supported && (i ? (b.call(e, _, i), e.srcset = "") : x.call(e, _)), u.supported && !u.srcset && (!u.src && e.src || e.src !== A.makeUrl(u.src)) && (null === u.src ? e.removeAttribute("src") : e.src = u.src), u.parsed = !0
}, A.fillImg = function(e, t) {
var n, r = t.reselect || t.reevaluate;
e[A.ns] || (e[A.ns] = {}), n = e[A.ns], (r || n.evaled !== y) && ((!n.parsed || t.reevaluate) && A.parseSets(e, e.parentNode, t), n.supported ? n.evaled = y : c(e))
}, A.setupRun = function() {
(!H || U || q !== e.devicePixelRatio) && o()
}, A.supPicture ? (te = w, A.fillImg = w) : ! function() {
var t, r = e.attachEvent ? /d$|^c/ : /d$|^c|^i/,
i = function() {
var e = n.readyState || "";
s = setTimeout(i, "loading" === e ? 200 : 999), n.body && (A.fillImgs(), t = t || r.test(e), t && clearTimeout(s))
},
s = setTimeout(i, n.body ? 9 : 99),
o = function(e, t) {
var n, r, i = function() {
var s = new Date - r;
t > s ? n = setTimeout(i, t - s) : (n = null, e())
};
return function() {
r = new Date, n || (n = setTimeout(i, t))
}
},
a = C.clientHeight,
c = function() {
U = Math.max(e.innerWidth || 0, C.clientWidth) !== I.width || C.clientHeight !== a, a = C.clientHeight, U && A.fillImgs()
};
X(e, "resize", o(c, 99)), X(n, "readystatechange", i)
}(), A.picturefill = te, A.fillImgs = te, A.teardownRun = w, te._ = A, e.picturefillCFG = {
pf: A,
push: function(e) {
var t = e.shift();
"function" == typeof A[t] ? A[t].apply(A, e) : (z[t] = e[0], H && A.fillImgs({
reselect: !0
}))
}
};
for (; k && k.length;) e.picturefillCFG.push(k.shift());
e.picturefill = te, "object" == typeof t && "object" == typeof t.exports ? t.exports = te : "function" == typeof define && define.amd && define("picturefill", function() {
return te
}), A.supPicture || (T["image/webp"] = s("image/webp", "data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA=="))
}(window, document)
}, {}]
}, {}, [2]);
// App.js
! function t(e, r, n) {
function o(a, s) {
if (!r[a]) {
if (!e[a]) {
var u = "function" == typeof require && require;
if (!s && u) return u(a, !0);
if (i) return i(a, !0);
var l = new Error("Cannot find module '" + a + "'");
throw l.code = "MODULE_NOT_FOUND", l
}
var c = r[a] = {
exports: {}
};
e[a][0].call(c.exports, function(t) {
var r = e[a][1][t];
return o(r ? r : t)
}, c, c.exports, t, e, r, n)
}
return r[a].exports
}
for (var i = "function" == typeof require && require, a = 0; a < n.length; a++) o(n[a]);
return o
}({
1: [function(t, e, r) {
"use strict";
function n(t, e) {
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
}
var o = t("./modules/MyModule"),
i = t("./modules/SVGInjector"),
a = function s() {
n(this, s), Modernizr.svg && new i, new o
};
new a
}, {
"./modules/MyModule": 2,
"./modules/SVGInjector": 3
}],
2: [function(t, e, r) {
"use strict";
function n(t, e) {
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
}
var o = function i() {
n(this, i)
};
e.exports = o
}, {}],
3: [function(t, e, r) {
"use strict";
function n(t, e) {
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
}
var o = t("svg-injector"),
i = function a() {
n(this, a);
var t = document.querySelectorAll("[data-svg]");
Array.from(t).forEach(function(t) {
t.parentNode.style.backgroundImage = "none"
}), o(t)
};
e.exports = i
}, {
"svg-injector": 4
}],
4: [function(t, e, r) {
! function(t, n) {
"use strict";
function o(t) {
t = t.split(" ");
for (var e = {}, r = t.length, n = []; r--;) e.hasOwnProperty(t[r]) || (e[t[r]] = 1, n.unshift(t[r]));
return n.join(" ")
}
var i = "file:" === t.location.protocol,
a = n.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"),
s = Array.prototype.forEach || function(t, e) {
if (void 0 === this || null === this || "function" != typeof t) throw new TypeError;
var r, n = this.length >>> 0;
for (r = 0; n > r; ++r) r in this && t.call(e, this[r], r, this)
},
u = {},
l = 0,
c = [],
f = [],
p = {},
d = function(t) {
return t.cloneNode(!0)
},
v = function(t, e) {
f[t] = f[t] || [], f[t].push(e)
},
h = function(t) {
for (var e = 0, r = f[t].length; r > e; e++) ! function(e) {
setTimeout(function() {
f[t][e](d(u[t]))
}, 0)
}(e)
},
g = function(e, r) {
if (void 0 !== u[e]) u[e] instanceof SVGSVGElement ? r(d(u[e])) : v(e, r);
else {
if (!t.XMLHttpRequest) return r("Browser does not support XMLHttpRequest"), !1;
u[e] = {}, v(e, r);
var n = new XMLHttpRequest;
n.onreadystatechange = function() {
if (4 === n.readyState) {
if (404 === n.status || null === n.responseXML) return r("Unable to load SVG file: " + e), i && r("Note: SVG injection ajax calls do not work locally without adjusting security setting in your browser. Or consider using a local webserver."), r(), !1;
if (!(200 === n.status || i && 0 === n.status)) return r("There was a problem injecting the SVG: " + n.status + " " + n.statusText), !1;
if (n.responseXML instanceof Document) u[e] = n.responseXML.documentElement;
else if (DOMParser && DOMParser instanceof Function) {
var t;
try {
var o = new DOMParser;
t = o.parseFromString(n.responseText, "text/xml")
} catch (a) {
t = void 0
}
if (!t || t.getElementsByTagName("parsererror").length) return r("Unable to parse SVG file: " + e), !1;
u[e] = t.documentElement
}
h(e)
}
}, n.open("GET", e), n.overrideMimeType && n.overrideMimeType("text/xml"), n.send()
}
},
m = function(e, r, n, i) {
var u = e.getAttribute("data-src") || e.getAttribute("src");
if (!/\.svg/i.test(u)) return void i("Attempted to inject a file with a non-svg extension: " + u);
if (!a) {
var f = e.getAttribute("data-fallback") || e.getAttribute("data-png");
return void(f ? (e.setAttribute("src", f), i(null)) : n ? (e.setAttribute("src", n + "/" + u.split("/").pop().replace(".svg", ".png")), i(null)) : i("This browser does not support SVG and no PNG fallback was defined."))
} - 1 === c.indexOf(e) && (c.push(e), e.setAttribute("src", ""), g(u, function(n) {
if ("undefined" == typeof n || "string" == typeof n) return i(n), !1;
var a = e.getAttribute("id");
a && n.setAttribute("id", a);
var f = e.getAttribute("title");
f && n.setAttribute("title", f);
var d = [].concat(n.getAttribute("class") || [], "injected-svg", e.getAttribute("class") || []).join(" ");
n.setAttribute("class", o(d));
var v = e.getAttribute("style");
v && n.setAttribute("style", v);
var h = [].filter.call(e.attributes, function(t) {
return /^data-\w[\w\-]*$/.test(t.name)
});
s.call(h, function(t) {
t.name && t.value && n.setAttribute(t.name, t.value)
});
var g, m, y, w, b, A = {
clipPath: ["clip-path"],
"color-profile": ["color-profile"],
cursor: ["cursor"],
filter: ["filter"],
linearGradient: ["fill", "stroke"],
marker: ["marker", "marker-start", "marker-mid", "marker-end"],
mask: ["mask"],
pattern: ["fill", "stroke"],
radialGradient: ["fill", "stroke"]
};
Object.keys(A).forEach(function(t) {
g = t, y = A[t], m = n.querySelectorAll("defs " + g + "[id]");
for (var e = 0, r = m.length; r > e; e++) {
w = m[e].id, b = w + "-" + l;
var o;
s.call(y, function(t) {
o = n.querySelectorAll("[" + t + '*="' + w + '"]');
for (var e = 0, r = o.length; r > e; e++) o[e].setAttribute(t, "url(#" + b + ")")
}), m[e].id = b
}
}), n.removeAttribute("xmlns:a");
for (var x, S, j = n.querySelectorAll("script"), M = [], k = 0, T = j.length; T > k; k++) S = j[k].getAttribute("type"), S && "application/ecmascript" !== S && "application/javascript" !== S || (x = j[k].innerText || j[k].textContent, M.push(x), n.removeChild(j[k]));
if (M.length > 0 && ("always" === r || "once" === r && !p[u])) {
for (var G = 0, E = M.length; E > G; G++) new Function(M[G])(t);
p[u] = !0
}
var q = n.querySelectorAll("style");
s.call(q, function(t) {
t.textContent += ""
}), e.parentNode.replaceChild(n, e), delete c[c.indexOf(e)], e = null, l++, i(n)
}))
},
y = function(t, e, r) {
e = e || {};
var n = e.evalScripts || "always",
o = e.pngFallback || !1,
i = e.each;
if (void 0 !== t.length) {
var a = 0;
s.call(t, function(e) {
m(e, n, o, function(e) {
i && "function" == typeof i && i(e), r && t.length === ++a && r(a)
})
})
} else t ? m(t, n, o, function(e) {
i && "function" == typeof i && i(e), r && r(1), t = null
}) : r && r(0)
};
"object" == typeof e && "object" == typeof e.exports ? e.exports = r = y : "function" == typeof define && define.amd ? define(function() {
return y
}) : "object" == typeof t && (t.SVGInjector = y)
}(window, document)
}, {}]
}, {}, [1]);
</script>
/* -------------------------------------------------- */
/* Reset */
/* -------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* -------------------------------------------------- */
/* Wrapper */
/* -------------------------------------------------- */
.wrapper {
margin: 0 auto;
max-width: 1200px;
width: 90%;
}
.wrapper:after {
content: "";
display: table;
clear: both;
}
.column-row, .row {
width: 100%;
margin-left: -2%;
margin-bottom: 24px;
}
.column, .columns {
float: left;
display: inline;
margin: 0 0 0 1.5%;
}
/* Clear the columns */
.column-row:after, .row:after, .clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .column-row, * html .row, * html .clearfix {
height: 1%;
}
.column-row, .row, .clearfix {
display: inline-block;
}
.column-row, .row, .clearfix {
display: block;
}
.bit-1 {
width: 98%;
}
.bit-2 {
width: 48%;
}
.bit-3 {
width: 31.5%;
}
.bit-4 {
width: 23.2%;
}
.bit-5 {
width: 18%;
}
.bit-6 {
width: 16.66667%;
}
.bit-7 {
width: 12.28571%;
}
.bit-8 {
width: 10.5%;
}
.bit-9 {
width: 9.11111%;
}
.bit-10 {
width: 8%;
}
.bit-11 {
width: 7.09091%;
}
.bit-12 {
width: 6.33333%;
}
.bit-25 {
width: 23%;
}
.bit-40 {
width: 38%;
}
.bit-60 {
width: 58%;
}
.bit-70 {
width: 68%;
}
.bit-75 {
width: 73%;
}
.offset-5 {
margin-left: 6.5%;
}
@media (max-width: 15em) {
.bit-1 {
width: 100%;
}
.bit-2 {
width: 100%;
}
.bit-3 {
width: 100%;
}
.bit-4 {
width: 100%;
}
.bit-5 {
width: 100%;
}
.bit-6 {
width: 100%;
}
.bit-7 {
width: 100%;
}
.bit-8 {
width: 100%;
}
.bit-9 {
width: 100%;
}
.bit-10 {
width: 100%;
}
.bit-11 {
width: 100%;
}
.bit-12 {
width: 100%;
}
}
@media (min-width: 15em) and (max-width: 30em) {
.bit-4, .bit-6, .bit-8, .bit-10, .bit-12 {
width: 50%;
}
.bit-1, .bit-2, .bit-3, .bit-5, .bit-7, .bit-9, .bit-11 {
width: 100%;
}
}
@media (min-width: 30em) and (max-width: 68.75em) {
.bit-2, .bit-7 {
width: 100%;
}
.bit-4, .bit-8, .bit-10, .bit-12 {
width: 48%;
margin-bottom: 24px;
}
}
/* ---------------------------------------------- */
/* Variables */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* Body / General */
/* ---------------------------------------------- */
body {
background-color: #F4F3F0;
font-family: "proxima-nova", sans-serif;
}
.tile__background {
background-color: #ffffff;
border: 1px solid #D6D6D6;
border-radius: 4px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
}
/* ---------------------------------------------- */
/* Buttons */
/* ---------------------------------------------- */
.btn__primary {
padding: 16px 22px;
color: #ffffff;
background-color: #2D8692;
border: 1px solid #2D8692;
border-radius: 4px;
font-size: 14px;
transition: background-color .1s ease-out;
}
.btn__primary:hover {
background-color: #206973;
cursor: pointer;
}
.btn__secondary {
padding: 16px 22px;
color: #2D8692;
background-color: transparent;
border: 1px solid #2D8692;
border-radius: 4px;
font-size: 14px;
transition: background-color .1s ease-out, color .1s ease-out, border-color .1s ease-out;
}
.btn__secondary:hover {
background-color: #2D8692;
color: #ffffff;
cursor: pointer;
}
/* ---------------------------------------------- */
/* Breadcurmbs */
/* ---------------------------------------------- */
a.breadcrumbs {
color: #2D8692;
text-decoration: none;
font-size: 14px;
position: relative;
}
a.breadcrumbs:hover {
left: -2px;
}
/* ---------------------------------------------- */
/* Headings */
/* ---------------------------------------------- */
h4, h5, h6 {
font-weight: normal;
}
h1, h3 {
font-weight: 300;
line-height: 1;
}
h1 {
color: #404040;
font-size: 30px;
margin: 0;
padding: 1.25rem 0;
}
h2 {
color: #404040;
font-size: 16px;
font-weight: 700;
line-height: 1.6;
margin: 0;
padding: .5rem 0 1.5rem;
}
h3 {
color: #404040;
font-size: 16px;
font-weight: 700;
line-height: 1.6;
margin: 0;
padding: .5rem 0;
}
p {
font-size: 14px;
line-height: 1.8;
margin: 0 0 30px;
font-weight: 300;
color: #7D7D7D;
}
strong {
color: #404040;
font-weight: 600;
}
/* ---------------------------------------------- */
/* Head */
/* ---------------------------------------------- */
/* Main Head */
.main-head {
background: #ffffff;
border-bottom: 1px solid #D6D6D6;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
height: 60px;
position: relative;
z-index: 50;
}
.main-head a {
text-decoration: none;
color: #2D8692;
font-weight: 400;
}
.main-head > div {
display: inline-block;
vertical-align: top;
}
.main-head__logo {
padding: 14px 24px 12px;
}
.main-head__nav {
font-size: 14px;
border-left: 1px solid #D6D6D6;
border-right: 1px solid #D6D6D6;
}
.main-head__nav ul {
list-style: none;
margin: 0;
padding: 0;
height: 60px;
}
.main-head__nav li {
display: inline-block;
transition: background-color 200ms;
height: 60px;
}
.main-head__nav li a {
display: block;
padding: 24px;
}
.main-head__nav li:hover {
background-color: #f9f9f9;
}
.main-head .notifications {
float: right;
}
.main-head .site-search {
float: right;
}
/* Account */
.account {
float: right;
padding: 11px 24px 8px;
position: relative;
}
.account:hover {
background-color: #f9f9f9;
}
.account div {
display: inline-block;
vertical-align: middle;
}
.account__name {
color: #4d4d4d;
font-size: 14px;
padding-right: 0.5rem;
}
.account__image {
padding: 0 .5rem 0 0;
}
.account__image img {
border-radius: 50%;
}
.account__nav {
position: absolute;
left: 0;
top: 105%;
width: 97%;
visibility: hidden;
opacity: 0;
z-index: -1;
transition: all 400ms;
}
.account__nav li a {
display: block;
}
.account:hover {
cursor: pointer;
}
.account:hover .account__nav {
opacity: 1;
visibility: visible;
z-index: 5;
}
/* Notifications */
.notifications {
position: relative;
border-left: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
}
.notifications span {
color: #2d8692;
font-size: 14px;
display: inline-block;
vertical-align: middle;
padding: 26px 24px 20px;
transition: background-color 400ms;
}
.notifications span:hover {
background-color: #f9f9f9;
}
.notifications div {
display: inline-block;
vertical-align: middle;
margin-left: 1rem;
}
.notifications ul {
position: absolute;
left: 0;
top: 103%;
width: 350%;
opacity: 0;
visibility: hidden;
z-index: -1;
transition: all .2s;
}
.notifications ul a {
display: block;
text-align: center;
}
.notifications:hover {
cursor: pointer;
}
.notifications:hover ul {
opacity: 1;
visibility: visible;
z-index: 5;
}
/* Search */
.right__search {
float: right;
padding: 10px 24px;
}
.right__search input {
width: 400px;
padding: 11px;
border: 1px solid #D6D6D6;
border-radius: 4px;
background-color: #f9f9f9;
font-size: 14px;
transition: background-color 0.1s ease-in, border-color 0.1s ease-in, box-shadow 0.1s ease-in;
}
.right__search input:focus {
outline: none;
border-color: #EFF3F3;
background-color: #ffffff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
input::-webkit-input-placeholder {
font-family: "proxima-nova", sans-serif;
font-size: 14px;
font-weight: 300;
color: #7D7D7D;
}
/* Select */
ul.list-styled {
background: #ffffff;
border-radius: 3px;
border: 1px solid #D6D6D6;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
list-style: none;
margin: 0;
padding: 0;
}
ul.list-styled li {
border-bottom: 1px solid #D6D6D6;
color: #404040;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
padding: 1rem;
transition: background-color 400ms;
}
ul.list-styled li:last-of-type {
border-bottom: 0;
}
ul.list-styled li:hover {
background-color: #f7f7f7;
}
.styled-select {
background: url(/assets/images/icons/down-arrow.svg) no-repeat 98%;
background-size: 3%;
border-radius: 5px;
border: 1px solid #cccccc;
overflow: hidden;
width: 49%;
height: 45px;
position: relative;
}
.styled-select select {
background: transparent;
min-width: 150px;
width: 100%;
padding: 1rem;
line-height: 1;
border: none;
height: 45px;
-webkit-appearance: none;
outline: none;
z-index: 5;
}
/* ---------------------------------------------- */
/* Subnav */
/* ---------------------------------------------- */
.subnav {
width: 100%;
background-color: #ECEAE4;
position: relative;
z-index: 10;
border-bottom: 1px solid #D6D6D6;
padding: 18px 0;
}
.subnav__title {
text-decoration: none;
font-family: "proxima-nova", sans-serif;
color: #404040;
font-weight: 300;
font-size: 18px;
display: inline;
}
.subnav__group {
display: inline;
}
.subnav__group li {
display: inline;
margin-left: 40px;
}
.subnav li a {
text-decoration: none;
font-family: "proxima-nova", sans-serif;
color: #404040;
font-weight: 500;
font-size: 14px;
}
.subnav li a:hover {
color: #2D8692;
}
.subnav__group li a.current {
text-decoration: none;
font-family: "proxima-nova", sans-serif;
color: #2D8692;
font-weight: 600;
font-size: 14px;
}
.subnav__group--right {
float: right;
margin-right: 20px;
}
/* ---------------------------------------------- */
/* Homepage Header */
/* ---------------------------------------------- */
.page-header {
background: #2d8692;
color: #ffffff;
padding-top: 4rem;
}
.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4 {
color: #ffffff;
}
.page-header strong {
color: #ffffff;
}
/* ---------------------------------------------- */
/* Section */
/* ---------------------------------------------- */
section {
padding-top: 66px;
display: inline-block;
width: 100%;
position: relative;
}
.section__title {
font-family: "proxima-nova", sans-serif;
font-weight: 700;
font-size: 16px;
margin-bottom: 18px;
color: #404040;
}
/* Example Grid */
.grid__tile {
border: 1px solid #D6D6D6;
height: 80px;
border-radius: 4px;
background-color: #ECEAE4;
}
/* Example Tile */
.example__tile {
height: 300px;
background-color: #ffffff;
border-radius: 4px;
border: 1px solid #D6D6D6;
}
/* Text */
.fonts__title--light {
font-weight: 300;
font-size: 24px;
}
.fonts__title--regular {
font-weight: 400;
font-size: 24px;
}
.fonts__title--medium {
font-weight: 500;
font-size: 24px;
}
.fonts__title--semibold {
font-weight: 600;
font-size: 24px;
}
.fonts__title--bold {
font-weight: 700;
font-size: 24px;
}
/* ---------------------------------------------- */
/* Slider */
/* ---------------------------------------------- */
.slider {
background: #ffffff;
border-radius: 5px;
box-shadow: 0px 5px 10px -1px rgba(0, 0, 0, 0.1);
padding: 2rem 1.5rem;
position: relative;
}
.slider:before {
content: "";
background-image: url("/assets/images/left-nav-disabled.png");
background-size: contain;
background-repeat: no-repeat;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
left: -20px;
margin-top: -20px;
}
.slider:after {
content: "";
background-image: url("/assets/images/right-nav.png");
background-size: contain;
background-repeat: no-repeat;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
right: -20px;
margin-top: -20px;
}
.slider .slide-item {
display: inline-block;
vertical-align: middle;
width: 100px;
margin: 0 15px;
text-align: center;
}
.slider .slide-item__image {
background-color: #F4F4F4;
border-radius: 50%;
width: 90px;
height: 90px;
}
.slider .slide-item img {
width: 90px;
height: 90px;
}
.slider .slide-item__title {
color: #b2b2b2;
font-size: 14px;
padding-top: .25rem;
}
.slider .slide-item--add {
background-color: #F4F4F4;
}
/* ---------------------------------------------- */
/* News */
/* ---------------------------------------------- */
.news-item {
margin-bottom: 2rem;
}
.news-item__header {
display: block;
border-bottom: 1px solid #D6D6D6;
padding: 1rem 1.5rem;
}
.news-item__header .news-item__info {
padding-top: .125rem;
}
.news-item__header .news-item__info .news-item__title {
font-size: 16px;
font-weight: 700;
color: #404040;
margin-bottom: 8px;
}
.news-item__header .news-item__info .news-item__sub-title {
color: #9EA1A2;
font-size: 13px;
}
.news-item__content {
padding: 1rem 1.5rem;
}
.news-item__content > p {
font-size: 14px;
line-height: 1.8;
margin-bottom: 8px;
color: #7D7D7D;
}
.news-item__content a {
font-weight: 700;
text-decoration: none;
color: #2D8692;
}
.news-item__content a:hover {
text-decoration: underline;
}
/* ---------------------------------------------- */
/* Small Tiles */
/* ---------------------------------------------- */
a.tile__small {
padding: 32px 16px 20px;
box-sizing: border-box;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #D6D6D6;
border-radius: 5px 5px 4px 4px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
position: relative;
min-height: 340px;
transition: box-shadow .1s ease-out;
}
a.tile__small:hover {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
top: 1px;
}
a.tile__small:active {
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.15);
top: 2px;
}
.small__program--biomed,
.small__program--compsci,
.small__program--eng,
.small__program--gateway,
.small__program--shared,
.small__program--resource {
height: 9px;
border-radius: 4px 4px 0 0;
top: 0;
left: 0;
right: 0;
position: absolute;
}
ul.filter__list li span.launch {
background-color: #6BA539;
}
.small__program--shared,
ul.tile__programs > .shared,
ul.filter__list li span.shared {
background-color: #A8CEE2;
}
.small__program--resource,
ul.tile__programs > .resource,
ul.filter__list li span.resource {
background-color: #FCA311;
}
.small__program--ongoing,
ul.tile__programs > .ongoing,
ul.filter__list li span.ongoing {
background-color: #AADD6D;
}
.small__program--biomed,
ul.tile__programs > .biomed,
ul.filter__list li span.biomed {
background-color: #D14124;
}
.small__program--compsci,
ul.tile__programs > .compsci,
ul.filter__list li span.compsci {
background-color: #9EA1A2;
}
.small__program--eng,
ul.tile__programs > .eng,
ul.filter__list li span.eng {
background-color: #2D8692;
}
.small__program--gateway,
ul.tile__programs > .gateway,
ul.filter__list li span.gateway {
background-color: #EE7F4B;
}
.small__programName--shared,
.small__programName--launch,
.small__programName--gateway,
.small__programName--eng,
.small__programName--compsci,
.small__programName--biomed,
.small__programName--resource,
.small__programName--on-going {
font-size: 14px;
font-weight: 400;
line-height: 1.4;
margin-bottom: 6px;
}
.small__programName--shared {
color: #A8CEE2;
}
.small__programName--launch {
color: #6BA539;
}
.small__programName--gateway {
color: #EE7F4B;
}
.small__programName--eng {
color: #2D8692;
}
.small__programName--compsci {
color: #9EA1A2;
}
.small__programName--biomed {
color: #D14124;
}
.small__programName--resource {
color: #FCA311;
}
.small__programName--on-going {
color: #AADD6D;
}
.small__title {
font-size: 20px;
font-weight: 400;
color: #404040;
line-height: 1.4;
margin-bottom: 20px;
}
ul.tile__programs li {
margin-right: 6px;
}
ul.filter__list li span.launch,
ul.filter__list li span.gateway,
ul.filter__list li span.compsci,
ul.filter__list li span.eng,
ul.filter__list li span.biomed,
ul.filter__list li span.shared,
ul.filter__list li span.resource,
ul.filter__list li span.ongoing,
ul.filter__list li input {
margin-right: 14px;
}
ul.tile__programs li,
ul.filter__list li span.launch,
ul.filter__list li span.gateway,
ul.filter__list li span.compsci,
ul.filter__list li span.eng,
ul.filter__list li span.biomed,
ul.filter__list li span.shared,
ul.filter__list li span.resource,
ul.filter__list li span.ongoing {
width: 12px;
height: 12px;
border-radius: 100px;
display: inline-block;
}
ul.tile__tags {
margin-bottom: 30px;
}
.tile__tags li {
padding: 8px 10px;
background-color: #EFF3F3;
border-radius: 4px;
font-size: 12px;
color: #2D8692;
margin-right: 6px;
display: inline;
}
.tile__info--right {
font-weight: 500;
font-size: 14px;
color: #9EA1A2;
position: absolute;
right: 34px;
bottom: 36px;
}
.bottom-left {
position: absolute;
left: 18px;
bottom: 20px;
}
/* ---------------------------------------------- */
/* Large Tiles */
/* ---------------------------------------------- */
a.tile__large {
padding: 100px 16px 20px;
box-sizing: border-box;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #D6D6D6;
border-radius: 5px 5px 4px 4px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
position: relative;
min-height: 340px;
transition: box-shadow .1s ease-out;
}
a.tile__large:hover {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
top: 1px;
}
a.tile__large:active {
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.15);
top: 2px;
}
.large__program--biomed,
.large__program--compsci,
.large__program--eng,
.large__program--gateway {
padding: 20px;
border-radius: 4px 4px 0 0;
top: 0;
left: 0;
right: 0;
position: absolute;
}
.large__program--biomed {
background-color: #D14124;
}
.large__program--compsci {
background-color: #9EA1A2;
}
.large__program--eng {
background-color: #2D8692;
}
.large__program--gateway {
background-color: #EE7F4B;
}
.program__icon {
display: inline;
margin-right: 12px;
position: absolute;
top: 17px;
}
.large__title {
font-size: 20px;
font-weight: 300;
color: #ffffff;
line-height: 1.4;
display: inline;
padding-left: 40px;
}
.large__info--right {
font-weight: 500;
font-size: 14px;
color: #6BA539;
position: absolute;
right: 34px;
bottom: 36px;
}
/* ---------------------------------------------- */
/* Site Tiles */
/* ---------------------------------------------- */
a.tile__small--site {
padding: 20px 16px;
box-sizing: border-box;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #D6D6D6;
border-radius: 4px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
position: relative;
display: block;
min-height: 240px;
transition: box-shadow .1s ease-out;
}
a.tile__small--site:hover {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
top: 1px;
}
a.tile__small--site:active {
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.15);
top: 2px;
}
.site__title {
font-size: 20px;
font-weight: 400;
color: #404040;
line-height: 1.4;
margin-bottom: 8px;
}
.site__location {
font-weight: 300;
font-size: 14px;
color: #9EA1A2;
margin-bottom: 18px;
}
/* ---------------------------------------------- */
/* Filters */
/* ---------------------------------------------- */
.tile__small--dark {
padding: 20px 16px 8px;
background-color: #ECEAE4;
border: 1px solid #D6D6D6;
border-radius: 4px;
position: relative;
box-sizing: border-box;
margin-bottom: 24px;
}
.filter__title {
color: #404040;
font-size: 16px;
font-weight: 700;
line-height: 1.6;
border-bottom: 1px solid #D6D6D6;
padding-bottom: 12px;
margin-bottom: 28px;
}
.filter__list li {
margin-bottom: 20px;
}
.filter__list li a {
text-decoration: none;
font-size: 14px;
font-weight: 400;
color: #2D8692;
vertical-align: middle;
}
.filter__list li a:hover {
font-weight: 600;
color: #2D8692;
}
.filter__format,
.filter__resource {
margin-bottom: 40px;
}
/* Checkboxes */
input[type=checkbox].checkbox {
position: absolute;
z-index: -1000;
left: -1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=checkbox].checkbox + label.checkbox__label {
padding-left: 36px;
height: 23px;
display: inline-block;
line-height: 23px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 14px;
color: #404040;
vertical-align: middle;
cursor: pointer;
}
input[type=checkbox].checkbox:checked + label.checkbox__label {
background-position: 0 -23px;
}
label.checkbox__label {
background-image: url(http://jordanbrewer.com/_images/check.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
