├── .bowerrc ├── .gitignore ├── CHANGELOG.md ├── README.md ├── app.js ├── app.json ├── bower.json ├── config ├── admin.js └── public.js ├── gulpfile.js ├── package.json ├── public ├── css │ └── app.css ├── img │ └── stackoverflow.png └── js │ └── app.js ├── scrap └── stackoverflow-questions.js ├── scss ├── _instantsearch.sass ├── _settings.scss └── app.scss ├── views └── index.jade └── yarn.lock /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "public/bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components 3 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## Version 1.0 (November 19, 2015) 4 | 5 | Initial release. 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # StackOverflow powered by instantsearch.js 2 | 3 | This app grabs all content for a tag and builds a search engine with faceted navigation. 4 | 5 | Demo meteor.js https://is-so-test.herokuapp.com/ 6 | Demo algolia https://algolia-stackoverflow.herokuapp.com/ 7 | 8 | 9 | ## The heroku way 10 | 11 | [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy) 12 | 13 | ### Set env var 14 | 15 | Create an algolia account and choose which keywork on StackOverflow you want to index. 16 | 17 | ### Init Index 18 | 19 | - visit /grab (blank page, no feedback -> to improve) 20 | - then refresh / 21 | 22 | ### Notes 23 | 24 | Add heroku to your git clone of this repo 25 | 26 | ```heroku git:remote -a YOUR_HEROKU_APP_NAME``` 27 | 28 | ## Run locally 29 | 30 | - ```npm install``` 31 | - ```npm start``` 32 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //--------------------------------------------------- 2 | // Simple Node app to serve static content for heroku 3 | // -------------------------------------------------- 4 | 5 | var express = require('express') 6 | 7 | var config = require('./config/public.js') 8 | 9 | var scrap = require('./scrap/stackoverflow-questions.js') 10 | 11 | var CronJob = require('cron').CronJob; 12 | 13 | // set cron job every hour 14 | var job = new CronJob('00 00 * * * *', scrap, true, 'America/Los_Angeles'); 15 | 16 | var app = express(); 17 | 18 | app.set('view engine', 'jade'); 19 | 20 | app.use(express.static('public')); 21 | 22 | app.get('/', function (req, res) { 23 | res.render('index', { config: config}); 24 | }); 25 | 26 | app.get('/grab', function (req, res) { 27 | res.end(scrap); 28 | }); 29 | 30 | app.listen(process.env.PORT || 5000, function() { console.log('listening')}); 31 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "instantsearch-stackoverflow", 3 | "description": "Boilerplate for StackOverflow powered by Algolia's instantsearch.js", 4 | "repository": "https://github.com/shipow/instantsearch-stackoverflow", 5 | "logo": "https://raw.githubusercontent.com/Shipow/instantsearch-stackoverflow/master/public/img/stackoverflow.png", 6 | "keywords": ["stackoverflow", "algolia", "instantsearch"], 7 | "env": { 8 | "ALGOLIA_APP_ID": { 9 | "generator": null 10 | }, 11 | "ALGOLIA_SEARCH_KEY": { 12 | "value": null 13 | }, 14 | "ALGOLIA_WRITE_KEY": { 15 | "value": null 16 | }, 17 | "STACKOVERFLOW_KEYWORD": { 18 | "value": null 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "instantsearch-stackoverflow", 3 | "version": "1.0.0", 4 | "authors": [ 5 | "Shipow " 6 | ], 7 | "description": "Boilerplate for StackOverflow powered by Algolia's instantsearch.js", 8 | "main": "index.html", 9 | "license": "MIT", 10 | "homepage": "https://github.com/shipow/instantsearch-stackoverflow", 11 | "dependencies": { 12 | "foundation-sites": "zurb/foundation-sites-6#develop", 13 | "motion-ui": "~1.1.0" 14 | }, 15 | "ignore": [ 16 | "**/.*", 17 | "node_modules", 18 | "bower_components", 19 | "test", 20 | "tests" 21 | ], 22 | "private": true 23 | } 24 | -------------------------------------------------------------------------------- /config/admin.js: -------------------------------------------------------------------------------- 1 | var config = require('./public'); 2 | 3 | config.algolia.writeKey = process.env.ALGOLIA_WRITE_KEY || 'writeKey'; 4 | 5 | module.exports = config; 6 | -------------------------------------------------------------------------------- /config/public.js: -------------------------------------------------------------------------------- 1 | var config = {}; 2 | 3 | config.stackoverflow = {}; 4 | config.algolia = {}; 5 | 6 | config.stackoverflow.keyword = process.env.STACKOVERFLOW_KEYWORD || 'algolia'; 7 | config.algolia.appID = process.env.ALGOLIA_APP_ID || 'T2ZX9HO66V'; 8 | config.algolia.searchKey = process.env.ALGOLIA_SEARCH_KEY || '7119d2f6f1cd95224251ec2e490e824f'; 9 | 10 | module.exports = config; 11 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var $ = require('gulp-load-plugins')(); 3 | var browserSync = require('browser-sync').create(); 4 | 5 | var sassPaths = [ 6 | 'bower_components/foundation-sites/scss', 7 | 'bower_components/motion-ui/src' 8 | ]; 9 | 10 | gulp.task('sass', function() { 11 | return gulp.src('./scss/app.scss') 12 | .pipe($.sass({ 13 | includePaths: sassPaths 14 | }) 15 | .on('error', $.sass.logError)) 16 | .pipe($.autoprefixer({ 17 | browsers: ['last 2 versions', 'ie >= 9'] 18 | })) 19 | .pipe(gulp.dest('./public/css')) 20 | .pipe(browserSync.stream()); 21 | }); 22 | 23 | // Starts a test server, which you can view at http://localhost:8079 24 | gulp.task('server', ['sass'], function() { 25 | gulp.src('./') 26 | .pipe($.webserver({ 27 | port: 8079, 28 | host: 'localhost', 29 | fallback: 'index.html', 30 | livereload: true, 31 | open: true 32 | })); 33 | }); 34 | 35 | gulp.task('default', ['server'], function() { 36 | browserSync.init({ 37 | server: "./" 38 | }); 39 | gulp.watch(['./scss/**/*.scss','./scss/**/*.sass'], ['sass']); 40 | gulp.watch("./**/*.html").on('change', browserSync.reload); 41 | 42 | }); 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "instantsearch-stackoverflow", 3 | "description": "Boilerplate for StackOverflow powered by Algolia's instantsearch.js", 4 | "version": "1.0.0", 5 | "dependencies": { 6 | "algoliasearch": "^3.9.2", 7 | "async": "^1.5.0", 8 | "bower": "^1.8.8", 9 | "cron": "^1.0.9", 10 | "express": "^4.13.3", 11 | "jade": "^1.11.0", 12 | "lodash": "^4.17.13", 13 | "x-ray": "git://github.com/lapwinglabs/x-ray.git#bugfix/nested-crawling" 14 | }, 15 | "devDependencies": { 16 | "browser-sync": "^2.10.0", 17 | "gulp": "^3.9.0", 18 | "gulp-autoprefixer": "^2.2.0", 19 | "gulp-load-plugins": "^1.1.0", 20 | "gulp-preprocess": "^1.2.0", 21 | "gulp-sass": "^2.1.0", 22 | "gulp-webserver": "^0.9.1" 23 | }, 24 | "scripts": { 25 | "start": "node app.js", 26 | "dev": "gulp", 27 | "postinstall": "bower install", 28 | "scrap": "node scrap/stackoverflow-questions.js" 29 | }, 30 | "author": "Shipow ", 31 | "license": "MIT", 32 | "private": true 33 | } 34 | -------------------------------------------------------------------------------- /public/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | html { 9 | font-family: sans-serif; 10 | /* 1 */ 11 | -ms-text-size-adjust: 100%; 12 | /* 2 */ 13 | -webkit-text-size-adjust: 100%; 14 | /* 2 */ } 15 | 16 | /** 17 | * Remove default margin. 18 | */ 19 | body { 20 | margin: 0; } 21 | 22 | /* HTML5 display definitions 23 | ========================================================================== */ 24 | /** 25 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 26 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 27 | * and Firefox. 28 | * Correct `block` display not defined for `main` in IE 11. 29 | */ 30 | article, 31 | aside, 32 | details, 33 | figcaption, 34 | figure, 35 | footer, 36 | header, 37 | hgroup, 38 | main, 39 | menu, 40 | nav, 41 | section, 42 | summary { 43 | display: block; } 44 | 45 | /** 46 | * 1. Correct `inline-block` display not defined in IE 8/9. 47 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 48 | */ 49 | audio, 50 | canvas, 51 | progress, 52 | video { 53 | display: inline-block; 54 | /* 1 */ 55 | vertical-align: baseline; 56 | /* 2 */ } 57 | 58 | /** 59 | * Prevent modern browsers from displaying `audio` without controls. 60 | * Remove excess height in iOS 5 devices. 61 | */ 62 | audio:not([controls]) { 63 | display: none; 64 | height: 0; } 65 | 66 | /** 67 | * Address `[hidden]` styling not present in IE 8/9/10. 68 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 69 | */ 70 | [hidden], 71 | template { 72 | display: none; } 73 | 74 | /* Links 75 | ========================================================================== */ 76 | /** 77 | * Remove the gray background color from active links in IE 10. 78 | */ 79 | a { 80 | background-color: transparent; } 81 | 82 | /** 83 | * Improve readability when focused and also mouse hovered in all browsers. 84 | */ 85 | a:active, 86 | a:hover { 87 | outline: 0; } 88 | 89 | /* Text-level semantics 90 | ========================================================================== */ 91 | /** 92 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 93 | */ 94 | abbr[title] { 95 | border-bottom: 1px dotted; } 96 | 97 | /** 98 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 99 | */ 100 | b, 101 | strong { 102 | font-weight: bold; } 103 | 104 | /** 105 | * Address styling not present in Safari and Chrome. 106 | */ 107 | dfn { 108 | font-style: italic; } 109 | 110 | /** 111 | * Address variable `h1` font-size and margin within `section` and `article` 112 | * contexts in Firefox 4+, Safari, and Chrome. 113 | */ 114 | h1 { 115 | font-size: 2em; 116 | margin: 0.67em 0; } 117 | 118 | /** 119 | * Address styling not present in IE 8/9. 120 | */ 121 | mark { 122 | background: #ff0; 123 | color: #000; } 124 | 125 | /** 126 | * Address inconsistent and variable font size in all browsers. 127 | */ 128 | small { 129 | font-size: 80%; } 130 | 131 | /** 132 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 133 | */ 134 | sub, 135 | sup { 136 | font-size: 75%; 137 | line-height: 0; 138 | position: relative; 139 | vertical-align: baseline; } 140 | 141 | sup { 142 | top: -0.5em; } 143 | 144 | sub { 145 | bottom: -0.25em; } 146 | 147 | /* Embedded content 148 | ========================================================================== */ 149 | /** 150 | * Remove border when inside `a` element in IE 8/9/10. 151 | */ 152 | img { 153 | border: 0; } 154 | 155 | /** 156 | * Correct overflow not hidden in IE 9/10/11. 157 | */ 158 | svg:not(:root) { 159 | overflow: hidden; } 160 | 161 | /* Grouping content 162 | ========================================================================== */ 163 | /** 164 | * Address margin not present in IE 8/9 and Safari. 165 | */ 166 | figure { 167 | margin: 1em 40px; } 168 | 169 | /** 170 | * Address differences between Firefox and other browsers. 171 | */ 172 | hr { 173 | box-sizing: content-box; 174 | height: 0; } 175 | 176 | /** 177 | * Contain overflow in all browsers. 178 | */ 179 | pre { 180 | overflow: auto; } 181 | 182 | /** 183 | * Address odd `em`-unit font size rendering in all browsers. 184 | */ 185 | code, 186 | kbd, 187 | pre, 188 | samp { 189 | font-family: monospace, monospace; 190 | font-size: 1em; } 191 | 192 | /* Forms 193 | ========================================================================== */ 194 | /** 195 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 196 | * styling of `select`, unless a `border` property is set. 197 | */ 198 | /** 199 | * 1. Correct color not being inherited. 200 | * Known issue: affects color of disabled elements. 201 | * 2. Correct font properties not being inherited. 202 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 203 | */ 204 | button, 205 | input, 206 | optgroup, 207 | select, 208 | textarea { 209 | color: inherit; 210 | /* 1 */ 211 | font: inherit; 212 | /* 2 */ 213 | margin: 0; 214 | /* 3 */ } 215 | 216 | /** 217 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 218 | */ 219 | button { 220 | overflow: visible; } 221 | 222 | /** 223 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 224 | * All other form control elements do not inherit `text-transform` values. 225 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 226 | * Correct `select` style inheritance in Firefox. 227 | */ 228 | button, 229 | select { 230 | text-transform: none; } 231 | 232 | /** 233 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 234 | * and `video` controls. 235 | * 2. Correct inability to style clickable `input` types in iOS. 236 | * 3. Improve usability and consistency of cursor style between image-type 237 | * `input` and others. 238 | */ 239 | button, 240 | html input[type="button"], 241 | input[type="reset"], 242 | input[type="submit"] { 243 | -webkit-appearance: button; 244 | /* 2 */ 245 | cursor: pointer; 246 | /* 3 */ } 247 | 248 | /** 249 | * Re-set default cursor for disabled elements. 250 | */ 251 | button[disabled], 252 | html input[disabled] { 253 | cursor: default; } 254 | 255 | /** 256 | * Remove inner padding and border in Firefox 4+. 257 | */ 258 | button::-moz-focus-inner, 259 | input::-moz-focus-inner { 260 | border: 0; 261 | padding: 0; } 262 | 263 | /** 264 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 265 | * the UA stylesheet. 266 | */ 267 | input { 268 | line-height: normal; } 269 | 270 | /** 271 | * It's recommended that you don't attempt to style these elements. 272 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 273 | * 274 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 275 | * 2. Remove excess padding in IE 8/9/10. 276 | */ 277 | input[type="checkbox"], 278 | input[type="radio"] { 279 | box-sizing: border-box; 280 | /* 1 */ 281 | padding: 0; 282 | /* 2 */ } 283 | 284 | /** 285 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 286 | * `font-size` values of the `input`, it causes the cursor style of the 287 | * decrement button to change from `default` to `text`. 288 | */ 289 | input[type="number"]::-webkit-inner-spin-button, 290 | input[type="number"]::-webkit-outer-spin-button { 291 | height: auto; } 292 | 293 | /** 294 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 295 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 296 | * (include `-moz` to future-proof). 297 | */ 298 | input[type="search"] { 299 | -webkit-appearance: textfield; 300 | /* 1 */ 301 | /* 2 */ 302 | box-sizing: content-box; } 303 | 304 | /** 305 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 306 | * Safari (but not Chrome) clips the cancel button when the search input has 307 | * padding (and `textfield` appearance). 308 | */ 309 | input[type="search"]::-webkit-search-cancel-button, 310 | input[type="search"]::-webkit-search-decoration { 311 | -webkit-appearance: none; } 312 | 313 | /** 314 | * Define consistent border, margin, and padding. 315 | */ 316 | fieldset { 317 | border: 1px solid #c0c0c0; 318 | margin: 0 2px; 319 | padding: 0.35em 0.625em 0.75em; } 320 | 321 | /** 322 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 323 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 324 | */ 325 | legend { 326 | border: 0; 327 | /* 1 */ 328 | padding: 0; 329 | /* 2 */ } 330 | 331 | /** 332 | * Remove default vertical scrollbar in IE 8/9/10/11. 333 | */ 334 | textarea { 335 | overflow: auto; } 336 | 337 | /** 338 | * Don't inherit the `font-weight` (applied by a rule above). 339 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 340 | */ 341 | optgroup { 342 | font-weight: bold; } 343 | 344 | /* Tables 345 | ========================================================================== */ 346 | /** 347 | * Remove most spacing between table cells. 348 | */ 349 | table { 350 | border-collapse: collapse; 351 | border-spacing: 0; } 352 | 353 | td, 354 | th { 355 | padding: 0; } 356 | 357 | body.is-reveal-open { 358 | overflow: hidden; } 359 | 360 | .foundation-mq { 361 | font-family: "small=0em&medium=32em&large=64em&xlarge=75em&xxlarge=90em"; } 362 | 363 | .slide-in-down.mui-enter, .slide-in-left.mui-enter, .slide-in-up.mui-enter, .slide-in-right.mui-enter, .slide-out-down.mui-leave, .slide-out-right.mui-leave, .slide-out-up.mui-leave, .slide-out-left.mui-leave, .fade-in.mui-enter, .fade-out.mui-leave, .hinge-in-from-top.mui-enter, .hinge-in-from-right.mui-enter, .hinge-in-from-bottom.mui-enter, .hinge-in-from-left.mui-enter, .hinge-in-from-middle-x.mui-enter, .hinge-in-from-middle-y.mui-enter, .hinge-out-from-top.mui-leave, .hinge-out-from-right.mui-leave, .hinge-out-from-bottom.mui-leave, .hinge-out-from-left.mui-leave, .hinge-out-from-middle-x.mui-leave, .hinge-out-from-middle-y.mui-leave, .scale-in-up.mui-enter, .scale-in-down.mui-enter, .scale-out-up.mui-leave, .scale-out-down.mui-leave, .spin-in.mui-enter, .spin-out.mui-leave, .spin-in-ccw.mui-enter, .spin-out-ccw.mui-leave { 364 | transition-duration: 500ms; 365 | transition-timing-function: linear; } 366 | 367 | html, 368 | body { 369 | font-size: 100%; 370 | box-sizing: border-box; } 371 | 372 | *, 373 | *:before, 374 | *:after { 375 | box-sizing: inherit; } 376 | 377 | body { 378 | padding: 0; 379 | margin: 0; 380 | font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 381 | font-weight: normal; 382 | line-height: 1.5; 383 | color: #0a0a0a; 384 | background: #fefefe; 385 | -webkit-font-smoothing: antialiased; 386 | -moz-osx-font-smoothing: grayscale; } 387 | 388 | img { 389 | max-width: 100%; 390 | height: auto; 391 | -ms-interpolation-mode: bicubic; 392 | display: inline-block; 393 | vertical-align: middle; } 394 | 395 | textarea { 396 | height: auto; 397 | min-height: 50px; 398 | border-radius: 0; } 399 | 400 | select { 401 | width: 100%; 402 | border-radius: 0; } 403 | 404 | #map_canvas img, 405 | #map_canvas embed, 406 | #map_canvas object, 407 | .map_canvas img, 408 | .map_canvas embed, 409 | .map_canvas object, 410 | .mqa-display img, 411 | .mqa-display embed, 412 | .mqa-display object { 413 | max-width: none !important; } 414 | 415 | button { 416 | -webkit-appearance: none; 417 | -moz-appearance: none; 418 | background: transparent; 419 | padding: 0; 420 | border: 0; 421 | border-radius: 0; 422 | line-height: 1; } 423 | 424 | .row { 425 | max-width: 75rem; 426 | margin-left: auto; 427 | margin-right: auto; } 428 | .row::before, .row::after { 429 | content: ' '; 430 | display: table; } 431 | .row::after { 432 | clear: both; } 433 | .row.collapse > .column, .row.collapse > .columns { 434 | padding-left: 0; 435 | padding-right: 0; } 436 | .row .row { 437 | margin-left: -0.9375rem; 438 | margin-right: -0.9375rem; } 439 | .row .row.collapse { 440 | margin-left: 0; 441 | margin-right: 0; } 442 | .row.small-collapse > .column, .row.small-collapse > .columns { 443 | padding-left: 0; 444 | padding-right: 0; } 445 | .row.small-uncollapse > .column, .row.small-uncollapse > .columns { 446 | padding-left: 30px; 447 | padding-right: 30px; } 448 | @media screen and (min-width: 32em) { 449 | .row.medium-collapse > .column, .row.medium-collapse > .columns { 450 | padding-left: 0; 451 | padding-right: 0; } 452 | .row.medium-uncollapse > .column, .row.medium-uncollapse > .columns { 453 | padding-left: 30px; 454 | padding-right: 30px; } } 455 | @media screen and (min-width: 64em) { 456 | .row.large-collapse > .column, .row.large-collapse > .columns { 457 | padding-left: 0; 458 | padding-right: 0; } 459 | .row.large-uncollapse > .column, .row.large-uncollapse > .columns { 460 | padding-left: 30px; 461 | padding-right: 30px; } } 462 | .row.expanded { 463 | max-width: none; } 464 | 465 | .column, .columns { 466 | width: 100%; 467 | float: left; 468 | padding-left: 0.9375rem; 469 | padding-right: 0.9375rem; } 470 | .column:last-child, .columns:last-child { 471 | float: right; } 472 | .column.end, .end.columns { 473 | float: left; } 474 | 475 | .column.row, .row.columns { 476 | float: none; } 477 | 478 | .small-1 { 479 | width: 8.33333%; } 480 | 481 | .small-push-1 { 482 | position: relative; 483 | left: 8.33333%; } 484 | 485 | .small-pull-1 { 486 | position: relative; 487 | left: -8.33333%; } 488 | 489 | .small-offset-0 { 490 | margin-left: 0%; } 491 | 492 | .small-2 { 493 | width: 16.66667%; } 494 | 495 | .small-push-2 { 496 | position: relative; 497 | left: 16.66667%; } 498 | 499 | .small-pull-2 { 500 | position: relative; 501 | left: -16.66667%; } 502 | 503 | .small-offset-1 { 504 | margin-left: 8.33333%; } 505 | 506 | .small-3 { 507 | width: 25%; } 508 | 509 | .small-push-3 { 510 | position: relative; 511 | left: 25%; } 512 | 513 | .small-pull-3 { 514 | position: relative; 515 | left: -25%; } 516 | 517 | .small-offset-2 { 518 | margin-left: 16.66667%; } 519 | 520 | .small-4 { 521 | width: 33.33333%; } 522 | 523 | .small-push-4 { 524 | position: relative; 525 | left: 33.33333%; } 526 | 527 | .small-pull-4 { 528 | position: relative; 529 | left: -33.33333%; } 530 | 531 | .small-offset-3 { 532 | margin-left: 25%; } 533 | 534 | .small-5 { 535 | width: 41.66667%; } 536 | 537 | .small-push-5 { 538 | position: relative; 539 | left: 41.66667%; } 540 | 541 | .small-pull-5 { 542 | position: relative; 543 | left: -41.66667%; } 544 | 545 | .small-offset-4 { 546 | margin-left: 33.33333%; } 547 | 548 | .small-6 { 549 | width: 50%; } 550 | 551 | .small-push-6 { 552 | position: relative; 553 | left: 50%; } 554 | 555 | .small-pull-6 { 556 | position: relative; 557 | left: -50%; } 558 | 559 | .small-offset-5 { 560 | margin-left: 41.66667%; } 561 | 562 | .small-7 { 563 | width: 58.33333%; } 564 | 565 | .small-push-7 { 566 | position: relative; 567 | left: 58.33333%; } 568 | 569 | .small-pull-7 { 570 | position: relative; 571 | left: -58.33333%; } 572 | 573 | .small-offset-6 { 574 | margin-left: 50%; } 575 | 576 | .small-8 { 577 | width: 66.66667%; } 578 | 579 | .small-push-8 { 580 | position: relative; 581 | left: 66.66667%; } 582 | 583 | .small-pull-8 { 584 | position: relative; 585 | left: -66.66667%; } 586 | 587 | .small-offset-7 { 588 | margin-left: 58.33333%; } 589 | 590 | .small-9 { 591 | width: 75%; } 592 | 593 | .small-push-9 { 594 | position: relative; 595 | left: 75%; } 596 | 597 | .small-pull-9 { 598 | position: relative; 599 | left: -75%; } 600 | 601 | .small-offset-8 { 602 | margin-left: 66.66667%; } 603 | 604 | .small-10 { 605 | width: 83.33333%; } 606 | 607 | .small-push-10 { 608 | position: relative; 609 | left: 83.33333%; } 610 | 611 | .small-pull-10 { 612 | position: relative; 613 | left: -83.33333%; } 614 | 615 | .small-offset-9 { 616 | margin-left: 75%; } 617 | 618 | .small-11 { 619 | width: 91.66667%; } 620 | 621 | .small-push-11 { 622 | position: relative; 623 | left: 91.66667%; } 624 | 625 | .small-pull-11 { 626 | position: relative; 627 | left: -91.66667%; } 628 | 629 | .small-offset-10 { 630 | margin-left: 83.33333%; } 631 | 632 | .small-12 { 633 | width: 100%; } 634 | 635 | .small-offset-11 { 636 | margin-left: 91.66667%; } 637 | 638 | .small-up-1 .column, .small-up-1 .columns { 639 | width: 100%; 640 | float: left; } 641 | .small-up-1 .column:nth-of-type(1n), .small-up-1 .columns:nth-of-type(1n) { 642 | clear: none; } 643 | .small-up-1 .column:nth-of-type(1n+1), .small-up-1 .columns:nth-of-type(1n+1) { 644 | clear: both; } 645 | 646 | .small-up-2 .column, .small-up-2 .columns { 647 | width: 50%; 648 | float: left; } 649 | .small-up-2 .column:nth-of-type(1n), .small-up-2 .columns:nth-of-type(1n) { 650 | clear: none; } 651 | .small-up-2 .column:nth-of-type(2n+1), .small-up-2 .columns:nth-of-type(2n+1) { 652 | clear: both; } 653 | 654 | .small-up-3 .column, .small-up-3 .columns { 655 | width: 33.33333%; 656 | float: left; } 657 | .small-up-3 .column:nth-of-type(1n), .small-up-3 .columns:nth-of-type(1n) { 658 | clear: none; } 659 | .small-up-3 .column:nth-of-type(3n+1), .small-up-3 .columns:nth-of-type(3n+1) { 660 | clear: both; } 661 | 662 | .small-up-4 .column, .small-up-4 .columns { 663 | width: 25%; 664 | float: left; } 665 | .small-up-4 .column:nth-of-type(1n), .small-up-4 .columns:nth-of-type(1n) { 666 | clear: none; } 667 | .small-up-4 .column:nth-of-type(4n+1), .small-up-4 .columns:nth-of-type(4n+1) { 668 | clear: both; } 669 | 670 | .small-up-5 .column, .small-up-5 .columns { 671 | width: 20%; 672 | float: left; } 673 | .small-up-5 .column:nth-of-type(1n), .small-up-5 .columns:nth-of-type(1n) { 674 | clear: none; } 675 | .small-up-5 .column:nth-of-type(5n+1), .small-up-5 .columns:nth-of-type(5n+1) { 676 | clear: both; } 677 | 678 | .small-up-6 .column, .small-up-6 .columns { 679 | width: 16.66667%; 680 | float: left; } 681 | .small-up-6 .column:nth-of-type(1n), .small-up-6 .columns:nth-of-type(1n) { 682 | clear: none; } 683 | .small-up-6 .column:nth-of-type(6n+1), .small-up-6 .columns:nth-of-type(6n+1) { 684 | clear: both; } 685 | 686 | .column.small-centered, .small-centered.columns { 687 | float: none; 688 | margin-left: auto; 689 | margin-right: auto; } 690 | 691 | .small-uncenter, 692 | .small-push-0, 693 | .small-pull-0 { 694 | position: static; 695 | margin-left: 0; 696 | margin-right: 0; } 697 | 698 | @media screen and (min-width: 32em) { 699 | .medium-1 { 700 | width: 8.33333%; } 701 | .medium-push-1 { 702 | position: relative; 703 | left: 8.33333%; } 704 | .medium-pull-1 { 705 | position: relative; 706 | left: -8.33333%; } 707 | .medium-offset-0 { 708 | margin-left: 0%; } 709 | .medium-2 { 710 | width: 16.66667%; } 711 | .medium-push-2 { 712 | position: relative; 713 | left: 16.66667%; } 714 | .medium-pull-2 { 715 | position: relative; 716 | left: -16.66667%; } 717 | .medium-offset-1 { 718 | margin-left: 8.33333%; } 719 | .medium-3 { 720 | width: 25%; } 721 | .medium-push-3 { 722 | position: relative; 723 | left: 25%; } 724 | .medium-pull-3 { 725 | position: relative; 726 | left: -25%; } 727 | .medium-offset-2 { 728 | margin-left: 16.66667%; } 729 | .medium-4 { 730 | width: 33.33333%; } 731 | .medium-push-4 { 732 | position: relative; 733 | left: 33.33333%; } 734 | .medium-pull-4 { 735 | position: relative; 736 | left: -33.33333%; } 737 | .medium-offset-3 { 738 | margin-left: 25%; } 739 | .medium-5 { 740 | width: 41.66667%; } 741 | .medium-push-5 { 742 | position: relative; 743 | left: 41.66667%; } 744 | .medium-pull-5 { 745 | position: relative; 746 | left: -41.66667%; } 747 | .medium-offset-4 { 748 | margin-left: 33.33333%; } 749 | .medium-6 { 750 | width: 50%; } 751 | .medium-push-6 { 752 | position: relative; 753 | left: 50%; } 754 | .medium-pull-6 { 755 | position: relative; 756 | left: -50%; } 757 | .medium-offset-5 { 758 | margin-left: 41.66667%; } 759 | .medium-7 { 760 | width: 58.33333%; } 761 | .medium-push-7 { 762 | position: relative; 763 | left: 58.33333%; } 764 | .medium-pull-7 { 765 | position: relative; 766 | left: -58.33333%; } 767 | .medium-offset-6 { 768 | margin-left: 50%; } 769 | .medium-8 { 770 | width: 66.66667%; } 771 | .medium-push-8 { 772 | position: relative; 773 | left: 66.66667%; } 774 | .medium-pull-8 { 775 | position: relative; 776 | left: -66.66667%; } 777 | .medium-offset-7 { 778 | margin-left: 58.33333%; } 779 | .medium-9 { 780 | width: 75%; } 781 | .medium-push-9 { 782 | position: relative; 783 | left: 75%; } 784 | .medium-pull-9 { 785 | position: relative; 786 | left: -75%; } 787 | .medium-offset-8 { 788 | margin-left: 66.66667%; } 789 | .medium-10 { 790 | width: 83.33333%; } 791 | .medium-push-10 { 792 | position: relative; 793 | left: 83.33333%; } 794 | .medium-pull-10 { 795 | position: relative; 796 | left: -83.33333%; } 797 | .medium-offset-9 { 798 | margin-left: 75%; } 799 | .medium-11 { 800 | width: 91.66667%; } 801 | .medium-push-11 { 802 | position: relative; 803 | left: 91.66667%; } 804 | .medium-pull-11 { 805 | position: relative; 806 | left: -91.66667%; } 807 | .medium-offset-10 { 808 | margin-left: 83.33333%; } 809 | .medium-12 { 810 | width: 100%; } 811 | .medium-offset-11 { 812 | margin-left: 91.66667%; } 813 | .medium-up-1 .column, .medium-up-1 .columns { 814 | width: 100%; 815 | float: left; } 816 | .medium-up-1 .column:nth-of-type(1n), .medium-up-1 .columns:nth-of-type(1n) { 817 | clear: none; } 818 | .medium-up-1 .column:nth-of-type(1n+1), .medium-up-1 .columns:nth-of-type(1n+1) { 819 | clear: both; } 820 | .medium-up-2 .column, .medium-up-2 .columns { 821 | width: 50%; 822 | float: left; } 823 | .medium-up-2 .column:nth-of-type(1n), .medium-up-2 .columns:nth-of-type(1n) { 824 | clear: none; } 825 | .medium-up-2 .column:nth-of-type(2n+1), .medium-up-2 .columns:nth-of-type(2n+1) { 826 | clear: both; } 827 | .medium-up-3 .column, .medium-up-3 .columns { 828 | width: 33.33333%; 829 | float: left; } 830 | .medium-up-3 .column:nth-of-type(1n), .medium-up-3 .columns:nth-of-type(1n) { 831 | clear: none; } 832 | .medium-up-3 .column:nth-of-type(3n+1), .medium-up-3 .columns:nth-of-type(3n+1) { 833 | clear: both; } 834 | .medium-up-4 .column, .medium-up-4 .columns { 835 | width: 25%; 836 | float: left; } 837 | .medium-up-4 .column:nth-of-type(1n), .medium-up-4 .columns:nth-of-type(1n) { 838 | clear: none; } 839 | .medium-up-4 .column:nth-of-type(4n+1), .medium-up-4 .columns:nth-of-type(4n+1) { 840 | clear: both; } 841 | .medium-up-5 .column, .medium-up-5 .columns { 842 | width: 20%; 843 | float: left; } 844 | .medium-up-5 .column:nth-of-type(1n), .medium-up-5 .columns:nth-of-type(1n) { 845 | clear: none; } 846 | .medium-up-5 .column:nth-of-type(5n+1), .medium-up-5 .columns:nth-of-type(5n+1) { 847 | clear: both; } 848 | .medium-up-6 .column, .medium-up-6 .columns { 849 | width: 16.66667%; 850 | float: left; } 851 | .medium-up-6 .column:nth-of-type(1n), .medium-up-6 .columns:nth-of-type(1n) { 852 | clear: none; } 853 | .medium-up-6 .column:nth-of-type(6n+1), .medium-up-6 .columns:nth-of-type(6n+1) { 854 | clear: both; } 855 | .column.medium-centered, .medium-centered.columns { 856 | float: none; 857 | margin-left: auto; 858 | margin-right: auto; } 859 | .medium-uncenter, 860 | .medium-push-0, 861 | .medium-pull-0 { 862 | position: static; 863 | margin-left: 0; 864 | margin-right: 0; } } 865 | 866 | @media screen and (min-width: 64em) { 867 | .large-1 { 868 | width: 8.33333%; } 869 | .large-push-1 { 870 | position: relative; 871 | left: 8.33333%; } 872 | .large-pull-1 { 873 | position: relative; 874 | left: -8.33333%; } 875 | .large-offset-0 { 876 | margin-left: 0%; } 877 | .large-2 { 878 | width: 16.66667%; } 879 | .large-push-2 { 880 | position: relative; 881 | left: 16.66667%; } 882 | .large-pull-2 { 883 | position: relative; 884 | left: -16.66667%; } 885 | .large-offset-1 { 886 | margin-left: 8.33333%; } 887 | .large-3 { 888 | width: 25%; } 889 | .large-push-3 { 890 | position: relative; 891 | left: 25%; } 892 | .large-pull-3 { 893 | position: relative; 894 | left: -25%; } 895 | .large-offset-2 { 896 | margin-left: 16.66667%; } 897 | .large-4 { 898 | width: 33.33333%; } 899 | .large-push-4 { 900 | position: relative; 901 | left: 33.33333%; } 902 | .large-pull-4 { 903 | position: relative; 904 | left: -33.33333%; } 905 | .large-offset-3 { 906 | margin-left: 25%; } 907 | .large-5 { 908 | width: 41.66667%; } 909 | .large-push-5 { 910 | position: relative; 911 | left: 41.66667%; } 912 | .large-pull-5 { 913 | position: relative; 914 | left: -41.66667%; } 915 | .large-offset-4 { 916 | margin-left: 33.33333%; } 917 | .large-6 { 918 | width: 50%; } 919 | .large-push-6 { 920 | position: relative; 921 | left: 50%; } 922 | .large-pull-6 { 923 | position: relative; 924 | left: -50%; } 925 | .large-offset-5 { 926 | margin-left: 41.66667%; } 927 | .large-7 { 928 | width: 58.33333%; } 929 | .large-push-7 { 930 | position: relative; 931 | left: 58.33333%; } 932 | .large-pull-7 { 933 | position: relative; 934 | left: -58.33333%; } 935 | .large-offset-6 { 936 | margin-left: 50%; } 937 | .large-8 { 938 | width: 66.66667%; } 939 | .large-push-8 { 940 | position: relative; 941 | left: 66.66667%; } 942 | .large-pull-8 { 943 | position: relative; 944 | left: -66.66667%; } 945 | .large-offset-7 { 946 | margin-left: 58.33333%; } 947 | .large-9 { 948 | width: 75%; } 949 | .large-push-9 { 950 | position: relative; 951 | left: 75%; } 952 | .large-pull-9 { 953 | position: relative; 954 | left: -75%; } 955 | .large-offset-8 { 956 | margin-left: 66.66667%; } 957 | .large-10 { 958 | width: 83.33333%; } 959 | .large-push-10 { 960 | position: relative; 961 | left: 83.33333%; } 962 | .large-pull-10 { 963 | position: relative; 964 | left: -83.33333%; } 965 | .large-offset-9 { 966 | margin-left: 75%; } 967 | .large-11 { 968 | width: 91.66667%; } 969 | .large-push-11 { 970 | position: relative; 971 | left: 91.66667%; } 972 | .large-pull-11 { 973 | position: relative; 974 | left: -91.66667%; } 975 | .large-offset-10 { 976 | margin-left: 83.33333%; } 977 | .large-12 { 978 | width: 100%; } 979 | .large-offset-11 { 980 | margin-left: 91.66667%; } 981 | .large-up-1 .column, .large-up-1 .columns { 982 | width: 100%; 983 | float: left; } 984 | .large-up-1 .column:nth-of-type(1n), .large-up-1 .columns:nth-of-type(1n) { 985 | clear: none; } 986 | .large-up-1 .column:nth-of-type(1n+1), .large-up-1 .columns:nth-of-type(1n+1) { 987 | clear: both; } 988 | .large-up-2 .column, .large-up-2 .columns { 989 | width: 50%; 990 | float: left; } 991 | .large-up-2 .column:nth-of-type(1n), .large-up-2 .columns:nth-of-type(1n) { 992 | clear: none; } 993 | .large-up-2 .column:nth-of-type(2n+1), .large-up-2 .columns:nth-of-type(2n+1) { 994 | clear: both; } 995 | .large-up-3 .column, .large-up-3 .columns { 996 | width: 33.33333%; 997 | float: left; } 998 | .large-up-3 .column:nth-of-type(1n), .large-up-3 .columns:nth-of-type(1n) { 999 | clear: none; } 1000 | .large-up-3 .column:nth-of-type(3n+1), .large-up-3 .columns:nth-of-type(3n+1) { 1001 | clear: both; } 1002 | .large-up-4 .column, .large-up-4 .columns { 1003 | width: 25%; 1004 | float: left; } 1005 | .large-up-4 .column:nth-of-type(1n), .large-up-4 .columns:nth-of-type(1n) { 1006 | clear: none; } 1007 | .large-up-4 .column:nth-of-type(4n+1), .large-up-4 .columns:nth-of-type(4n+1) { 1008 | clear: both; } 1009 | .large-up-5 .column, .large-up-5 .columns { 1010 | width: 20%; 1011 | float: left; } 1012 | .large-up-5 .column:nth-of-type(1n), .large-up-5 .columns:nth-of-type(1n) { 1013 | clear: none; } 1014 | .large-up-5 .column:nth-of-type(5n+1), .large-up-5 .columns:nth-of-type(5n+1) { 1015 | clear: both; } 1016 | .large-up-6 .column, .large-up-6 .columns { 1017 | width: 16.66667%; 1018 | float: left; } 1019 | .large-up-6 .column:nth-of-type(1n), .large-up-6 .columns:nth-of-type(1n) { 1020 | clear: none; } 1021 | .large-up-6 .column:nth-of-type(6n+1), .large-up-6 .columns:nth-of-type(6n+1) { 1022 | clear: both; } 1023 | .column.large-centered, .large-centered.columns { 1024 | float: none; 1025 | margin-left: auto; 1026 | margin-right: auto; } 1027 | .large-uncenter, 1028 | .large-push-0, 1029 | .large-pull-0 { 1030 | position: static; 1031 | margin-left: 0; 1032 | margin-right: 0; } } 1033 | 1034 | div, 1035 | dl, 1036 | dt, 1037 | dd, 1038 | ul, 1039 | ol, 1040 | li, 1041 | h1, 1042 | h2, 1043 | h3, 1044 | h4, 1045 | h5, 1046 | h6, 1047 | pre, 1048 | form, 1049 | p, 1050 | blockquote, 1051 | th, 1052 | td { 1053 | margin: 0; 1054 | padding: 0; } 1055 | 1056 | p { 1057 | font-size: inherit; 1058 | line-height: 1.6; 1059 | margin-bottom: 1rem; 1060 | text-rendering: optimizeLegibility; } 1061 | 1062 | em, 1063 | i { 1064 | font-style: italic; 1065 | line-height: inherit; } 1066 | 1067 | strong, 1068 | b { 1069 | font-weight: bold; 1070 | line-height: inherit; } 1071 | 1072 | small { 1073 | font-size: 80%; 1074 | line-height: inherit; } 1075 | 1076 | h1, 1077 | h2, 1078 | h3, 1079 | h4, 1080 | h5, 1081 | h6 { 1082 | font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 1083 | font-weight: normal; 1084 | font-style: normal; 1085 | color: inherit; 1086 | text-rendering: optimizeLegibility; 1087 | margin-top: 0; 1088 | margin-bottom: 0.5rem; 1089 | line-height: 1.4; } 1090 | h1 small, 1091 | h2 small, 1092 | h3 small, 1093 | h4 small, 1094 | h5 small, 1095 | h6 small { 1096 | color: #cacaca; 1097 | line-height: 0; } 1098 | 1099 | h1 { 1100 | font-size: 1.5rem; } 1101 | 1102 | h2 { 1103 | font-size: 1.25rem; } 1104 | 1105 | h3 { 1106 | font-size: 1.1875rem; } 1107 | 1108 | h4 { 1109 | font-size: 1.125rem; } 1110 | 1111 | h5 { 1112 | font-size: 1.0625rem; } 1113 | 1114 | h6 { 1115 | font-size: 1rem; } 1116 | 1117 | @media screen and (min-width: 32em) { 1118 | h1 { 1119 | font-size: 3rem; } 1120 | h2 { 1121 | font-size: 2.5rem; } 1122 | h3 { 1123 | font-size: 1.9375rem; } 1124 | h4 { 1125 | font-size: 1.5625rem; } 1126 | h5 { 1127 | font-size: 1.25rem; } 1128 | h6 { 1129 | font-size: 1rem; } } 1130 | 1131 | a { 1132 | color: #2199e8; 1133 | text-decoration: none; 1134 | line-height: inherit; 1135 | cursor: pointer; } 1136 | a:hover, a:focus { 1137 | color: #1585cf; } 1138 | a img { 1139 | border: 0; } 1140 | 1141 | hr { 1142 | max-width: 75rem; 1143 | height: 0; 1144 | border-top: 0; 1145 | border-bottom: 1px solid #cacaca; 1146 | margin: 1.25rem auto; 1147 | clear: both; } 1148 | 1149 | ul, 1150 | ol, 1151 | dl { 1152 | line-height: 1.6; 1153 | margin-bottom: 1rem; 1154 | list-style-position: outside; } 1155 | 1156 | li { 1157 | font-size: inherit; } 1158 | 1159 | ul { 1160 | list-style-type: disc; 1161 | margin-left: 1.25rem; } 1162 | 1163 | ol { 1164 | margin-left: 1.25rem; } 1165 | 1166 | ul ul, ol ul, ul ol, ol ol { 1167 | margin-left: 1.25rem; 1168 | margin-bottom: 0; 1169 | list-style-type: inherit; } 1170 | 1171 | dl { 1172 | margin-bottom: 1rem; } 1173 | dl dt { 1174 | margin-bottom: 0.3rem; 1175 | font-weight: bold; } 1176 | 1177 | blockquote { 1178 | margin: 0 0 1rem; 1179 | padding: 0.5625rem 1.25rem 0 1.1875rem; 1180 | border-left: 1px solid #cacaca; } 1181 | blockquote, blockquote p { 1182 | line-height: 1.6; 1183 | color: #8a8a8a; } 1184 | 1185 | cite { 1186 | display: block; 1187 | font-size: 0.8125rem; 1188 | color: #8a8a8a; } 1189 | cite:before { 1190 | content: '\2014 \0020'; } 1191 | 1192 | abbr { 1193 | color: #0a0a0a; 1194 | cursor: help; 1195 | border-bottom: 1px dotted #0a0a0a; } 1196 | 1197 | code { 1198 | font-family: Consolas, "Liberation Mono", Courier, monospace; 1199 | font-weight: normal; 1200 | color: #0a0a0a; 1201 | background-color: #e6e6e6; 1202 | border: 1px solid #cacaca; 1203 | padding: 0.125rem 0.3125rem 0.0625rem; } 1204 | 1205 | kbd { 1206 | padding: 0.125rem 0.25rem 0; 1207 | margin: 0; 1208 | background-color: #e6e6e6; 1209 | color: #0a0a0a; 1210 | font-family: Consolas, "Liberation Mono", Courier, monospace; } 1211 | 1212 | .subheader { 1213 | margin-top: 0.2rem; 1214 | margin-bottom: 0.5rem; 1215 | font-weight: normal; 1216 | line-height: 1.4; 1217 | color: #8a8a8a; } 1218 | 1219 | .lead { 1220 | font-size: 125%; 1221 | line-height: 1.6; } 1222 | 1223 | .stat { 1224 | font-size: 2.5rem; 1225 | line-height: 1; } 1226 | p + .stat { 1227 | margin-top: -1rem; } 1228 | 1229 | .no-bullet { 1230 | margin-left: 0; 1231 | list-style: none; } 1232 | 1233 | .text-left { 1234 | text-align: left; } 1235 | 1236 | @media screen and (min-width: 32em) { 1237 | .medium-text-left { 1238 | text-align: left; } } 1239 | 1240 | @media screen and (min-width: 64em) { 1241 | .large-text-left { 1242 | text-align: left; } } 1243 | 1244 | .text-right { 1245 | text-align: right; } 1246 | 1247 | @media screen and (min-width: 32em) { 1248 | .medium-text-right { 1249 | text-align: right; } } 1250 | 1251 | @media screen and (min-width: 64em) { 1252 | .large-text-right { 1253 | text-align: right; } } 1254 | 1255 | .text-center { 1256 | text-align: center; } 1257 | 1258 | @media screen and (min-width: 32em) { 1259 | .medium-text-center { 1260 | text-align: center; } } 1261 | 1262 | @media screen and (min-width: 64em) { 1263 | .large-text-center { 1264 | text-align: center; } } 1265 | 1266 | .text-justify { 1267 | text-align: justify; } 1268 | 1269 | @media screen and (min-width: 32em) { 1270 | .medium-text-justify { 1271 | text-align: justify; } } 1272 | 1273 | @media screen and (min-width: 64em) { 1274 | .large-text-justify { 1275 | text-align: justify; } } 1276 | 1277 | .show-for-print { 1278 | display: none !important; } 1279 | 1280 | @media print { 1281 | * { 1282 | background: transparent !important; 1283 | color: black !important; 1284 | box-shadow: none !important; 1285 | text-shadow: none !important; } 1286 | .show-for-print { 1287 | display: block !important; } 1288 | .hide-for-print { 1289 | display: none !important; } 1290 | table.show-for-print { 1291 | display: table !important; } 1292 | thead.show-for-print { 1293 | display: table-header-group !important; } 1294 | tbody.show-for-print { 1295 | display: table-row-group !important; } 1296 | tr.show-for-print { 1297 | display: table-row !important; } 1298 | td.show-for-print { 1299 | display: table-cell !important; } 1300 | th.show-for-print { 1301 | display: table-cell !important; } 1302 | a, 1303 | a:visited { 1304 | text-decoration: underline; } 1305 | a[href]:after { 1306 | content: " (" attr(href) ")"; } 1307 | .ir a:after, 1308 | a[href^='javascript:']:after, 1309 | a[href^='#']:after { 1310 | content: ''; } 1311 | abbr[title]:after { 1312 | content: " (" attr(title) ")"; } 1313 | pre, 1314 | blockquote { 1315 | border: 1px solid #999; 1316 | page-break-inside: avoid; } 1317 | thead { 1318 | display: table-header-group; } 1319 | tr, 1320 | img { 1321 | page-break-inside: avoid; } 1322 | img { 1323 | max-width: 100% !important; } 1324 | @page { 1325 | margin: 0.5cm; } 1326 | p, 1327 | h2, 1328 | h3 { 1329 | orphans: 3; 1330 | widows: 3; } 1331 | h2, 1332 | h3 { 1333 | page-break-after: avoid; } } 1334 | 1335 | .button { 1336 | display: inline-block; 1337 | text-align: center; 1338 | line-height: 1; 1339 | cursor: pointer; 1340 | -webkit-appearance: none; 1341 | transition: all 0.25s ease-out; 1342 | vertical-align: middle; 1343 | border: 1px solid transparent; 1344 | border-radius: 0; 1345 | padding: 0.85em 1em; 1346 | margin: 0 1rem 1rem 0; 1347 | font-size: 0.9rem; 1348 | background: #2199e8; 1349 | color: #fff; } 1350 | [data-whatinput="mouse"] .button { 1351 | outline: 0; } 1352 | .button:hover, .button:focus { 1353 | background: #1583cc; 1354 | color: #fff; } 1355 | .button.tiny { 1356 | font-size: 0.6rem; } 1357 | .button.small { 1358 | font-size: 0.75rem; } 1359 | .button.large { 1360 | font-size: 1.25rem; } 1361 | .button.expanded { 1362 | display: block; 1363 | width: 100%; 1364 | margin-left: 0; 1365 | margin-right: 0; } 1366 | .button.primary { 1367 | background: #2199e8; 1368 | color: #fff; } 1369 | .button.primary:hover, .button.primary:focus { 1370 | background: #147cc0; 1371 | color: #fff; } 1372 | .button.secondary { 1373 | background: #777; 1374 | color: #fff; } 1375 | .button.secondary:hover, .button.secondary:focus { 1376 | background: #5f5f5f; 1377 | color: #fff; } 1378 | .button.success { 1379 | background: #3adb76; 1380 | color: #fff; } 1381 | .button.success:hover, .button.success:focus { 1382 | background: #22bb5b; 1383 | color: #fff; } 1384 | .button.alert { 1385 | background: #ec5840; 1386 | color: #fff; } 1387 | .button.alert:hover, .button.alert:focus { 1388 | background: #da3116; 1389 | color: #fff; } 1390 | .button.warning { 1391 | background: #ffae00; 1392 | color: #fff; } 1393 | .button.warning:hover, .button.warning:focus { 1394 | background: #cc8b00; 1395 | color: #fff; } 1396 | .button.hollow { 1397 | border: 1px solid #2199e8; 1398 | color: #2199e8; } 1399 | .button.hollow, .button.hollow:hover, .button.hollow:focus { 1400 | background: transparent; } 1401 | .button.hollow:hover, .button.hollow:focus { 1402 | border-color: #0c4d78; 1403 | color: #0c4d78; } 1404 | .button.hollow.primary { 1405 | border: 1px solid #2199e8; 1406 | color: #2199e8; } 1407 | .button.hollow.primary:hover, .button.hollow.primary:focus { 1408 | border-color: #0c4d78; 1409 | color: #0c4d78; } 1410 | .button.hollow.secondary { 1411 | border: 1px solid #777; 1412 | color: #777; } 1413 | .button.hollow.secondary:hover, .button.hollow.secondary:focus { 1414 | border-color: #3c3c3c; 1415 | color: #3c3c3c; } 1416 | .button.hollow.success { 1417 | border: 1px solid #3adb76; 1418 | color: #3adb76; } 1419 | .button.hollow.success:hover, .button.hollow.success:focus { 1420 | border-color: #157539; 1421 | color: #157539; } 1422 | .button.hollow.alert { 1423 | border: 1px solid #ec5840; 1424 | color: #ec5840; } 1425 | .button.hollow.alert:hover, .button.hollow.alert:focus { 1426 | border-color: #881f0e; 1427 | color: #881f0e; } 1428 | .button.hollow.warning { 1429 | border: 1px solid #ffae00; 1430 | color: #ffae00; } 1431 | .button.hollow.warning:hover, .button.hollow.warning:focus { 1432 | border-color: #805700; 1433 | color: #805700; } 1434 | .button.disabled { 1435 | opacity: 0.25; 1436 | cursor: not-allowed; 1437 | pointer-events: none; } 1438 | .button.dropdown::after { 1439 | content: ''; 1440 | display: block; 1441 | width: 0; 1442 | height: 0; 1443 | border: inset 0.4em; 1444 | border-color: #fefefe transparent transparent; 1445 | border-top-style: solid; 1446 | position: relative; 1447 | top: 0.4em; 1448 | float: right; 1449 | margin-left: 1em; 1450 | display: inline-block; } 1451 | .button.arrow-only::after { 1452 | margin-left: 0; 1453 | float: none; 1454 | top: 0.2em; } 1455 | 1456 | [type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="color"], 1457 | textarea { 1458 | display: block; 1459 | box-sizing: border-box; 1460 | width: 100%; 1461 | height: 2.4375rem; 1462 | padding: 0.5rem; 1463 | border: 1px solid #cacaca; 1464 | margin: 0 0 1rem; 1465 | font-family: inherit; 1466 | font-size: 1rem; 1467 | color: #8a8a8a; 1468 | background-color: #fefefe; 1469 | box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); 1470 | border-radius: 0; 1471 | transition: box-shadow 0.5s, border-color 0.25s ease-in-out; 1472 | -webkit-appearance: none; 1473 | -moz-appearance: none; } 1474 | [type="text"]:focus, [type="password"]:focus, [type="date"]:focus, [type="datetime"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="week"]:focus, [type="email"]:focus, [type="number"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="url"]:focus, [type="color"]:focus, 1475 | textarea:focus { 1476 | border: 1px solid #8a8a8a; 1477 | background: #fefefe; 1478 | outline: none; 1479 | box-shadow: 0 0 5px #cacaca; 1480 | transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } 1481 | 1482 | textarea { 1483 | max-width: 100%; } 1484 | textarea[rows] { 1485 | height: auto; } 1486 | 1487 | input:disabled, input[readonly], 1488 | textarea:disabled, 1489 | textarea[readonly] { 1490 | background-color: #e6e6e6; 1491 | cursor: default; } 1492 | 1493 | [type="submit"], 1494 | [type="button"] { 1495 | border-radius: 0; 1496 | -webkit-appearance: none; 1497 | -moz-appearance: none; } 1498 | 1499 | input[type="search"] { 1500 | box-sizing: border-box; } 1501 | 1502 | [type="file"], 1503 | [type="checkbox"], 1504 | [type="radio"] { 1505 | margin: 0 0 1rem; } 1506 | 1507 | [type="checkbox"] + label, 1508 | [type="radio"] + label { 1509 | display: inline-block; 1510 | margin-left: 0.5rem; 1511 | margin-right: 1rem; 1512 | margin-bottom: 0; 1513 | vertical-align: baseline; } 1514 | 1515 | label > [type="checkbox"], 1516 | label > [type="label"] { 1517 | margin-right: 0.5rem; } 1518 | 1519 | [type="file"] { 1520 | width: 100%; } 1521 | 1522 | label { 1523 | display: block; 1524 | margin: 0; 1525 | font-size: 0.875rem; 1526 | font-weight: normal; 1527 | line-height: 1.8; 1528 | color: #0a0a0a; } 1529 | label.middle { 1530 | margin: 0 0 1rem; 1531 | padding: 0.5625rem 0; } 1532 | 1533 | .help-text { 1534 | margin-top: -0.5rem; 1535 | font-size: 0.8125rem; 1536 | font-style: italic; 1537 | color: #333; } 1538 | 1539 | .input-group { 1540 | display: table; 1541 | width: 100%; 1542 | margin-bottom: 1rem; } 1543 | 1544 | .input-group-label, .input-group-field, .input-group-button { 1545 | display: table-cell; 1546 | margin: 0; 1547 | vertical-align: middle; } 1548 | 1549 | .input-group-label { 1550 | text-align: center; 1551 | width: 1%; 1552 | height: 100%; 1553 | padding: 0 1rem; 1554 | background: #e6e6e6; 1555 | color: #0a0a0a; 1556 | border: 1px solid #cacaca; } 1557 | .input-group-label:first-child { 1558 | border-right: 0; } 1559 | .input-group-label:last-child { 1560 | border-left: 0; } 1561 | 1562 | .input-group-button { 1563 | height: 100%; 1564 | padding-top: 0; 1565 | padding-bottom: 0; 1566 | text-align: center; 1567 | width: 1%; } 1568 | 1569 | fieldset { 1570 | border: 0; 1571 | padding: 0; 1572 | margin: 0; } 1573 | 1574 | legend { 1575 | margin-bottom: 0.5rem; } 1576 | 1577 | .fieldset { 1578 | border: 1px solid #cacaca; 1579 | padding: 1.25rem; 1580 | margin: 1.125rem 0; } 1581 | .fieldset legend { 1582 | background: #fefefe; 1583 | padding: 0 0.1875rem; 1584 | margin: 0; 1585 | margin-left: -0.1875rem; } 1586 | 1587 | select { 1588 | height: 2.4375rem; 1589 | padding: 0.5rem; 1590 | border: 1px solid #cacaca; 1591 | border-radius: 0; 1592 | margin: 0 0 1rem; 1593 | font-size: 1rem; 1594 | font-family: inherit; 1595 | line-height: normal; 1596 | color: #8a8a8a; 1597 | background-color: #fafafa; 1598 | border-radius: 0; 1599 | -webkit-appearance: none; 1600 | -moz-appearance: none; 1601 | background-image: url('data:image/svg+xml;utf8,'); 1602 | background-size: 9px 6px; 1603 | background-position: right 0.5rem center; 1604 | background-repeat: no-repeat; } 1605 | @media screen and (min-width: 0\0) { 1606 | select { 1607 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=="); } } 1608 | select:disabled { 1609 | background-color: #e6e6e6; 1610 | cursor: default; } 1611 | select::-ms-expand { 1612 | display: none; } 1613 | select[multiple] { 1614 | height: auto; } 1615 | 1616 | .is-invalid-input:not(:focus) { 1617 | background-color: rgba(236, 88, 64, 0.1); 1618 | border-color: #ec5840; } 1619 | 1620 | .is-invalid-label { 1621 | color: #ec5840; } 1622 | 1623 | .form-error { 1624 | display: none; 1625 | margin-top: -0.5rem; 1626 | margin-bottom: 1rem; 1627 | font-size: 0.75rem; 1628 | font-weight: bold; 1629 | color: #ec5840; } 1630 | .form-error.is-visible { 1631 | display: block; } 1632 | 1633 | .hide { 1634 | display: none !important; } 1635 | 1636 | .invisible { 1637 | visibility: hidden; } 1638 | 1639 | @media screen and (min-width: 0em) and (max-width: 31.9375em) { 1640 | .hide-for-small-only { 1641 | display: none !important; } } 1642 | 1643 | @media screen and (max-width: -0.0625em), screen and (min-width: 32em) { 1644 | .show-for-small-only { 1645 | display: none !important; } } 1646 | 1647 | @media screen and (min-width: 32em) { 1648 | .hide-for-medium { 1649 | display: none !important; } } 1650 | 1651 | @media screen and (max-width: 31.9375em) { 1652 | .show-for-medium { 1653 | display: none !important; } } 1654 | 1655 | @media screen and (min-width: 32em) and (max-width: 63.9375em) { 1656 | .hide-for-medium-only { 1657 | display: none !important; } } 1658 | 1659 | @media screen and (max-width: 31.9375em), screen and (min-width: 64em) { 1660 | .show-for-medium-only { 1661 | display: none !important; } } 1662 | 1663 | @media screen and (min-width: 64em) { 1664 | .hide-for-large { 1665 | display: none !important; } } 1666 | 1667 | @media screen and (max-width: 63.9375em) { 1668 | .show-for-large { 1669 | display: none !important; } } 1670 | 1671 | @media screen and (min-width: 64em) and (max-width: 74.9375em) { 1672 | .hide-for-large-only { 1673 | display: none !important; } } 1674 | 1675 | @media screen and (max-width: 63.9375em), screen and (min-width: 75em) { 1676 | .show-for-large-only { 1677 | display: none !important; } } 1678 | 1679 | .show-for-sr, 1680 | .show-on-focus { 1681 | position: absolute !important; 1682 | width: 1px; 1683 | height: 1px; 1684 | overflow: hidden; 1685 | clip: rect(0, 0, 0, 0); } 1686 | 1687 | .show-on-focus:active, .show-on-focus:focus { 1688 | position: static !important; 1689 | height: auto; 1690 | width: auto; 1691 | overflow: visible; 1692 | clip: auto; } 1693 | 1694 | .show-for-landscape, 1695 | .hide-for-portrait { 1696 | display: block !important; } 1697 | @media screen and (orientation: landscape) { 1698 | .show-for-landscape, 1699 | .hide-for-portrait { 1700 | display: block !important; } } 1701 | @media screen and (orientation: portrait) { 1702 | .show-for-landscape, 1703 | .hide-for-portrait { 1704 | display: none !important; } } 1705 | 1706 | .hide-for-landscape, 1707 | .show-for-portrait { 1708 | display: none !important; } 1709 | @media screen and (orientation: landscape) { 1710 | .hide-for-landscape, 1711 | .show-for-portrait { 1712 | display: none !important; } } 1713 | @media screen and (orientation: portrait) { 1714 | .hide-for-landscape, 1715 | .show-for-portrait { 1716 | display: block !important; } } 1717 | 1718 | .float-left { 1719 | float: left !important; } 1720 | 1721 | .float-right { 1722 | float: right !important; } 1723 | 1724 | .float-center { 1725 | display: block; 1726 | margin-left: auto; 1727 | margin-right: auto; } 1728 | 1729 | .clearfix::before, .clearfix::after { 1730 | content: ' '; 1731 | display: table; } 1732 | 1733 | .clearfix::after { 1734 | clear: both; } 1735 | 1736 | .accordion { 1737 | list-style-type: none; 1738 | background: #fefefe; 1739 | border: 1px solid #e6e6e6; 1740 | border-radius: 0; 1741 | margin-left: 0; } 1742 | 1743 | .accordion-title { 1744 | display: block; 1745 | padding: 1.25rem 1rem; 1746 | line-height: 1; 1747 | font-size: 0.75rem; 1748 | color: #2199e8; 1749 | position: relative; 1750 | border-bottom: 1px solid #e6e6e6; } 1751 | .accordion-title:hover, .accordion-title:focus { 1752 | background-color: #e6e6e6; } 1753 | :last-child > .accordion-title { 1754 | border-bottom-width: 0; } 1755 | .accordion-title::before { 1756 | content: '+'; 1757 | position: absolute; 1758 | right: 1rem; 1759 | top: 50%; 1760 | margin-top: -0.5rem; } 1761 | .is-active > .accordion-title::before { 1762 | content: '–'; } 1763 | 1764 | .accordion-content { 1765 | padding: 1.25rem 1rem; 1766 | display: none; 1767 | border-bottom: 1px solid #e6e6e6; } 1768 | 1769 | .badge { 1770 | display: inline-block; 1771 | padding: 0.3em; 1772 | min-width: 2.1em; 1773 | font-size: 0.6rem; 1774 | text-align: center; 1775 | border-radius: 50%; 1776 | background: #2199e8; 1777 | color: #fefefe; } 1778 | .badge.secondary { 1779 | background: #777; 1780 | color: #fefefe; } 1781 | .badge.success { 1782 | background: #3adb76; 1783 | color: #fefefe; } 1784 | .badge.alert { 1785 | background: #ec5840; 1786 | color: #fefefe; } 1787 | .badge.warning { 1788 | background: #ffae00; 1789 | color: #fefefe; } 1790 | 1791 | .breadcrumbs { 1792 | list-style: none; 1793 | margin: 0 0 1rem 0; } 1794 | .breadcrumbs::before, .breadcrumbs::after { 1795 | content: ' '; 1796 | display: table; } 1797 | .breadcrumbs::after { 1798 | clear: both; } 1799 | .breadcrumbs li { 1800 | float: left; 1801 | color: #0a0a0a; 1802 | font-size: 0.6875rem; 1803 | cursor: default; 1804 | text-transform: uppercase; } 1805 | .breadcrumbs li:not(:last-child)::after { 1806 | color: #cacaca; 1807 | content: "/"; 1808 | margin: 0 0.75rem; 1809 | position: relative; 1810 | top: 1px; 1811 | opacity: 1; } 1812 | .breadcrumbs a { 1813 | color: #2199e8; } 1814 | .breadcrumbs a:hover { 1815 | text-decoration: underline; } 1816 | .breadcrumbs .disabled { 1817 | color: #cacaca; } 1818 | 1819 | .button-group { 1820 | margin-bottom: 1rem; 1821 | font-size: 0.9rem; } 1822 | .button-group::before, .button-group::after { 1823 | content: ' '; 1824 | display: table; } 1825 | .button-group::after { 1826 | clear: both; } 1827 | .button-group .button { 1828 | float: left; 1829 | margin: 0; 1830 | font-size: inherit; } 1831 | .button-group .button:not(:last-child) { 1832 | border-right: 1px solid #fefefe; } 1833 | .button-group.tiny { 1834 | font-size: 0.6rem; } 1835 | .button-group.small { 1836 | font-size: 0.75rem; } 1837 | .button-group.large { 1838 | font-size: 1.25rem; } 1839 | .button-group.expanded .button:nth-last-child(2):first-child, 1840 | .button-group.expanded .button:nth-last-child(2):first-child ~ .button { 1841 | width: 50%; } 1842 | .button-group.expanded .button:nth-last-child(3):first-child, 1843 | .button-group.expanded .button:nth-last-child(3):first-child ~ .button { 1844 | width: 33.33333%; } 1845 | .button-group.expanded .button:nth-last-child(4):first-child, 1846 | .button-group.expanded .button:nth-last-child(4):first-child ~ .button { 1847 | width: 25%; } 1848 | .button-group.expanded .button:nth-last-child(5):first-child, 1849 | .button-group.expanded .button:nth-last-child(5):first-child ~ .button { 1850 | width: 20%; } 1851 | .button-group.expanded .button:nth-last-child(6):first-child, 1852 | .button-group.expanded .button:nth-last-child(6):first-child ~ .button { 1853 | width: 16.66667%; } 1854 | .button-group.primary .button { 1855 | background: #2199e8; 1856 | color: #fff; } 1857 | .button-group.primary .button:hover, .button-group.primary .button:focus { 1858 | background: #147cc0; 1859 | color: #fff; } 1860 | .button-group.secondary .button { 1861 | background: #777; 1862 | color: #fff; } 1863 | .button-group.secondary .button:hover, .button-group.secondary .button:focus { 1864 | background: #5f5f5f; 1865 | color: #fff; } 1866 | .button-group.success .button { 1867 | background: #3adb76; 1868 | color: #fff; } 1869 | .button-group.success .button:hover, .button-group.success .button:focus { 1870 | background: #22bb5b; 1871 | color: #fff; } 1872 | .button-group.alert .button { 1873 | background: #ec5840; 1874 | color: #fff; } 1875 | .button-group.alert .button:hover, .button-group.alert .button:focus { 1876 | background: #da3116; 1877 | color: #fff; } 1878 | .button-group.warning .button { 1879 | background: #ffae00; 1880 | color: #fff; } 1881 | .button-group.warning .button:hover, .button-group.warning .button:focus { 1882 | background: #cc8b00; 1883 | color: #fff; } 1884 | .button-group.stacked .button, .button-group.stacked-for-small .button { 1885 | width: 100%; 1886 | border-right: 0; } 1887 | @media screen and (min-width: 32em) { 1888 | .button-group.stacked-for-small .button { 1889 | width: auto; } 1890 | .button-group.stacked-for-small .button:not(:last-child) { 1891 | border-right: 1px solid #fefefe; } } 1892 | 1893 | .callout { 1894 | margin: 0 0 1rem 0; 1895 | padding: 1rem; 1896 | border: 1px solid rgba(10, 10, 10, 0.25); 1897 | border-radius: 0; 1898 | position: relative; 1899 | background-color: white; } 1900 | .callout > :first-child { 1901 | margin-top: 0; } 1902 | .callout > :last-child { 1903 | margin-bottom: 0; } 1904 | .callout.primary { 1905 | background-color: #def0fc; } 1906 | .callout.primary a { 1907 | color: #116ca8; } 1908 | .callout.primary a:hover { 1909 | color: #0a4063; } 1910 | .callout.secondary { 1911 | background-color: #ebebeb; } 1912 | .callout.success { 1913 | background-color: #e1faea; } 1914 | .callout.success a { 1915 | color: #1ea450; } 1916 | .callout.success a:hover { 1917 | color: #126330; } 1918 | .callout.alert { 1919 | background-color: #fce6e2; } 1920 | .callout.alert a { 1921 | color: #bf2b13; } 1922 | .callout.alert a:hover { 1923 | color: #791b0c; } 1924 | .callout.warning { 1925 | background-color: #fff3d9; } 1926 | .callout.warning a { 1927 | color: #b37a00; } 1928 | .callout.warning a:hover { 1929 | color: #664600; } 1930 | .callout.small { 1931 | padding-top: 0.5rem; 1932 | padding-right: 0.5rem; 1933 | padding-bottom: 0.5rem; 1934 | padding-left: 0.5rem; } 1935 | .callout.large { 1936 | padding-top: 3rem; 1937 | padding-right: 3rem; 1938 | padding-bottom: 3rem; 1939 | padding-left: 3rem; } 1940 | 1941 | .close-button { 1942 | position: absolute; 1943 | color: #8a8a8a; 1944 | right: 1rem; 1945 | top: 0.5rem; 1946 | font-size: 2em; 1947 | line-height: 1; 1948 | cursor: pointer; } 1949 | [data-whatinput="mouse"] .close-button { 1950 | outline: 0; } 1951 | .close-button:hover, .close-button:focus { 1952 | color: #0a0a0a; } 1953 | 1954 | .is-drilldown { 1955 | position: relative; 1956 | overflow: hidden; } 1957 | 1958 | .is-drilldown-sub { 1959 | position: absolute; 1960 | top: 0; 1961 | left: 100%; 1962 | z-index: -1; 1963 | height: 100%; 1964 | width: 100%; 1965 | background: #fefefe; 1966 | transition: -webkit-transform 0.15s linear; 1967 | transition: transform 0.15s linear; } 1968 | .is-drilldown-sub.is-active { 1969 | z-index: 1; 1970 | display: block; 1971 | -webkit-transform: translateX(-100%); 1972 | -ms-transform: translateX(-100%); 1973 | transform: translateX(-100%); } 1974 | .is-drilldown-sub.is-closing { 1975 | -webkit-transform: translateX(100%); 1976 | -ms-transform: translateX(100%); 1977 | transform: translateX(100%); } 1978 | 1979 | .is-drilldown-submenu-parent > a { 1980 | position: relative; } 1981 | .is-drilldown-submenu-parent > a::after { 1982 | content: ''; 1983 | display: block; 1984 | width: 0; 1985 | height: 0; 1986 | border: inset 6px; 1987 | border-color: transparent transparent transparent #2199e8; 1988 | border-left-style: solid; 1989 | position: absolute; 1990 | top: 50%; 1991 | margin-top: -6px; 1992 | right: 1rem; } 1993 | 1994 | .js-drilldown-back::before { 1995 | content: ''; 1996 | display: block; 1997 | width: 0; 1998 | height: 0; 1999 | border: inset 6px; 2000 | border-color: transparent #2199e8 transparent transparent; 2001 | border-right-style: solid; 2002 | float: left; 2003 | margin-right: 0.75rem; 2004 | margin-left: 0.6rem; 2005 | margin-top: 14px; } 2006 | 2007 | .dropdown-pane { 2008 | background-color: #fefefe; 2009 | border: 1px solid #cacaca; 2010 | display: block; 2011 | padding: 1rem; 2012 | position: absolute; 2013 | visibility: hidden; 2014 | width: 300px; 2015 | z-index: 10; 2016 | border-radius: 0; } 2017 | .dropdown-pane.is-open { 2018 | visibility: visible; } 2019 | 2020 | .dropdown-pane.tiny { 2021 | width: 100px; } 2022 | 2023 | .dropdown-pane.small { 2024 | width: 200px; } 2025 | 2026 | .dropdown-pane.large { 2027 | width: 400px; } 2028 | 2029 | .dropdown.menu .has-submenu { 2030 | position: relative; } 2031 | .dropdown.menu .has-submenu a::after { 2032 | float: right; 2033 | margin-top: 3px; 2034 | margin-left: 10px; } 2035 | .dropdown.menu .has-submenu.is-down-arrow > a::after { 2036 | content: ''; 2037 | display: block; 2038 | width: 0; 2039 | height: 0; 2040 | border: inset 5px; 2041 | border-color: #2199e8 transparent transparent; 2042 | border-top-style: solid; } 2043 | .dropdown.menu .has-submenu.is-left-arrow > a::after { 2044 | content: ''; 2045 | display: block; 2046 | width: 0; 2047 | height: 0; 2048 | border: inset 5px; 2049 | border-color: transparent #2199e8 transparent transparent; 2050 | border-right-style: solid; 2051 | float: left; 2052 | margin-left: 0; 2053 | margin-right: 10px; } 2054 | .dropdown.menu .has-submenu.is-right-arrow > a::after { 2055 | content: ''; 2056 | display: block; 2057 | width: 0; 2058 | height: 0; 2059 | border: inset 5px; 2060 | border-color: transparent transparent transparent #2199e8; 2061 | border-left-style: solid; } 2062 | .dropdown.menu .has-submenu.is-left-arrow.opens-inner .submenu { 2063 | right: 0; 2064 | left: auto; } 2065 | .dropdown.menu .has-submenu.is-right-arrow.opens-inner .submenu { 2066 | left: 0; 2067 | right: auto; } 2068 | .dropdown.menu .has-submenu.opens-inner .submenu { 2069 | top: 100%; } 2070 | 2071 | .dropdown.menu .submenu { 2072 | display: none; 2073 | position: absolute; 2074 | top: 0; 2075 | left: 100%; 2076 | min-width: 200px; 2077 | z-index: 1; 2078 | background: #fefefe; 2079 | border: 1px solid #cacaca; } 2080 | .dropdown.menu .submenu > li { 2081 | width: 100%; } 2082 | .dropdown.menu .submenu.first-sub { 2083 | top: 100%; 2084 | left: 0; 2085 | right: auto; } 2086 | .dropdown.menu .submenu:not(.js-dropdown-nohover) > .has-submenu:hover > .dropdown.menu .submenu, .dropdown.menu .submenu.js-dropdown-active { 2087 | display: block; } 2088 | 2089 | .dropdown.menu .has-submenu.opens-left .submenu { 2090 | left: auto; 2091 | right: 100%; } 2092 | 2093 | .dropdown.menu.align-right .submenu.first-sub { 2094 | top: 100%; 2095 | left: auto; 2096 | right: 0; } 2097 | 2098 | .dropdown.menu.vertical { 2099 | width: 100px; } 2100 | .dropdown.menu.vertical.align-right { 2101 | float: right; } 2102 | .dropdown.menu.vertical > li .submenu { 2103 | top: 0; 2104 | left: 100%; } 2105 | 2106 | .flex-video { 2107 | position: relative; 2108 | height: 0; 2109 | padding-top: 1.5625rem; 2110 | padding-bottom: 75%; 2111 | margin-bottom: 1rem; 2112 | overflow: hidden; } 2113 | .flex-video iframe, 2114 | .flex-video object, 2115 | .flex-video embed, 2116 | .flex-video video { 2117 | position: absolute; 2118 | top: 0; 2119 | left: 0; 2120 | width: 100%; 2121 | height: 100%; } 2122 | .flex-video.widescreen { 2123 | padding-bottom: 56.25%; } 2124 | .flex-video.vimeo { 2125 | padding-top: 0; } 2126 | 2127 | .label { 2128 | display: inline-block; 2129 | padding: 0.33333rem 0.5rem; 2130 | font-size: 0.8rem; 2131 | line-height: 1; 2132 | white-space: nowrap; 2133 | cursor: default; 2134 | border-radius: 0; 2135 | background: #2199e8; 2136 | color: #fefefe; } 2137 | .label.secondary { 2138 | background: #777; 2139 | color: #fefefe; } 2140 | .label.success { 2141 | background: #3adb76; 2142 | color: #fefefe; } 2143 | .label.alert { 2144 | background: #ec5840; 2145 | color: #fefefe; } 2146 | .label.warning { 2147 | background: #ffae00; 2148 | color: #fefefe; } 2149 | 2150 | .media-object { 2151 | margin-bottom: 1rem; 2152 | display: block; } 2153 | .media-object img { 2154 | max-width: none; } 2155 | @media screen and (min-width: 0em) and (max-width: 31.9375em) { 2156 | .media-object.stack-for-small .media-object-section { 2157 | display: block; 2158 | padding: 0; 2159 | padding-bottom: 1rem; } 2160 | .media-object.stack-for-small .media-object-section img { 2161 | width: 100%; } } 2162 | 2163 | .media-object-section { 2164 | display: table-cell; 2165 | vertical-align: top; } 2166 | .media-object-section:first-child { 2167 | padding-right: 1rem; } 2168 | .media-object-section:last-child:not( + &:first-child) { 2169 | padding-left: 1rem; } 2170 | .media-object-section.middle { 2171 | vertical-align: middle; } 2172 | .media-object-section.bottom { 2173 | vertical-align: bottom; } 2174 | 2175 | .menu { 2176 | margin: 0; 2177 | list-style-type: none; } 2178 | .menu > li { 2179 | display: table-cell; 2180 | vertical-align: middle; } 2181 | [data-whatinput="mouse"] .menu > li { 2182 | outline: 0; } 2183 | .menu > li > a { 2184 | display: block; 2185 | padding: 0.7rem 1rem; 2186 | line-height: 1; } 2187 | .menu input, 2188 | .menu a, 2189 | .menu button { 2190 | margin-bottom: 0; } 2191 | .menu > li > a > img, 2192 | .menu > li > a > i { 2193 | vertical-align: middle; } 2194 | .menu > li > a > span { 2195 | vertical-align: middle; } 2196 | .menu > li > a > img, 2197 | .menu > li > a > i { 2198 | display: inline-block; 2199 | margin-right: 0.25rem; } 2200 | .menu > li { 2201 | display: table-cell; } 2202 | .menu.vertical > li { 2203 | display: block; } 2204 | @media screen and (min-width: 32em) { 2205 | .menu.medium-horizontal > li { 2206 | display: table-cell; } 2207 | .menu.medium-vertical > li { 2208 | display: block; } } 2209 | @media screen and (min-width: 64em) { 2210 | .menu.large-horizontal > li { 2211 | display: table-cell; } 2212 | .menu.large-vertical > li { 2213 | display: block; } } 2214 | .menu.simple a { 2215 | padding: 0; 2216 | margin-right: 1rem; } 2217 | .menu.align-right > li { 2218 | float: right; } 2219 | .menu.expanded { 2220 | display: table; 2221 | width: 100%; } 2222 | .menu.expanded > li:nth-last-child(2):first-child, 2223 | .menu.expanded > li:nth-last-child(2):first-child ~ li { 2224 | width: 50%; } 2225 | .menu.expanded > li:nth-last-child(3):first-child, 2226 | .menu.expanded > li:nth-last-child(3):first-child ~ li { 2227 | width: 33.33333%; } 2228 | .menu.expanded > li:nth-last-child(4):first-child, 2229 | .menu.expanded > li:nth-last-child(4):first-child ~ li { 2230 | width: 25%; } 2231 | .menu.expanded > li:nth-last-child(5):first-child, 2232 | .menu.expanded > li:nth-last-child(5):first-child ~ li { 2233 | width: 20%; } 2234 | .menu.expanded > li:nth-last-child(6):first-child, 2235 | .menu.expanded > li:nth-last-child(6):first-child ~ li { 2236 | width: 16.66667%; } 2237 | .menu.expanded > li:first-child:last-child { 2238 | width: 100%; } 2239 | .menu.icon-top > li > a { 2240 | text-align: center; } 2241 | .menu.icon-top > li > a > img, 2242 | .menu.icon-top > li > a > i { 2243 | display: block; 2244 | margin: 0 auto 0.25rem; } 2245 | .menu.nested { 2246 | margin-left: 1rem; } 2247 | 2248 | .menu-text { 2249 | font-weight: bold; 2250 | color: inherit; 2251 | line-height: 1; 2252 | padding-top: 0; 2253 | padding-bottom: 0; 2254 | padding: 0.7rem 1rem; } 2255 | 2256 | html, 2257 | body { 2258 | height: 100%; } 2259 | 2260 | .off-canvas-wrapper { 2261 | width: 100%; 2262 | overflow-x: hidden; 2263 | position: relative; 2264 | -webkit-backface-visibility: hidden; 2265 | backface-visibility: hidden; 2266 | -webkit-overflow-scrolling: touch; } 2267 | 2268 | .off-canvas-wrapper-inner { 2269 | position: relative; 2270 | width: 100%; 2271 | transition: -webkit-transform 0.5s ease; 2272 | transition: transform 0.5s ease; } 2273 | .off-canvas-wrapper-inner::before, .off-canvas-wrapper-inner::after { 2274 | content: ' '; 2275 | display: table; } 2276 | .off-canvas-wrapper-inner::after { 2277 | clear: both; } 2278 | 2279 | .off-canvas-content { 2280 | min-height: 100%; 2281 | background: #fefefe; 2282 | transition: -webkit-transform 0.5s ease; 2283 | transition: transform 0.5s ease; 2284 | -webkit-backface-visibility: hidden; 2285 | backface-visibility: hidden; 2286 | z-index: 1; 2287 | box-shadow: 0 0 10px rgba(10, 10, 10, 0.5); } 2288 | 2289 | .js-off-canvas-exit { 2290 | display: none; 2291 | position: absolute; 2292 | top: 0; 2293 | left: 0; 2294 | width: 100%; 2295 | height: 100%; 2296 | background: rgba(254, 254, 254, 0.25); 2297 | cursor: pointer; 2298 | transition: background 0.5s ease; } 2299 | .is-off-canvas-open .js-off-canvas-exit { 2300 | display: block; } 2301 | 2302 | .off-canvas { 2303 | position: absolute; 2304 | background: #e6e6e6; 2305 | z-index: -1; 2306 | min-height: 100%; 2307 | -webkit-transform: translateX(0px); 2308 | -ms-transform: translateX(0px); 2309 | transform: translateX(0px); } 2310 | [data-whatinput="mouse"] .off-canvas { 2311 | outline: 0; } 2312 | .off-canvas.position-left { 2313 | left: -250px; 2314 | top: 0; 2315 | width: 250px; } 2316 | .is-open-left { 2317 | -webkit-transform: translateX(250px); 2318 | -ms-transform: translateX(250px); 2319 | transform: translateX(250px); } 2320 | .off-canvas.position-right { 2321 | right: -250px; 2322 | top: 0; 2323 | width: 250px; } 2324 | .is-open-right { 2325 | -webkit-transform: translateX(-250px); 2326 | -ms-transform: translateX(-250px); 2327 | transform: translateX(-250px); } 2328 | 2329 | @media screen and (min-width: 32em) { 2330 | .position-left.reveal-for-medium { 2331 | left: 0; } 2332 | .position-left.reveal-for-medium ~ .off-canvas-content { 2333 | margin-left: 250px; } 2334 | .position-right.reveal-for-medium { 2335 | right: 0; } 2336 | .position-right.reveal-for-medium ~ .off-canvas-content { 2337 | margin-right: 250px; } } 2338 | 2339 | @media screen and (min-width: 64em) { 2340 | .position-left.reveal-for-large { 2341 | left: 0; } 2342 | .position-left.reveal-for-large ~ .off-canvas-content { 2343 | margin-left: 250px; } 2344 | .position-right.reveal-for-large { 2345 | right: 0; } 2346 | .position-right.reveal-for-large ~ .off-canvas-content { 2347 | margin-right: 250px; } } 2348 | 2349 | .orbit { 2350 | position: relative; } 2351 | 2352 | .orbit-container { 2353 | position: relative; 2354 | margin: 0; 2355 | overflow: hidden; 2356 | list-style: none; } 2357 | 2358 | .orbit-slide { 2359 | width: 100%; 2360 | max-height: 100%; } 2361 | 2362 | .orbit-figure { 2363 | margin: 0; } 2364 | 2365 | .orbit-image { 2366 | margin: 0; 2367 | width: 100%; 2368 | max-width: 100%; } 2369 | 2370 | .orbit-caption { 2371 | position: absolute; 2372 | bottom: 0; 2373 | width: 100%; 2374 | padding: 1rem; 2375 | margin-bottom: 0; 2376 | color: #fefefe; 2377 | background-color: rgba(10, 10, 10, 0.5); } 2378 | 2379 | .orbit-previous, .orbit-next { 2380 | position: absolute; 2381 | top: 50%; 2382 | -webkit-transform: translateY(-50%); 2383 | -ms-transform: translateY(-50%); 2384 | transform: translateY(-50%); 2385 | z-index: 10; 2386 | padding: 1rem; 2387 | color: #fefefe; } 2388 | [data-whatinput="mouse"] .orbit-previous, [data-whatinput="mouse"] .orbit-next { 2389 | outline: 0; } 2390 | .orbit-previous:hover, .orbit-next:hover, .orbit-previous:active, .orbit-next:active, .orbit-previous:focus, .orbit-next:focus { 2391 | background-color: rgba(10, 10, 10, 0.5); } 2392 | 2393 | .orbit-previous { 2394 | left: 0; } 2395 | 2396 | .orbit-next { 2397 | left: auto; 2398 | right: 0; } 2399 | 2400 | .orbit-bullets { 2401 | position: relative; 2402 | margin-top: 0.8rem; 2403 | margin-bottom: 0.8rem; 2404 | text-align: center; } 2405 | [data-whatinput="mouse"] .orbit-bullets { 2406 | outline: 0; } 2407 | .orbit-bullets button { 2408 | width: 1.2rem; 2409 | height: 1.2rem; 2410 | margin: 0.1rem; 2411 | background-color: #cacaca; 2412 | border-radius: 50%; } 2413 | .orbit-bullets button:hover { 2414 | background-color: #8a8a8a; } 2415 | .orbit-bullets button.is-active { 2416 | background-color: #8a8a8a; } 2417 | 2418 | .pagination { 2419 | margin-left: 0; 2420 | margin-bottom: 1rem; } 2421 | .pagination::before, .pagination::after { 2422 | content: ' '; 2423 | display: table; } 2424 | .pagination::after { 2425 | clear: both; } 2426 | .pagination li { 2427 | font-size: 0.875rem; 2428 | margin-right: 0.0625rem; 2429 | display: none; 2430 | border-radius: 0; } 2431 | .pagination li:last-child, .pagination li:first-child { 2432 | display: inline-block; } 2433 | @media screen and (min-width: 32em) { 2434 | .pagination li { 2435 | display: inline-block; } } 2436 | .pagination a, 2437 | .pagination button { 2438 | color: #0a0a0a; 2439 | display: block; 2440 | padding: 0.1875rem 0.625rem; 2441 | border-radius: 0; } 2442 | .pagination a:hover, 2443 | .pagination button:hover { 2444 | background: #e6e6e6; } 2445 | .pagination [aria-label="previous"]::before { 2446 | content: '«'; 2447 | display: inline-block; 2448 | margin-right: 0.75rem; } 2449 | .pagination [aria-label="next"]::after { 2450 | content: '»'; 2451 | display: inline-block; 2452 | margin-left: 0.75rem; } 2453 | .pagination .current { 2454 | padding: 0.1875rem 0.625rem; 2455 | background: #2199e8; 2456 | color: #fefefe; 2457 | cursor: default; } 2458 | .pagination .disabled { 2459 | padding: 0.1875rem 0.625rem; 2460 | color: #cacaca; 2461 | cursor: default; } 2462 | .pagination .disabled:hover { 2463 | background: transparent; } 2464 | .pagination .ellipsis::after { 2465 | content: '…'; 2466 | padding: 0.1875rem 0.625rem; 2467 | color: #0a0a0a; } 2468 | 2469 | .progress { 2470 | background-color: #cacaca; 2471 | height: 1rem; 2472 | margin-bottom: 1rem; 2473 | border-radius: 0; } 2474 | .progress.primary .progress-meter { 2475 | background-color: #2199e8; } 2476 | .progress.secondary .progress-meter { 2477 | background-color: #777; } 2478 | .progress.success .progress-meter { 2479 | background-color: #3adb76; } 2480 | .progress.alert .progress-meter { 2481 | background-color: #ec5840; } 2482 | .progress.warning .progress-meter { 2483 | background-color: #ffae00; } 2484 | 2485 | .progress-meter { 2486 | position: relative; 2487 | display: block; 2488 | width: 0%; 2489 | height: 100%; 2490 | background-color: #2199e8; 2491 | border-radius: 0; } 2492 | .progress-meter .progress-meter-text { 2493 | position: absolute; 2494 | top: 50%; 2495 | left: 50%; 2496 | -webkit-transform: translate(-50%, -50%); 2497 | -ms-transform: translate(-50%, -50%); 2498 | transform: translate(-50%, -50%); 2499 | margin: 0; 2500 | font-size: 0.75rem; 2501 | font-weight: bold; 2502 | color: #fefefe; 2503 | white-space: nowrap; } 2504 | 2505 | .slider { 2506 | position: relative; 2507 | height: 0.5rem; 2508 | margin-top: 1.25rem; 2509 | margin-bottom: 2.25rem; 2510 | background-color: #e6e6e6; 2511 | cursor: pointer; 2512 | -webkit-user-select: none; 2513 | -moz-user-select: none; 2514 | -ms-user-select: none; 2515 | user-select: none; } 2516 | 2517 | .slider-fill { 2518 | position: absolute; 2519 | top: 0; 2520 | left: 0; 2521 | display: inline-block; 2522 | max-width: 100%; 2523 | height: 0.5rem; 2524 | background-color: #cacaca; 2525 | transition: all 0.2s ease-in-out; } 2526 | .slider-fill.is-dragging { 2527 | transition: all 0s linear; } 2528 | 2529 | .slider-handle { 2530 | position: absolute; 2531 | top: 50%; 2532 | -webkit-transform: translateY(-50%); 2533 | -ms-transform: translateY(-50%); 2534 | transform: translateY(-50%); 2535 | position: absolute; 2536 | left: 0; 2537 | z-index: 1; 2538 | display: inline-block; 2539 | width: 1.4rem; 2540 | height: 1.4rem; 2541 | background-color: #2199e8; 2542 | transition: all 0.2s ease-in-out; 2543 | -ms-touch-action: manipulation; 2544 | touch-action: manipulation; 2545 | border-radius: 0; } 2546 | [data-whatinput="mouse"] .slider-handle { 2547 | outline: 0; } 2548 | .slider-handle:hover { 2549 | background-color: #1583cc; } 2550 | .slider-handle.is-dragging { 2551 | transition: all 0s linear; } 2552 | 2553 | .slider.disabled, 2554 | .slider[disabled] { 2555 | opacity: 0.25; 2556 | cursor: not-allowed; } 2557 | 2558 | .slider.vertical { 2559 | display: inline-block; 2560 | width: 0.5rem; 2561 | height: 12.5rem; 2562 | margin: 0 1.25rem; 2563 | -webkit-transform: scale(1, -1); 2564 | -ms-transform: scale(1, -1); 2565 | transform: scale(1, -1); } 2566 | .slider.vertical .slider-fill { 2567 | top: 0; 2568 | width: 0.5rem; 2569 | max-height: 100%; } 2570 | .slider.vertical .slider-handle { 2571 | position: absolute; 2572 | top: 0; 2573 | left: 50%; 2574 | width: 1.4rem; 2575 | height: 1.4rem; 2576 | -webkit-transform: translateX(-50%); 2577 | -ms-transform: translateX(-50%); 2578 | transform: translateX(-50%); } 2579 | 2580 | .sticky-container { 2581 | position: relative; } 2582 | 2583 | .sticky { 2584 | position: absolute; 2585 | z-index: 0; 2586 | -webkit-transform: translate3d(0, 0, 0); 2587 | transform: translate3d(0, 0, 0); } 2588 | 2589 | .sticky.is-stuck { 2590 | position: fixed; 2591 | z-index: 5; } 2592 | .sticky.is-stuck.is-at-top { 2593 | top: 0; } 2594 | .sticky.is-stuck.is-at-bottom { 2595 | bottom: 0; } 2596 | 2597 | .sticky.is-anchored { 2598 | position: absolute; 2599 | left: auto; 2600 | right: auto; } 2601 | .sticky.is-anchored.is-at-bottom { 2602 | bottom: 0; } 2603 | 2604 | .reveal-overlay { 2605 | display: none; 2606 | position: fixed; 2607 | top: 0; 2608 | bottom: 0; 2609 | left: 0; 2610 | right: 0; 2611 | z-index: 1005; 2612 | background-color: rgba(10, 10, 10, 0.45); 2613 | overflow-y: scroll; } 2614 | 2615 | .reveal { 2616 | display: none; 2617 | z-index: 1006; 2618 | padding: 1rem; 2619 | border: 1px solid #cacaca; 2620 | margin: 100px auto 0 auto; 2621 | background-color: #fefefe; 2622 | border-radius: 0; 2623 | position: absolute; 2624 | overflow-y: auto; } 2625 | [data-whatinput="mouse"] .reveal { 2626 | outline: 0; } 2627 | @media screen and (min-width: 32em) { 2628 | .reveal { 2629 | min-height: 0; } } 2630 | .reveal .column, .reveal .columns, 2631 | .reveal .columns { 2632 | min-width: 0; } 2633 | .reveal > :last-child { 2634 | margin-bottom: 0; } 2635 | @media screen and (min-width: 32em) { 2636 | .reveal { 2637 | width: 600px; 2638 | max-width: 75rem; } } 2639 | .reveal.collapse { 2640 | padding: 0; } 2641 | @media screen and (min-width: 32em) { 2642 | .reveal .reveal { 2643 | left: auto; 2644 | right: auto; 2645 | margin: 0 auto; } } 2646 | @media screen and (min-width: 32em) { 2647 | .reveal.tiny { 2648 | width: 30%; 2649 | max-width: 75rem; } } 2650 | @media screen and (min-width: 32em) { 2651 | .reveal.small { 2652 | width: 50%; 2653 | max-width: 75rem; } } 2654 | @media screen and (min-width: 32em) { 2655 | .reveal.large { 2656 | width: 90%; 2657 | max-width: 75rem; } } 2658 | .reveal.full { 2659 | top: 0; 2660 | left: 0; 2661 | width: 100%; 2662 | height: 100%; 2663 | height: 100vh; 2664 | min-height: 100vh; 2665 | max-width: none; 2666 | margin-left: 0; } 2667 | 2668 | .switch { 2669 | margin-bottom: 1rem; 2670 | outline: 0; 2671 | position: relative; 2672 | -webkit-user-select: none; 2673 | -moz-user-select: none; 2674 | -ms-user-select: none; 2675 | user-select: none; 2676 | color: #fefefe; 2677 | font-weight: bold; 2678 | font-size: 0.875rem; } 2679 | 2680 | .switch-input { 2681 | opacity: 0; 2682 | position: absolute; } 2683 | 2684 | .switch-paddle { 2685 | background: #cacaca; 2686 | cursor: pointer; 2687 | display: block; 2688 | position: relative; 2689 | width: 4rem; 2690 | height: 2rem; 2691 | transition: all 0.25s ease-out; 2692 | border-radius: 0; 2693 | color: inherit; 2694 | font-weight: inherit; } 2695 | input + .switch-paddle { 2696 | margin: 0; } 2697 | .switch-paddle::after { 2698 | background: #fefefe; 2699 | content: ''; 2700 | display: block; 2701 | position: absolute; 2702 | height: 1.5rem; 2703 | left: 0.25rem; 2704 | top: 0.25rem; 2705 | width: 1.5rem; 2706 | transition: all 0.25s ease-out; 2707 | -webkit-transform: translate3d(0, 0, 0); 2708 | transform: translate3d(0, 0, 0); } 2709 | input:checked ~ .switch-paddle { 2710 | background: #2199e8; } 2711 | input:checked ~ .switch-paddle::after { 2712 | left: 2.25rem; } 2713 | [data-whatinput="mouse"] input:focus ~ .switch-paddle { 2714 | outline: 0; } 2715 | 2716 | .switch-active, .switch-inactive { 2717 | position: absolute; 2718 | top: 50%; 2719 | -webkit-transform: translateY(-50%); 2720 | -ms-transform: translateY(-50%); 2721 | transform: translateY(-50%); } 2722 | 2723 | .switch-active { 2724 | left: 8%; 2725 | display: none; } 2726 | input:checked + label > .switch-active { 2727 | display: block; } 2728 | 2729 | .switch-inactive { 2730 | right: 15%; } 2731 | input:checked + label > .switch-inactive { 2732 | display: none; } 2733 | 2734 | .switch.tiny .switch-paddle { 2735 | width: 3rem; 2736 | height: 1.5rem; 2737 | font-size: 0.625rem; } 2738 | 2739 | .switch.tiny .switch-paddle::after { 2740 | width: 1rem; 2741 | height: 1rem; } 2742 | 2743 | .switch.tiny input:checked ~ .switch-paddle:after { 2744 | left: 1.75rem; } 2745 | 2746 | .switch.small .switch-paddle { 2747 | width: 3.5rem; 2748 | height: 1.75rem; 2749 | font-size: 0.75rem; } 2750 | 2751 | .switch.small .switch-paddle::after { 2752 | width: 1.25rem; 2753 | height: 1.25rem; } 2754 | 2755 | .switch.small input:checked ~ .switch-paddle:after { 2756 | left: 2rem; } 2757 | 2758 | .switch.large .switch-paddle { 2759 | width: 5rem; 2760 | height: 2.5rem; 2761 | font-size: 1rem; } 2762 | 2763 | .switch.large .switch-paddle::after { 2764 | width: 2rem; 2765 | height: 2rem; } 2766 | 2767 | .switch.large input:checked ~ .switch-paddle:after { 2768 | left: 2.75rem; } 2769 | 2770 | table { 2771 | margin-bottom: 1rem; 2772 | border-radius: 0; } 2773 | thead, 2774 | tbody, 2775 | tfoot { 2776 | border: 1px solid #f1f1f1; 2777 | background-color: #fefefe; } 2778 | caption { 2779 | font-weight: bold; 2780 | padding: 0.5rem 0.625rem 0.625rem; } 2781 | thead, 2782 | tfoot { 2783 | background: #f8f8f8; 2784 | color: #0a0a0a; } 2785 | thead tr, 2786 | tfoot tr { 2787 | background: transparent; } 2788 | thead th, 2789 | thead td, 2790 | tfoot th, 2791 | tfoot td { 2792 | padding: 0.5rem 0.625rem 0.625rem; 2793 | font-weight: bold; 2794 | text-align: left; } 2795 | tbody tr:nth-child(even) { 2796 | background-color: #f1f1f1; } 2797 | tbody th, 2798 | tbody td { 2799 | padding: 0.5rem 0.625rem 0.625rem; } 2800 | 2801 | @media screen and (max-width: 63.9375em) { 2802 | table.stack thead { 2803 | display: none; } 2804 | table.stack tfoot { 2805 | display: none; } 2806 | table.stack tr, 2807 | table.stack th, 2808 | table.stack td { 2809 | display: block; } 2810 | table.stack td { 2811 | border-top: 0; } } 2812 | 2813 | table.scroll { 2814 | display: block; 2815 | width: 100%; 2816 | overflow-y: scroll; } 2817 | 2818 | table.hover tr:hover { 2819 | background-color: #f9f9f9; } 2820 | 2821 | table.hover tr:nth-of-type(even):hover { 2822 | background-color: #ececec; } 2823 | 2824 | .tabs { 2825 | margin: 0; 2826 | list-style-type: none; 2827 | background: #fefefe; 2828 | border: 1px solid #e6e6e6; } 2829 | .tabs::before, .tabs::after { 2830 | content: ' '; 2831 | display: table; } 2832 | .tabs::after { 2833 | clear: both; } 2834 | .tabs.simple > li > a { 2835 | padding: 0; } 2836 | .tabs.simple > li > a:hover { 2837 | background: transparent; } 2838 | .tabs.vertical > li { 2839 | width: auto; 2840 | float: none; 2841 | display: block; } 2842 | .tabs.primary { 2843 | background: #2199e8; } 2844 | .tabs.primary > li > a { 2845 | color: #fefefe; } 2846 | .tabs.primary > li > a:hover, .tabs.primary > li > a:focus { 2847 | background: #1893e4; } 2848 | 2849 | .tabs-title { 2850 | float: left; } 2851 | .tabs-title > a { 2852 | display: block; 2853 | padding: 1.25rem 1.5rem; 2854 | line-height: 1; 2855 | font-size: 12px; 2856 | color: #2199e8; } 2857 | .tabs-title > a:hover, .tabs-title > a:focus, .tabs-title > a[aria-selected="true"] { 2858 | background: #e6e6e6; } 2859 | 2860 | .tabs-content { 2861 | background: #fefefe; 2862 | transition: all 0.5s ease; 2863 | border: 1px solid #e6e6e6; 2864 | border-top: 0; } 2865 | .tabs-content.vertical { 2866 | border: 1px solid #e6e6e6; 2867 | border-left: 0; } 2868 | 2869 | .tabs-panel { 2870 | display: none; 2871 | padding: 1rem; } 2872 | .tabs-panel.is-active { 2873 | display: block; } 2874 | 2875 | .thumbnail { 2876 | border: solid 4px #fefefe; 2877 | box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2); 2878 | display: inline-block; 2879 | line-height: 0; 2880 | max-width: 100%; 2881 | transition: box-shadow 200ms ease-out; 2882 | border-radius: 0; 2883 | margin-bottom: 1rem; } 2884 | .thumbnail:hover, .thumbnail:focus { 2885 | box-shadow: 0 0 6px 1px rgba(33, 153, 232, 0.5); } 2886 | 2887 | .title-bar { 2888 | background: #0a0a0a; 2889 | color: #fefefe; 2890 | padding: 0.5rem; } 2891 | .title-bar::before, .title-bar::after { 2892 | content: ' '; 2893 | display: table; } 2894 | .title-bar::after { 2895 | clear: both; } 2896 | .title-bar .menu-icon { 2897 | margin-left: 0.25rem; 2898 | margin-right: 0.5rem; } 2899 | 2900 | .title-bar-left { 2901 | float: left; } 2902 | 2903 | .title-bar-right { 2904 | float: right; 2905 | text-align: right; } 2906 | 2907 | .title-bar-title { 2908 | font-weight: bold; 2909 | vertical-align: middle; 2910 | display: inline-block; } 2911 | 2912 | .menu-icon { 2913 | position: relative; 2914 | display: inline-block; 2915 | vertical-align: middle; 2916 | cursor: pointer; 2917 | width: 20px; 2918 | height: 16px; } 2919 | .menu-icon::after { 2920 | content: ''; 2921 | position: absolute; 2922 | display: block; 2923 | width: 100%; 2924 | height: 2px; 2925 | background: white; 2926 | top: 0; 2927 | left: 0; 2928 | box-shadow: 0 7px 0 white, 0 14px 0 white; } 2929 | .menu-icon:hover::after { 2930 | background: #cacaca; 2931 | box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; } 2932 | 2933 | .menu-icon.dark { 2934 | position: relative; 2935 | display: inline-block; 2936 | vertical-align: middle; 2937 | cursor: pointer; 2938 | width: 20px; 2939 | height: 16px; } 2940 | .menu-icon.dark::after { 2941 | content: ''; 2942 | position: absolute; 2943 | display: block; 2944 | width: 100%; 2945 | height: 2px; 2946 | background: black; 2947 | top: 0; 2948 | left: 0; 2949 | box-shadow: 0 7px 0 black, 0 14px 0 black; } 2950 | .menu-icon.dark:hover::after { 2951 | background: #666; 2952 | box-shadow: 0 7px 0 #666, 0 14px 0 #666; } 2953 | 2954 | .has-tip { 2955 | border-bottom: dotted 1px #8a8a8a; 2956 | font-weight: bold; 2957 | position: relative; 2958 | display: inline-block; } 2959 | .has-tip:hover { 2960 | cursor: help; } 2961 | 2962 | .tooltip { 2963 | background-color: #0a0a0a; 2964 | color: #fefefe; 2965 | font-size: 80%; 2966 | padding: 0.75rem; 2967 | position: absolute; 2968 | z-index: 10; 2969 | top: calc(100% + 0.6495rem); 2970 | max-width: 10rem !important; 2971 | border-radius: 0; } 2972 | .tooltip::before { 2973 | content: ''; 2974 | display: block; 2975 | width: 0; 2976 | height: 0; 2977 | border: inset 0.75rem; 2978 | border-color: transparent transparent #0a0a0a; 2979 | border-bottom-style: solid; 2980 | bottom: 100%; 2981 | position: absolute; 2982 | left: 50%; 2983 | -webkit-transform: translateX(-50%); 2984 | -ms-transform: translateX(-50%); 2985 | transform: translateX(-50%); } 2986 | .tooltip.top::before { 2987 | content: ''; 2988 | display: block; 2989 | width: 0; 2990 | height: 0; 2991 | border: inset 0.75rem; 2992 | border-color: #0a0a0a transparent transparent; 2993 | border-top-style: solid; 2994 | top: 100%; 2995 | bottom: auto; } 2996 | .tooltip.left::before { 2997 | content: ''; 2998 | display: block; 2999 | width: 0; 3000 | height: 0; 3001 | border: inset 0.75rem; 3002 | border-color: transparent transparent transparent #0a0a0a; 3003 | border-left-style: solid; 3004 | bottom: auto; 3005 | left: 100%; 3006 | top: 50%; 3007 | -webkit-transform: translateY(-50%); 3008 | -ms-transform: translateY(-50%); 3009 | transform: translateY(-50%); } 3010 | .tooltip.right::before { 3011 | content: ''; 3012 | display: block; 3013 | width: 0; 3014 | height: 0; 3015 | border: inset 0.75rem; 3016 | border-color: transparent #0a0a0a transparent transparent; 3017 | border-right-style: solid; 3018 | bottom: auto; 3019 | left: auto; 3020 | right: 100%; 3021 | top: 50%; 3022 | -webkit-transform: translateY(-50%); 3023 | -ms-transform: translateY(-50%); 3024 | transform: translateY(-50%); } 3025 | 3026 | .top-bar { 3027 | padding: 0.5rem; } 3028 | .top-bar::before, .top-bar::after { 3029 | content: ' '; 3030 | display: table; } 3031 | .top-bar::after { 3032 | clear: both; } 3033 | .top-bar, .top-bar ul { 3034 | background-color: #eee; } 3035 | .top-bar input { 3036 | width: 200px; 3037 | margin-right: 1rem; } 3038 | 3039 | @media screen and (min-width: 32em) { 3040 | .top-bar-left { 3041 | float: left; } 3042 | .top-bar-right { 3043 | float: right; } } 3044 | 3045 | .slide-in-down.mui-enter { 3046 | -webkit-transform: translateY(-100%); 3047 | -ms-transform: translateY(-100%); 3048 | transform: translateY(-100%); 3049 | transition-property: -webkit-transform, opacity; 3050 | transition-property: transform, opacity; 3051 | -webkit-backface-visibility: hidden; 3052 | backface-visibility: hidden; } 3053 | 3054 | .slide-in-down.mui-enter.mui-enter-active { 3055 | -webkit-transform: translateY(0); 3056 | -ms-transform: translateY(0); 3057 | transform: translateY(0); } 3058 | 3059 | .slide-in-left.mui-enter { 3060 | -webkit-transform: translateX(-100%); 3061 | -ms-transform: translateX(-100%); 3062 | transform: translateX(-100%); 3063 | transition-property: -webkit-transform, opacity; 3064 | transition-property: transform, opacity; 3065 | -webkit-backface-visibility: hidden; 3066 | backface-visibility: hidden; } 3067 | 3068 | .slide-in-left.mui-enter.mui-enter-active { 3069 | -webkit-transform: translateX(0); 3070 | -ms-transform: translateX(0); 3071 | transform: translateX(0); } 3072 | 3073 | .slide-in-up.mui-enter { 3074 | -webkit-transform: translateY(100%); 3075 | -ms-transform: translateY(100%); 3076 | transform: translateY(100%); 3077 | transition-property: -webkit-transform, opacity; 3078 | transition-property: transform, opacity; 3079 | -webkit-backface-visibility: hidden; 3080 | backface-visibility: hidden; } 3081 | 3082 | .slide-in-up.mui-enter.mui-enter-active { 3083 | -webkit-transform: translateY(0); 3084 | -ms-transform: translateY(0); 3085 | transform: translateY(0); } 3086 | 3087 | .slide-in-right.mui-enter { 3088 | -webkit-transform: translateX(100%); 3089 | -ms-transform: translateX(100%); 3090 | transform: translateX(100%); 3091 | transition-property: -webkit-transform, opacity; 3092 | transition-property: transform, opacity; 3093 | -webkit-backface-visibility: hidden; 3094 | backface-visibility: hidden; } 3095 | 3096 | .slide-in-right.mui-enter.mui-enter-active { 3097 | -webkit-transform: translateX(0); 3098 | -ms-transform: translateX(0); 3099 | transform: translateX(0); } 3100 | 3101 | .slide-out-down.mui-leave { 3102 | -webkit-transform: translateY(0); 3103 | -ms-transform: translateY(0); 3104 | transform: translateY(0); 3105 | transition-property: -webkit-transform, opacity; 3106 | transition-property: transform, opacity; 3107 | -webkit-backface-visibility: hidden; 3108 | backface-visibility: hidden; } 3109 | 3110 | .slide-out-down.mui-leave.mui-leave-active { 3111 | -webkit-transform: translateY(-100%); 3112 | -ms-transform: translateY(-100%); 3113 | transform: translateY(-100%); } 3114 | 3115 | .slide-out-right.mui-leave { 3116 | -webkit-transform: translateX(0); 3117 | -ms-transform: translateX(0); 3118 | transform: translateX(0); 3119 | transition-property: -webkit-transform, opacity; 3120 | transition-property: transform, opacity; 3121 | -webkit-backface-visibility: hidden; 3122 | backface-visibility: hidden; } 3123 | 3124 | .slide-out-right.mui-leave.mui-leave-active { 3125 | -webkit-transform: translateX(100%); 3126 | -ms-transform: translateX(100%); 3127 | transform: translateX(100%); } 3128 | 3129 | .slide-out-up.mui-leave { 3130 | -webkit-transform: translateY(0); 3131 | -ms-transform: translateY(0); 3132 | transform: translateY(0); 3133 | transition-property: -webkit-transform, opacity; 3134 | transition-property: transform, opacity; 3135 | -webkit-backface-visibility: hidden; 3136 | backface-visibility: hidden; } 3137 | 3138 | .slide-out-up.mui-leave.mui-leave-active { 3139 | -webkit-transform: translateY(-100%); 3140 | -ms-transform: translateY(-100%); 3141 | transform: translateY(-100%); } 3142 | 3143 | .slide-out-left.mui-leave { 3144 | -webkit-transform: translateX(0); 3145 | -ms-transform: translateX(0); 3146 | transform: translateX(0); 3147 | transition-property: -webkit-transform, opacity; 3148 | transition-property: transform, opacity; 3149 | -webkit-backface-visibility: hidden; 3150 | backface-visibility: hidden; } 3151 | 3152 | .slide-out-left.mui-leave.mui-leave-active { 3153 | -webkit-transform: translateX(-100%); 3154 | -ms-transform: translateX(-100%); 3155 | transform: translateX(-100%); } 3156 | 3157 | .fade-in.mui-enter { 3158 | opacity: 0; 3159 | transition-property: opacity; } 3160 | 3161 | .fade-in.mui-enter.mui-enter-active { 3162 | opacity: 1; } 3163 | 3164 | .fade-out.mui-leave { 3165 | opacity: 1; 3166 | transition-property: opacity; } 3167 | 3168 | .fade-out.mui-leave.mui-leave-active { 3169 | opacity: 0; } 3170 | 3171 | .hinge-in-from-top.mui-enter { 3172 | -webkit-transform: perspective(2000px) rotateX(-90deg); 3173 | transform: perspective(2000px) rotateX(-90deg); 3174 | -webkit-transform-origin: top; 3175 | -ms-transform-origin: top; 3176 | transform-origin: top; 3177 | transition-property: -webkit-transform, opacity; 3178 | transition-property: transform, opacity; 3179 | opacity: 0; } 3180 | 3181 | .hinge-in-from-top.mui-enter.mui-enter-active { 3182 | -webkit-transform: perspective(2000px) rotate(0deg); 3183 | transform: perspective(2000px) rotate(0deg); 3184 | opacity: 1; } 3185 | 3186 | .hinge-in-from-right.mui-enter { 3187 | -webkit-transform: perspective(2000px) rotateY(-90deg); 3188 | transform: perspective(2000px) rotateY(-90deg); 3189 | -webkit-transform-origin: right; 3190 | -ms-transform-origin: right; 3191 | transform-origin: right; 3192 | transition-property: -webkit-transform, opacity; 3193 | transition-property: transform, opacity; 3194 | opacity: 0; } 3195 | 3196 | .hinge-in-from-right.mui-enter.mui-enter-active { 3197 | -webkit-transform: perspective(2000px) rotate(0deg); 3198 | transform: perspective(2000px) rotate(0deg); 3199 | opacity: 1; } 3200 | 3201 | .hinge-in-from-bottom.mui-enter { 3202 | -webkit-transform: perspective(2000px) rotateX(90deg); 3203 | transform: perspective(2000px) rotateX(90deg); 3204 | -webkit-transform-origin: bottom; 3205 | -ms-transform-origin: bottom; 3206 | transform-origin: bottom; 3207 | transition-property: -webkit-transform, opacity; 3208 | transition-property: transform, opacity; 3209 | opacity: 0; } 3210 | 3211 | .hinge-in-from-bottom.mui-enter.mui-enter-active { 3212 | -webkit-transform: perspective(2000px) rotate(0deg); 3213 | transform: perspective(2000px) rotate(0deg); 3214 | opacity: 1; } 3215 | 3216 | .hinge-in-from-left.mui-enter { 3217 | -webkit-transform: perspective(2000px) rotateY(90deg); 3218 | transform: perspective(2000px) rotateY(90deg); 3219 | -webkit-transform-origin: left; 3220 | -ms-transform-origin: left; 3221 | transform-origin: left; 3222 | transition-property: -webkit-transform, opacity; 3223 | transition-property: transform, opacity; 3224 | opacity: 0; } 3225 | 3226 | .hinge-in-from-left.mui-enter.mui-enter-active { 3227 | -webkit-transform: perspective(2000px) rotate(0deg); 3228 | transform: perspective(2000px) rotate(0deg); 3229 | opacity: 1; } 3230 | 3231 | .hinge-in-from-middle-x.mui-enter { 3232 | -webkit-transform: perspective(2000px) rotateX(-90deg); 3233 | transform: perspective(2000px) rotateX(-90deg); 3234 | -webkit-transform-origin: center; 3235 | -ms-transform-origin: center; 3236 | transform-origin: center; 3237 | transition-property: -webkit-transform, opacity; 3238 | transition-property: transform, opacity; 3239 | opacity: 0; } 3240 | 3241 | .hinge-in-from-middle-x.mui-enter.mui-enter-active { 3242 | -webkit-transform: perspective(2000px) rotate(0deg); 3243 | transform: perspective(2000px) rotate(0deg); 3244 | opacity: 1; } 3245 | 3246 | .hinge-in-from-middle-y.mui-enter { 3247 | -webkit-transform: perspective(2000px) rotateY(-90deg); 3248 | transform: perspective(2000px) rotateY(-90deg); 3249 | -webkit-transform-origin: center; 3250 | -ms-transform-origin: center; 3251 | transform-origin: center; 3252 | transition-property: -webkit-transform, opacity; 3253 | transition-property: transform, opacity; 3254 | opacity: 0; } 3255 | 3256 | .hinge-in-from-middle-y.mui-enter.mui-enter-active { 3257 | -webkit-transform: perspective(2000px) rotate(0deg); 3258 | transform: perspective(2000px) rotate(0deg); 3259 | opacity: 1; } 3260 | 3261 | .hinge-out-from-top.mui-leave { 3262 | -webkit-transform: perspective(2000px) rotate(0deg); 3263 | transform: perspective(2000px) rotate(0deg); 3264 | -webkit-transform-origin: top; 3265 | -ms-transform-origin: top; 3266 | transform-origin: top; 3267 | transition-property: -webkit-transform, opacity; 3268 | transition-property: transform, opacity; 3269 | opacity: 1; } 3270 | 3271 | .hinge-out-from-top.mui-leave.mui-leave-active { 3272 | -webkit-transform: perspective(2000px) rotateX(-90deg); 3273 | transform: perspective(2000px) rotateX(-90deg); 3274 | opacity: 0; } 3275 | 3276 | .hinge-out-from-right.mui-leave { 3277 | -webkit-transform: perspective(2000px) rotate(0deg); 3278 | transform: perspective(2000px) rotate(0deg); 3279 | -webkit-transform-origin: right; 3280 | -ms-transform-origin: right; 3281 | transform-origin: right; 3282 | transition-property: -webkit-transform, opacity; 3283 | transition-property: transform, opacity; 3284 | opacity: 1; } 3285 | 3286 | .hinge-out-from-right.mui-leave.mui-leave-active { 3287 | -webkit-transform: perspective(2000px) rotateY(-90deg); 3288 | transform: perspective(2000px) rotateY(-90deg); 3289 | opacity: 0; } 3290 | 3291 | .hinge-out-from-bottom.mui-leave { 3292 | -webkit-transform: perspective(2000px) rotate(0deg); 3293 | transform: perspective(2000px) rotate(0deg); 3294 | -webkit-transform-origin: bottom; 3295 | -ms-transform-origin: bottom; 3296 | transform-origin: bottom; 3297 | transition-property: -webkit-transform, opacity; 3298 | transition-property: transform, opacity; 3299 | opacity: 1; } 3300 | 3301 | .hinge-out-from-bottom.mui-leave.mui-leave-active { 3302 | -webkit-transform: perspective(2000px) rotateX(90deg); 3303 | transform: perspective(2000px) rotateX(90deg); 3304 | opacity: 0; } 3305 | 3306 | .hinge-out-from-left.mui-leave { 3307 | -webkit-transform: perspective(2000px) rotate(0deg); 3308 | transform: perspective(2000px) rotate(0deg); 3309 | -webkit-transform-origin: left; 3310 | -ms-transform-origin: left; 3311 | transform-origin: left; 3312 | transition-property: -webkit-transform, opacity; 3313 | transition-property: transform, opacity; 3314 | opacity: 1; } 3315 | 3316 | .hinge-out-from-left.mui-leave.mui-leave-active { 3317 | -webkit-transform: perspective(2000px) rotateY(90deg); 3318 | transform: perspective(2000px) rotateY(90deg); 3319 | opacity: 0; } 3320 | 3321 | .hinge-out-from-middle-x.mui-leave { 3322 | -webkit-transform: perspective(2000px) rotate(0deg); 3323 | transform: perspective(2000px) rotate(0deg); 3324 | -webkit-transform-origin: center; 3325 | -ms-transform-origin: center; 3326 | transform-origin: center; 3327 | transition-property: -webkit-transform, opacity; 3328 | transition-property: transform, opacity; 3329 | opacity: 1; } 3330 | 3331 | .hinge-out-from-middle-x.mui-leave.mui-leave-active { 3332 | -webkit-transform: perspective(2000px) rotateX(-90deg); 3333 | transform: perspective(2000px) rotateX(-90deg); 3334 | opacity: 0; } 3335 | 3336 | .hinge-out-from-middle-y.mui-leave { 3337 | -webkit-transform: perspective(2000px) rotate(0deg); 3338 | transform: perspective(2000px) rotate(0deg); 3339 | -webkit-transform-origin: center; 3340 | -ms-transform-origin: center; 3341 | transform-origin: center; 3342 | transition-property: -webkit-transform, opacity; 3343 | transition-property: transform, opacity; 3344 | opacity: 1; } 3345 | 3346 | .hinge-out-from-middle-y.mui-leave.mui-leave-active { 3347 | -webkit-transform: perspective(2000px) rotateY(-90deg); 3348 | transform: perspective(2000px) rotateY(-90deg); 3349 | opacity: 0; } 3350 | 3351 | .scale-in-up.mui-enter { 3352 | -webkit-transform: scale(0.5); 3353 | -ms-transform: scale(0.5); 3354 | transform: scale(0.5); 3355 | transition-property: -webkit-transform, opacity; 3356 | transition-property: transform, opacity; 3357 | opacity: 0; } 3358 | 3359 | .scale-in-up.mui-enter.mui-enter-active { 3360 | -webkit-transform: scale(1); 3361 | -ms-transform: scale(1); 3362 | transform: scale(1); 3363 | opacity: 1; } 3364 | 3365 | .scale-in-down.mui-enter { 3366 | -webkit-transform: scale(1.5); 3367 | -ms-transform: scale(1.5); 3368 | transform: scale(1.5); 3369 | transition-property: -webkit-transform, opacity; 3370 | transition-property: transform, opacity; 3371 | opacity: 0; } 3372 | 3373 | .scale-in-down.mui-enter.mui-enter-active { 3374 | -webkit-transform: scale(1); 3375 | -ms-transform: scale(1); 3376 | transform: scale(1); 3377 | opacity: 1; } 3378 | 3379 | .scale-out-up.mui-leave { 3380 | -webkit-transform: scale(1); 3381 | -ms-transform: scale(1); 3382 | transform: scale(1); 3383 | transition-property: -webkit-transform, opacity; 3384 | transition-property: transform, opacity; 3385 | opacity: 1; } 3386 | 3387 | .scale-out-up.mui-leave.mui-leave-active { 3388 | -webkit-transform: scale(1.5); 3389 | -ms-transform: scale(1.5); 3390 | transform: scale(1.5); 3391 | opacity: 0; } 3392 | 3393 | .scale-out-down.mui-leave { 3394 | -webkit-transform: scale(1); 3395 | -ms-transform: scale(1); 3396 | transform: scale(1); 3397 | transition-property: -webkit-transform, opacity; 3398 | transition-property: transform, opacity; 3399 | opacity: 1; } 3400 | 3401 | .scale-out-down.mui-leave.mui-leave-active { 3402 | -webkit-transform: scale(0.5); 3403 | -ms-transform: scale(0.5); 3404 | transform: scale(0.5); 3405 | opacity: 0; } 3406 | 3407 | .spin-in.mui-enter { 3408 | -webkit-transform: rotate(-0.75turn); 3409 | -ms-transform: rotate(-0.75turn); 3410 | transform: rotate(-0.75turn); 3411 | transition-property: -webkit-transform, opacity; 3412 | transition-property: transform, opacity; 3413 | opacity: 0; } 3414 | 3415 | .spin-in.mui-enter.mui-enter-active { 3416 | -webkit-transform: rotate(0); 3417 | -ms-transform: rotate(0); 3418 | transform: rotate(0); 3419 | opacity: 1; } 3420 | 3421 | .spin-out.mui-leave { 3422 | -webkit-transform: rotate(0); 3423 | -ms-transform: rotate(0); 3424 | transform: rotate(0); 3425 | transition-property: -webkit-transform, opacity; 3426 | transition-property: transform, opacity; 3427 | opacity: 1; } 3428 | 3429 | .spin-out.mui-leave.mui-leave-active { 3430 | -webkit-transform: rotate(0.75turn); 3431 | -ms-transform: rotate(0.75turn); 3432 | transform: rotate(0.75turn); 3433 | opacity: 0; } 3434 | 3435 | .spin-in-ccw.mui-enter { 3436 | -webkit-transform: rotate(0.75turn); 3437 | -ms-transform: rotate(0.75turn); 3438 | transform: rotate(0.75turn); 3439 | transition-property: -webkit-transform, opacity; 3440 | transition-property: transform, opacity; 3441 | opacity: 0; } 3442 | 3443 | .spin-in-ccw.mui-enter.mui-enter-active { 3444 | -webkit-transform: rotate(0); 3445 | -ms-transform: rotate(0); 3446 | transform: rotate(0); 3447 | opacity: 1; } 3448 | 3449 | .spin-out-ccw.mui-leave { 3450 | -webkit-transform: rotate(0); 3451 | -ms-transform: rotate(0); 3452 | transform: rotate(0); 3453 | transition-property: -webkit-transform, opacity; 3454 | transition-property: transform, opacity; 3455 | opacity: 1; } 3456 | 3457 | .spin-out-ccw.mui-leave.mui-leave-active { 3458 | -webkit-transform: rotate(-0.75turn); 3459 | -ms-transform: rotate(-0.75turn); 3460 | transform: rotate(-0.75turn); 3461 | opacity: 0; } 3462 | 3463 | .slow { 3464 | transition-duration: 750ms !important; } 3465 | 3466 | .fast { 3467 | transition-duration: 250ms !important; } 3468 | 3469 | .linear { 3470 | transition-timing-function: linear !important; } 3471 | 3472 | .ease { 3473 | transition-timing-function: ease !important; } 3474 | 3475 | .ease-in { 3476 | transition-timing-function: ease-in !important; } 3477 | 3478 | .ease-out { 3479 | transition-timing-function: ease-out !important; } 3480 | 3481 | .ease-in-out { 3482 | transition-timing-function: ease-in-out !important; } 3483 | 3484 | .bounce-in { 3485 | transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } 3486 | 3487 | .bounce-out { 3488 | transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } 3489 | 3490 | .bounce-in-out { 3491 | transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } 3492 | 3493 | .short-delay { 3494 | transition-delay: 300ms !important; } 3495 | 3496 | .long-delay { 3497 | transition-delay: 700ms !important; } 3498 | 3499 | .shake { 3500 | -webkit-animation-name: shake-7; 3501 | animation-name: shake-7; } 3502 | 3503 | @-webkit-keyframes shake-7 { 3504 | 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { 3505 | -webkit-transform: translateX(7%); 3506 | transform: translateX(7%); } 3507 | 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { 3508 | -webkit-transform: translateX(-7%); 3509 | transform: translateX(-7%); } } 3510 | 3511 | @keyframes shake-7 { 3512 | 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { 3513 | -webkit-transform: translateX(7%); 3514 | transform: translateX(7%); } 3515 | 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { 3516 | -webkit-transform: translateX(-7%); 3517 | transform: translateX(-7%); } } 3518 | 3519 | .spin-cw { 3520 | -webkit-animation-name: spin-cw-1turn; 3521 | animation-name: spin-cw-1turn; } 3522 | 3523 | @-webkit-keyframes spin-cw-1turn { 3524 | 0% { 3525 | -webkit-transform: rotate(-1turn); 3526 | transform: rotate(-1turn); } 3527 | 100% { 3528 | -webkit-transform: rotate(0); 3529 | transform: rotate(0); } } 3530 | 3531 | @keyframes spin-cw-1turn { 3532 | 0% { 3533 | -webkit-transform: rotate(-1turn); 3534 | transform: rotate(-1turn); } 3535 | 100% { 3536 | -webkit-transform: rotate(0); 3537 | transform: rotate(0); } } 3538 | 3539 | .spin-ccw { 3540 | -webkit-animation-name: spin-cw-1turn; 3541 | animation-name: spin-cw-1turn; } 3542 | 3543 | @keyframes spin-cw-1turn { 3544 | 0% { 3545 | -webkit-transform: rotate(0); 3546 | transform: rotate(0); } 3547 | 100% { 3548 | -webkit-transform: rotate(1turn); 3549 | transform: rotate(1turn); } } 3550 | 3551 | .wiggle { 3552 | -webkit-animation-name: wiggle-7deg; 3553 | animation-name: wiggle-7deg; } 3554 | 3555 | @-webkit-keyframes wiggle-7deg { 3556 | 40%, 50%, 60% { 3557 | -webkit-transform: rotate(7deg); 3558 | transform: rotate(7deg); } 3559 | 35%, 45%, 55%, 65% { 3560 | -webkit-transform: rotate(-7deg); 3561 | transform: rotate(-7deg); } 3562 | 0%, 30%, 70%, 100% { 3563 | -webkit-transform: rotate(0); 3564 | transform: rotate(0); } } 3565 | 3566 | @keyframes wiggle-7deg { 3567 | 40%, 50%, 60% { 3568 | -webkit-transform: rotate(7deg); 3569 | transform: rotate(7deg); } 3570 | 35%, 45%, 55%, 65% { 3571 | -webkit-transform: rotate(-7deg); 3572 | transform: rotate(-7deg); } 3573 | 0%, 30%, 70%, 100% { 3574 | -webkit-transform: rotate(0); 3575 | transform: rotate(0); } } 3576 | 3577 | .infinite { 3578 | -webkit-animation-iteration-count: infinite; 3579 | animation-iteration-count: infinite; } 3580 | 3581 | .slow { 3582 | -webkit-animation-duration: 750ms !important; 3583 | animation-duration: 750ms !important; } 3584 | 3585 | .fast { 3586 | -webkit-animation-duration: 250ms !important; 3587 | animation-duration: 250ms !important; } 3588 | 3589 | .linear { 3590 | -webkit-animation-timing-function: linear !important; 3591 | animation-timing-function: linear !important; } 3592 | 3593 | .ease { 3594 | -webkit-animation-timing-function: ease !important; 3595 | animation-timing-function: ease !important; } 3596 | 3597 | .ease-in { 3598 | -webkit-animation-timing-function: ease-in !important; 3599 | animation-timing-function: ease-in !important; } 3600 | 3601 | .ease-out { 3602 | -webkit-animation-timing-function: ease-out !important; 3603 | animation-timing-function: ease-out !important; } 3604 | 3605 | .ease-in-out { 3606 | -webkit-animation-timing-function: ease-in-out !important; 3607 | animation-timing-function: ease-in-out !important; } 3608 | 3609 | .bounce-in { 3610 | -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; 3611 | animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } 3612 | 3613 | .bounce-out { 3614 | -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; 3615 | animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } 3616 | 3617 | .bounce-in-out { 3618 | -webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; 3619 | animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } 3620 | 3621 | .short-delay { 3622 | -webkit-animation-delay: 300ms !important; 3623 | animation-delay: 300ms !important; } 3624 | 3625 | .long-delay { 3626 | -webkit-animation-delay: 700ms !important; 3627 | animation-delay: 700ms !important; } 3628 | 3629 | .hit { 3630 | padding: 10px; 3631 | border-bottom: solid 1px #ccc; } 3632 | .hit .stats-wrapper { 3633 | width: 90px; 3634 | float: left; 3635 | padding: 20px; 3636 | font-size: .8em; 3637 | text-align: center; 3638 | background-color: #eee; 3639 | margin-right: 16px; } 3640 | .hit .stats-wrapper.accepted { 3641 | background-color: #cec; } 3642 | .hit .stats-wrapper.not-answered { 3643 | background-color: #ecc; } 3644 | .hit .stats-wrapper .votes { 3645 | margin-bottom: 8px; } 3646 | .hit .stats-wrapper .votes .nbVotes { 3647 | width: 100%; 3648 | display: block; 3649 | font-size: 1.2em; } 3650 | .hit .stats-wrapper .answers .nbAnswers { 3651 | display: block; 3652 | display-width: 100%; 3653 | font-size: 1.2em; } 3654 | .hit h1 { 3655 | font-size: 1.1em; } 3656 | .hit .infos { 3657 | font-size: .9em; 3658 | margin-bottom: 8px; 3659 | color: #aaa; } 3660 | .hit .infos .avatar { 3661 | width: 26px; 3662 | border-radius: 50%; 3663 | margin-right: 8px; } 3664 | .hit .label { 3665 | font-size: .8em; 3666 | background-color: #F7FDFF; 3667 | margin-right: 4px; 3668 | border: solid 1px #BED3DA; 3669 | border-radius: 12px; 3670 | color: #566F77; 3671 | padding: 4px 8px; } 3672 | .hit .text { 3673 | font-size: .8em; 3674 | margin-bottom: 8px; } 3675 | .hit em { 3676 | font-style: normal; 3677 | background: #FFFF00; } 3678 | 3679 | #facets .facet-title { 3680 | padding-bottom: 4px; 3681 | border-bottom: solid 1px #eee; 3682 | margin-top: 16px; 3683 | margin-bottom: 8px; } 3684 | 3685 | #facets .ais-refinement-list--checkbox { 3686 | margin-bottom: 0; } 3687 | 3688 | #facets .ais-refinement-list--count { 3689 | margin-left: 8px; 3690 | color: #bbb; } 3691 | -------------------------------------------------------------------------------- /public/img/stackoverflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shipow/instantsearch-stackoverflow/d8bc9ce4987bb235e8a400e5aead512ef3506c79/public/img/stackoverflow.png -------------------------------------------------------------------------------- /public/js/app.js: -------------------------------------------------------------------------------- 1 | $(document).foundation(); 2 | 3 | var search = instantsearch({ 4 | appId: config.algolia.appID, 5 | apiKey: config.algolia.searchKey, 6 | indexName: 'instantsearch-so-' + config.stackoverflow.keyword, 7 | urlSync: {} 8 | }); 9 | 10 | search.addWidget( 11 | instantsearch.widgets.searchBox({ 12 | container: '#q', 13 | placeholder: 'Search a question', 14 | poweredBy: true 15 | }) 16 | ); 17 | 18 | var hitTemplate = 19 | '
' + 20 | '
' + 21 | '
{{nbVotes}}Votes
' + 22 | '
{{answers.length}}Answers
' + 23 | '
' + 24 | '
' + 25 | '

Q: {{{_highlightResult.title.value}}}

' + 26 | '
{{{_snippetResult.text.value}}}...
' + 27 | '
' + 28 | '{{author}}' + 29 | ' - viewed {{nbViews}} times - {{timeAgo}} - {{comments.length}} comments' + 30 | '
' + 31 | '{{#tags}}{{.}}{{/tags}}' + 32 | '
' + 33 | '
'; 34 | 35 | search.addWidget( 36 | instantsearch.widgets.hits({ 37 | container: '#hits', 38 | hitsPerPage: 30, 39 | templates: { 40 | item: hitTemplate 41 | } 42 | }) 43 | ); 44 | 45 | search.addWidget( 46 | instantsearch.widgets.pagination({ 47 | container: '#pagination', 48 | cssClasses: { 49 | active: 'active' 50 | }, 51 | labels: { 52 | previous: 'Previous page', 53 | next: 'Next page' 54 | }, 55 | showFirstLast: false 56 | }) 57 | ); 58 | 59 | search.addWidget( 60 | instantsearch.widgets.refinementList({ 61 | container: '#tags', 62 | attributeName: 'tags', 63 | operator: 'and', 64 | limit: 20, 65 | cssClasses: { 66 | active: 'active' 67 | }, 68 | templates: { 69 | header: '
Tags
' 70 | } 71 | }) 72 | ); 73 | 74 | search.addWidget( 75 | instantsearch.widgets.refinementList({ 76 | container: '#answersAuthor', 77 | attributeName: 'answers.author', 78 | operator: 'or', 79 | limit: 20, 80 | cssClasses: { 81 | active: 'active' 82 | }, 83 | templates: { 84 | header: '
Answered by
' 85 | } 86 | }) 87 | ); 88 | 89 | search.addWidget( 90 | instantsearch.widgets.refinementList({ 91 | container: '#answered', 92 | attributeName: 'withAnswer', 93 | operator: 'and', 94 | cssClasses: { 95 | active: 'active' 96 | }, 97 | templates: { 98 | header: '
Answered
' 99 | }, 100 | transformData: { 101 | item: function (data) { 102 | data.name = data.highlighted = data.name === 'true' ? 'Answered' : 'Unanswered'; 103 | return data; 104 | } 105 | } 106 | }) 107 | ); 108 | 109 | search.addWidget( 110 | instantsearch.widgets.refinementList({ 111 | container: '#accepted', 112 | attributeName: 'withAcceptedAnswer', 113 | operator: 'and', 114 | cssClasses: { 115 | active: 'active' 116 | }, 117 | templates: { 118 | header: '
Accepted
' 119 | }, 120 | transformData: { 121 | item: function (data) { 122 | data.name = data.highlighted = data.name === 'true' ? 'Accepted' : 'Not accepted'; 123 | return data; 124 | } 125 | } 126 | }) 127 | ); 128 | 129 | search.start(); 130 | -------------------------------------------------------------------------------- /scrap/stackoverflow-questions.js: -------------------------------------------------------------------------------- 1 | var scrapper = function() { 2 | console.log('Start scrap'); 3 | var algoliasearch = require('algoliasearch'); 4 | var _ = require('lodash'); 5 | var Xray = require('x-ray'); 6 | var async = require('async'); 7 | 8 | var config = require('../config/admin.js') 9 | 10 | var x = new Xray(); 11 | // var xphan = new Xray().driver(phantom()); 12 | x.throttle(1, 2000); 13 | 14 | var client = algoliasearch(config.algolia.appID, config.algolia.writeKey); 15 | client.setRequestTimeout(3600000); 16 | var index = client.initIndex('instantsearch-so-'+ config.stackoverflow.keyword); 17 | var settings = {"minWordSizefor1Typo":4, 18 | "minWordSizefor2Typos":8, 19 | "hitsPerPage":20, 20 | "maxValuesPerFacet":100, 21 | "attributesToIndex":["title","tags","author"], 22 | "numericAttributesToIndex":null, 23 | "attributesToRetrieve":null, 24 | "allowTyposOnNumericTokens":true, 25 | "ignorePlurals":false, 26 | "advancedSyntax":false, 27 | "removeStopWords":false, 28 | "replaceSynonymsInHighlight":true, 29 | "distinct":false, 30 | "unretrievableAttributes":null, 31 | "optionalWords":null, 32 | "slaves":[], 33 | "attributesForFaceting":["tags","withAcceptedAnswer","withAnswer","answers.author"], 34 | "attributesToSnippet":["text:60"], 35 | "attributesToHighlight":null, 36 | "attributeForDistinct":null, 37 | "ranking":["typo","geo","words","proximity", 38 | "attribute","exact","custom"], 39 | "customRanking":["desc(date)","desc(vote)"], 40 | "separatorsToIndex":"", 41 | "removeWordsIfNoResults":"none", 42 | "queryType":"prefixLast", 43 | "highlightPreTag":"", 44 | "highlightPostTag":"", 45 | "typoTolerance":"true" }; 46 | 47 | index.setSettings(settings); 48 | 49 | var numberPattern = /\d+/g; 50 | 51 | x('http://stackoverflow.com/search?tab=newest&q=' + config.stackoverflow.keyword + '+is%3Aquestion&pagesize=50', '.result-link', [{ 52 | href: 'a@href', 53 | question: x('a@href', '#content .inner-content', [{ 54 | title: 'h1', 55 | objectID: '.question@data-questionid', 56 | text: '.post-text@html', 57 | href: 'h1 a@href', 58 | author: '.post-signature.owner .user-details a', 59 | authorUrl: '.post-signature.owner .user-details a@href', 60 | authorAvatar: '.post-signature.owner .gravatar-wrapper-32 img@src', 61 | nbVotes: '.question .vote-count-post', 62 | nbViews: '#qinfo tr:nth-child(2)', 63 | timeAgo: '#qinfo tr:nth-child(1)', 64 | tags: x('.post-taglist',['a']), 65 | answerAccepted: '.answer.accepted-answer@data-answerid', 66 | comments: x('.comment',[{ 67 | // text: '.comment-copy@html', 68 | author: '.comment-user', 69 | authorUrl: '.comment-user@href' 70 | }]), 71 | answers: x('.answer',[{ 72 | // text: '.post-text@html', 73 | accepted: '.vote-accepted-on', 74 | author: '.user-details a', 75 | authorUrl: '.user-details a@href', 76 | authorAvatar: '.user-gravatar32 img@src' 77 | }]), 78 | date: '.post-signature.owner .relativetime@title' 79 | }]) 80 | }]) 81 | .paginate('.pager a[rel="next"]@href') 82 | //.write('scrap/questions.json'); 83 | 84 | (function(err, data) { 85 | console.log(data.length); 86 | data = data.filter(function (item) { return !!item.question[0]; }); 87 | _.forEach(data, function(item,k){ 88 | question = item.question[0]; 89 | data[k] = question; 90 | data[k].href = question.href; 91 | data[k].date = Date.parse(question.date); 92 | data[k].nbViews = parseInt((question.nbViews).match( numberPattern )) || 0; 93 | data[k].withAnswer = (question.answers || []).length > 0; 94 | data[k].withAcceptedAnswer = (question.answers || []).some(function (answer) { return answer.accepted }); 95 | }); 96 | // split our results into chunks of 200 objects, to get a good indexing/insert performance 97 | var chunkedResults = _.chunk(data, 200); 98 | async.each(chunkedResults, index.saveObjects.bind(index), end); 99 | function end(err) { 100 | if (err) { 101 | throw err; 102 | } 103 | console.log('Algolia import done') 104 | }; 105 | }); 106 | }; 107 | 108 | // now expose with module.exports: 109 | module.exports = scrapper; 110 | -------------------------------------------------------------------------------- /scss/_instantsearch.sass: -------------------------------------------------------------------------------- 1 | .hit 2 | padding: 10px 3 | border-bottom: solid 1px #ccc 4 | .stats-wrapper 5 | width: 90px 6 | float: left 7 | padding: 20px 8 | font-size: .8em 9 | text-align: center 10 | background-color: #eee 11 | margin-right: 16px 12 | &.accepted 13 | background-color: #cec 14 | &.not-answered 15 | background-color: #ecc 16 | .votes 17 | margin-bottom: 8px 18 | .nbVotes 19 | width: 100% 20 | display: block 21 | font-size: 1.2em 22 | .answers 23 | .nbAnswers 24 | display: block 25 | width: 100% 26 | font-size: 1.2em 27 | .content-wrapper 28 | h1 29 | font-size: 1.1em 30 | .infos 31 | font-size: .9em 32 | margin-bottom: 8px 33 | color: #aaa 34 | .avatar 35 | width: 26px 36 | border-radius: 50% 37 | margin-right: 8px 38 | .label 39 | font-size: .8em 40 | background-color: #F7FDFF 41 | margin-right: 4px 42 | border: solid 1px #BED3DA 43 | border-radius: 12px 44 | color: #566F77 45 | padding: 4px 8px 46 | .text 47 | font-size: .8em 48 | margin-bottom: 8px 49 | em 50 | font-style: normal 51 | background: #FFFF00 52 | 53 | 54 | #facets 55 | .facet-title 56 | padding-bottom: 4px 57 | border-bottom: solid 1px #eee 58 | margin-top: 16px 59 | margin-bottom: 8px 60 | .ais-refinement-list--checkbox 61 | margin-bottom: 0 62 | .ais-refinement-list--count 63 | margin-left: 8px 64 | color: #bbb 65 | -------------------------------------------------------------------------------- /scss/_settings.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites Settings 2 | // ----------------------------- 3 | // 4 | // Table of Contents: 5 | // 6 | // 1. Abide 7 | // 2. Accordion 8 | // 3. Badge 9 | // 4. Breadcrumbs 10 | // 5. Breakpoints 11 | // 6. Button 12 | // 7. Button Group 13 | // 8. Callout 14 | // 9. Close Button 15 | // 10. Dropdown 16 | // 11. Flex Video 17 | // 12. Forms 18 | // 13. Global 19 | // 14. The Grid 20 | // 15. Label 21 | // 16. Media Object 22 | // 17. Menu 23 | // 18. Off-canvas 24 | // 19. Orbit 25 | // 20. Pagination 26 | // 21. Progress Bar 27 | // 22. Reveal 28 | // 23. Slider 29 | // 24. Switch 30 | // 25. Table 31 | // 26. Tabs 32 | // 27. Thumbnail 33 | // 28. Tooltip 34 | // 29. Top Bar 35 | // 30. Base Typography 36 | // 31. Typography Helpers 37 | 38 | // Abide 39 | // ----- 40 | 41 | // $abide-inputs: true; 42 | // $abide-labels: true; 43 | // $input-background-invalid: $alert-color; 44 | // $form-label-color-invalid: $alert-color; 45 | // $input-error-color: $alert-color; 46 | // $input-error-font-size: rem-calc(12); 47 | // $input-error-font-weight: $global-weight-bold; 48 | 49 | // Accordion 50 | // --------- 51 | 52 | // $accordion-background: $white; 53 | // $accordion-plusminus: true; 54 | // $accordion-item-color: foreground($accordion-background, $primary-color); 55 | // $accordion-item-background-hover: $light-gray; 56 | // $accordion-item-padding: 1.25rem 1rem; 57 | // $accordion-content-background: $white; 58 | // $accordion-content-border: 1px solid $light-gray; 59 | // $accordion-content-color: foreground($accordion-background, $primary-color); 60 | // $accordion-content-padding: 1rem; 61 | 62 | // Badge 63 | // ----- 64 | 65 | // $badge-background: $primary-color; 66 | // $badge-color: foreground($badge-background); 67 | // $badge-padding: 0.3em; 68 | // $badge-minwidth: 2.1em; 69 | // $badge-font-size: 0.6rem; 70 | 71 | // Breadcrumbs 72 | // ----------- 73 | 74 | // $breadcrumbs-margin: 0 0 $global-margin 0; 75 | // $breadcrumbs-item-font-size: rem-calc(11); 76 | // $breadcrumbs-item-color: $primary-color; 77 | // $breadcrumbs-item-color-current: $black; 78 | // $breadcrumbs-item-color-disabled: $medium-gray; 79 | // $breadcrumbs-item-margin: 0.75rem; 80 | // $breadcrumbs-item-uppercase: true; 81 | // $breadcrumbs-item-slash: true; 82 | 83 | // Breakpoints 84 | // ----------- 85 | 86 | // $breakpoints: ( 87 | // small: 0, 88 | // medium: 512px, 89 | // large: 1024px, 90 | // xlarge: 1200px, 91 | // xxlarge: 1440px, 92 | // ); 93 | // $breakpoint-classes: (small medium large); 94 | 95 | // Button 96 | // ------ 97 | 98 | // $button-padding: 0.85em 1em; 99 | // $button-margin: 0 $global-margin $global-margin 0; 100 | // $button-fill: solid; 101 | // $button-background: $primary-color; 102 | // $button-background-hover: scale-color($button-background, $lightness: -15%); 103 | // $button-font-color: #fff; 104 | // $button-font-color-alt: #000; 105 | // $button-sizes: ( 106 | // tiny: 0.6rem, 107 | // small: 0.75rem, 108 | // default: 0.9rem, 109 | // large: 1.25rem, 110 | // ); 111 | // $button-opacity-disabled: 0.25; 112 | 113 | // Button Group 114 | // ------------ 115 | 116 | // $buttongroup-margin: 1rem; 117 | // $buttongroup-spacing: 1px; 118 | // $buttongroup-child-selector: '.button'; 119 | // $buttongroup-expand-max: 6; 120 | 121 | // Callout 122 | // ------- 123 | 124 | // $callout-background: $white; 125 | // $callout-background-fade: 85%; 126 | // $callout-border: 1px solid rgba($black, 0.25); 127 | // $callout-margin: 0 0 1rem 0; 128 | // $callout-padding: 1rem; 129 | // $callout-font-color: $body-font-color; 130 | // $callout-font-color-alt: $body-background; 131 | // $callout-link-tint: 30%; 132 | 133 | // Close Button 134 | // ------------ 135 | 136 | // $closebutton-position: $global-right top; 137 | // $closebutton-offset-horizontal: 1rem; 138 | // $closebutton-offset-vertical: 0.5rem; 139 | // $closebutton-size: 2em; 140 | // $closebutton-lineheight: 1; 141 | // $closebutton-color: $dark-gray; 142 | // $closebutton-color-hover: $black; 143 | 144 | // Dropdown 145 | // -------- 146 | 147 | // $dropdown-padding: 1rem; 148 | // $dropdown-border: 1px solid $medium-gray; 149 | // $dropdown-font-size: 16rem; 150 | // $dropdown-width: 300px; 151 | // $dropdown-sizes: ( 152 | // tiny: 100px, 153 | // small: 200px, 154 | // large: 400px, 155 | // ); 156 | 157 | // Flex Video 158 | // ---------- 159 | 160 | // $flexvideo-padding-top: rem-calc(25); 161 | // $flexvideo-margin-bottom: rem-calc(16); 162 | // $flexvideo-ratio: 4 by 3; 163 | // $flexvideo-ratio-widescreen: 16 by 9; 164 | 165 | // Forms 166 | // ----- 167 | 168 | // $fieldset-border: 1px solid $medium-gray; 169 | // $fieldset-padding: rem-calc(20); 170 | // $fieldset-margin: rem-calc(18 0); 171 | // $legend-padding: rem-calc(0 3); 172 | // $form-spacing: rem-calc(16); 173 | // $helptext-color: #333; 174 | // $helptext-font-size: rem-calc(13); 175 | // $helptext-font-style: italic; 176 | // $input-prefix-color: $black; 177 | // $input-prefix-background: $light-gray; 178 | // $input-prefix-border: 1px solid $medium-gray; 179 | // $input-prefix-padding: 1rem; 180 | // $form-label-color: $black; 181 | // $form-label-font-size: rem-calc(14); 182 | // $form-label-font-weight: $global-weight-normal; 183 | // $form-label-line-height: 1.8; 184 | // $select-background: #fafafa; 185 | // $select-triangle-color: #333; 186 | // $input-color: $dark-gray; 187 | // $input-font-family: inherit; 188 | // $input-font-size: rem-calc(16); 189 | // $input-background: $white; 190 | // $input-background-focus: $white; 191 | // $input-background-disabled: $light-gray; 192 | // $input-border: 1px solid $medium-gray; 193 | // $input-border-focus: 1px solid $dark-gray; 194 | // $input-shadow: inset 0 1px 2px rgba($black, 0.1); 195 | // $input-shadow-focus: 0 0 5px $medium-gray; 196 | // $input-cursor-disabled: default; 197 | // $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; 198 | // $input-number-spinners: true; 199 | 200 | // Global 201 | // ------ 202 | 203 | // $global-width: rem-calc(1200); 204 | // $global-font-size: 100%; 205 | // $global-lineheight: 1.5; 206 | // $primary-color: #2199e8; 207 | // $secondary-color: #777; 208 | // $success-color: #3adb76; 209 | // $warning-color: #ffae00; 210 | // $alert-color: #ec5840; 211 | // $light-gray: #f3f3f3; 212 | // $medium-gray: #cacaca; 213 | // $dark-gray: #8a8a8a; 214 | // $black: #0a0a0a; 215 | // $white: #fefefe; 216 | // $body-background: $white; 217 | // $body-font-color: $black; 218 | // $body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 219 | // $body-antialiased: true; 220 | // $text-direction: ltr; 221 | // $global-margin: 1rem; 222 | // $global-padding: 1rem; 223 | // $global-margin: 1rem; 224 | // $global-weight-normal: normal; 225 | // $global-weight-bold: bold; 226 | // $global-radius: 3px; 227 | // $global-namespace: false; 228 | // $global-text-direction: ltr; 229 | // $rem-base: 16px; 230 | 231 | // The Grid 232 | // -------- 233 | 234 | // $grid-row-width: $global-width; 235 | // $grid-column-count: 12; 236 | // $grid-column-gutter: 1.875rem / 2; 237 | 238 | // Label 239 | // ----- 240 | 241 | // $label-background: $primary-color; 242 | // $label-color: foreground($label-background); 243 | // $label-font-size: 0.8rem; 244 | // $label-padding: 0.33333rem 0.5rem; 245 | 246 | // Media Object 247 | // ------------ 248 | 249 | // $mediaobject-margin-bottom: $global-margin; 250 | // $mediaobject-section-padding: $global-padding; 251 | // $mediaobject-image-width-stacked: 100%; 252 | 253 | // Menu 254 | // ---- 255 | 256 | // $menu-margin: 0; 257 | // $menu-margin-nested: 1rem; 258 | // $menu-item-padding: 0.7rem 1rem; 259 | // $menu-icon-spacing: 0.25rem; 260 | // $menu-expand-max: 6; 261 | 262 | // Off-canvas 263 | // ---------- 264 | 265 | // $offcanvas-size: 250px; 266 | // $offcanvas-background: $white; 267 | // $offcanvas-zindex: -1; 268 | // $offcanvas-transition-length: 0.5s; 269 | // $offcanvas-transition-timing: ease; 270 | // $offcanvas-exit-background: rgba($white, 0.25); 271 | // $maincontent-class: 'main-content'; 272 | // $maincontent-shadow: 0 0 10px rgba($black, 0.5); 273 | 274 | // Orbit 275 | // ----- 276 | 277 | // $orbit-bullet-background: $medium-gray; 278 | // $orbit-bullet-background-active: $dark-gray; 279 | // $orbit-bullet-diameter: 1.2rem; 280 | // $orbit-bullet-margin: 0.1rem; 281 | // $orbit-bullet-margin-top: 0.8rem; 282 | // $orbit-bullet-margin-bottom: 0.8rem; 283 | // $orbit-caption-background: rgba($black, 0.5); 284 | // $orbit-caption-padding: 1rem; 285 | // $orbit-control-background-hover: rgba($black, 0.5); 286 | // $orbit-control-padding: 1rem; 287 | // $orbit-control-zindex: 10; 288 | 289 | // Pagination 290 | // ---------- 291 | 292 | // $pagination-font-size: rem-calc(14); 293 | // $pagination-margin-bottom: $global-margin; 294 | // $pagination-item-color: $black; 295 | // $pagination-item-padding: rem-calc(3 10); 296 | // $pagination-item-spacing: rem-calc(1); 297 | // $pagination-item-background-hover: $light-gray; 298 | // $pagination-item-background-current: $primary-color; 299 | // $pagination-item-color-current: foreground($pagination-item-background-current); 300 | // $pagination-item-color-disabled: $medium-gray; 301 | // $pagination-ellipsis-color: $black; 302 | // $pagination-mobile-items: false; 303 | // $pagination-arrows: true; 304 | 305 | // Progress Bar 306 | // ------------ 307 | 308 | // $progress-height: 1rem; 309 | // $progress-background: $medium-gray; 310 | // $progress-margin-bottom: $global-margin; 311 | // $progress-meter-background: $primary-color; 312 | 313 | // Reveal 314 | // ------ 315 | 316 | // $reveal-background: $white; 317 | // $reveal-width: 600px; 318 | // $reveal-max-width: $global-width; 319 | // $reveal-offset: rem-calc(100); 320 | // $reveal-padding: $global-padding; 321 | // $reveal-border: 1px solid $medium-gray; 322 | // $reveal-zindex: 1005; 323 | // $reveal-overlay-background: rgba($black, 0.45); 324 | 325 | // Slider 326 | // ------ 327 | 328 | // $slider-height: 0.5rem; 329 | // $slider-width-vertical: $slider-height; 330 | // $slider-background: $light-gray; 331 | // $slider-fill-background: $medium-gray; 332 | // $slider-handle-height: 1.4rem; 333 | // $slider-handle-width: 1.4rem; 334 | // $slider-handle-background: $primary-color; 335 | // $slider-opacity-disabled: 0.25; 336 | // $slider-transition: all 0.2s ease-in-out; 337 | 338 | // Switch 339 | // ------ 340 | 341 | // $switch-background: $medium-gray; 342 | // $switch-background-active: $primary-color; 343 | // $switch-height: 2rem; 344 | // $switch-height-tiny: 1.5rem; 345 | // $switch-height-small: 1.75rem; 346 | // $switch-height-large: 2.5rem; 347 | // $switch-radius: 0; 348 | // $switch-margin: $global-margin; 349 | // $switch-paddle-background: $white; 350 | // $switch-paddle-offset: 0.25rem; 351 | // $switch-paddle-radius: 0; 352 | // $switch-paddle-transition: all 0.25s ease-out; 353 | 354 | // Table 355 | // ----- 356 | 357 | // $table-background: $white; 358 | // $table-color-scale: 5%; 359 | // $table-border: 1px solid smart-scale($table-background, $table-color-scale); 360 | // $table-padding: rem-calc(8 10 10); 361 | // $table-hover-scale: 2%; 362 | // $table-row-hover: darken($table-background, $table-hover-scale); 363 | // $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); 364 | // $table-striped-background: smart-scale($table-background, $table-color-scale); 365 | // $table-stripe: even; 366 | // $table-head-background: smart-scale($table-background, $table-color-scale / 2); 367 | // $table-foot-background: smart-scale($table-background, $table-color-scale); 368 | // $table-head-font-color: $body-font-color; 369 | // $show-header-for-stacked: false; 370 | 371 | // Tabs 372 | // ---- 373 | 374 | // $tab-margin: 0; 375 | // $tab-background: $white; 376 | // $tab-background-active: $light-gray; 377 | // $tab-border: $light-gray; 378 | // $tab-item-color: foreground($tab-background, $primary-color); 379 | // $tab-item-background-hover: $white; 380 | // $tab-item-padding: 1.25rem 1.5rem; 381 | // $tab-expand-max: 6; 382 | // $tab-content-background: $white; 383 | // $tab-content-border: $light-gray; 384 | // $tab-content-color: foreground($tab-background, $primary-color); 385 | // $tab-content-padding: 1rem; 386 | 387 | // Thumbnail 388 | // --------- 389 | 390 | // $thumbnail-border: solid 4px $white; 391 | // $thumbnail-margin-bottom: $global-margin; 392 | // $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); 393 | // $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); 394 | // $thumbnail-transition: box-shadow 200ms ease-out; 395 | 396 | // Tooltip 397 | // ------- 398 | 399 | // $tooltip-background-color: $black; 400 | // $tooltip-padding: 0.75rem; 401 | // $tooltip-font-size: $small-font-size; 402 | // $tooltip-pip-width: 0.75rem; 403 | // $tooltip-pip-height: $tooltip-pip-width * 0.866; 404 | // $tooltip-pip-offset: 1.25rem; 405 | 406 | // Top Bar 407 | // ------- 408 | 409 | // $topbar-padding: 0.5rem; 410 | // $topbar-background: #eee; 411 | // $topbar-link-color: #fff; 412 | // $topbar-input-width: 200px; 413 | 414 | // Base Typography 415 | // --------------- 416 | 417 | // $header-font-family: $body-font-family; 418 | // $header-font-weight: $global-weight-normal; 419 | // $header-font-style: normal; 420 | // $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; 421 | // $header-sizes: ( 422 | // small: ( 423 | // 'h1': 24, 424 | // 'h2': 20, 425 | // 'h3': 19, 426 | // 'h4': 18, 427 | // 'h5': 17, 428 | // 'h6': 16, 429 | // ), 430 | // medium: ( 431 | // 'h1': 48, 432 | // 'h2': 40, 433 | // 'h3': 31, 434 | // 'h4': 25, 435 | // 'h5': 20, 436 | // 'h6': 16, 437 | // ), 438 | // ); 439 | // $header-color: inherit; 440 | // $header-lineheight: 1.4; 441 | // $header-margin-bottom: 0.5rem; 442 | // $header-text-rendering: optimizeLegibility; 443 | // $small-font-size: 80%; 444 | // $header-small-font-color: $medium-gray; 445 | // $paragraph-lineheight: 1.6; 446 | // $paragraph-margin-bottom: 1rem; 447 | // $paragraph-text-rendering: optimizeLegibility; 448 | // $code-color: $black; 449 | // $code-font-family: $font-family-monospace; 450 | // $code-font-weight: $global-weight-normal; 451 | // $code-background: $light-gray; 452 | // $code-border: 1px solid $medium-gray; 453 | // $code-padding: rem-calc(2 5 1); 454 | // $anchor-color: $primary-color; 455 | // $anchor-color-hover: scale-color($anchor-color, $lightness: -14%); 456 | // $anchor-text-decoration: none; 457 | // $anchor-text-decoration-hover: none; 458 | // $hr-width: $global-width; 459 | // $hr-border: 1px solid $medium-gray; 460 | // $hr-margin: rem-calc(20) 0; 461 | // $list-lineheight: $paragraph-lineheight; 462 | // $list-margin-bottom: $paragraph-margin-bottom; 463 | // $list-style-type: disc; 464 | // $list-style-position: outside; 465 | // $list-side-margin: 1.25rem; 466 | // $list-nested-side-margin: 1.25rem; 467 | // $defnlist-margin-bottom: 1rem; 468 | // $defnlist-term-weight: $global-weight-bold; 469 | // $defnlist-term-margin-bottom: 0.3rem; 470 | // $blockquote-color: $dark-gray; 471 | // $blockquote-padding: rem-calc(9 20 0 19); 472 | // $blockquote-border: 1px solid $medium-gray; 473 | // $cite-font-size: rem-calc(13); 474 | // $cite-color: $dark-gray; 475 | // $keystroke-font: $font-family-monospace; 476 | // $keystroke-color: $black; 477 | // $keystroke-background: $light-gray; 478 | // $keystroke-padding: rem-calc(2 4 0); 479 | // $keystroke-radius: $global-radius; 480 | // $abbr-underline: 1px dotted $black; 481 | 482 | // Typography Helpers 483 | // ------------------ 484 | 485 | // $lead-font-size: $global-font-size * 1.25; 486 | // $lead-lineheight: 1.6; 487 | // $subheader-lineheight: 1.4; 488 | // $subheader-color: $dark-gray; 489 | // $subheader-font-weight: $global-weight-normal; 490 | // $subheader-margin-top: 0.2rem; 491 | // $subheader-margin-bottom: 0.5rem; 492 | // $stat-font-size: 2.5rem; 493 | -------------------------------------------------------------------------------- /scss/app.scss: -------------------------------------------------------------------------------- 1 | @charset 'utf-8'; 2 | 3 | @import 'settings'; 4 | @import 'foundation'; 5 | @import 'motion-ui'; 6 | 7 | @include foundation-global-styles; 8 | @include foundation-grid; 9 | @include foundation-typography; 10 | @include foundation-button; 11 | @include foundation-forms; 12 | @include foundation-visibility-classes; 13 | @include foundation-float-classes; 14 | @include foundation-accordion; 15 | @include foundation-badge; 16 | @include foundation-breadcrumbs; 17 | @include foundation-button-group; 18 | @include foundation-callout; 19 | @include foundation-close-button; 20 | @include foundation-drilldown-menu; 21 | @include foundation-dropdown; 22 | @include foundation-dropdown-menu; 23 | @include foundation-flex-video; 24 | @include foundation-label; 25 | @include foundation-media-object; 26 | @include foundation-menu; 27 | @include foundation-off-canvas; 28 | @include foundation-orbit; 29 | @include foundation-pagination; 30 | @include foundation-progress-bar; 31 | @include foundation-slider; 32 | @include foundation-sticky; 33 | @include foundation-reveal; 34 | @include foundation-switch; 35 | @include foundation-table; 36 | @include foundation-tabs; 37 | @include foundation-thumbnail; 38 | @include foundation-title-bar; 39 | @include foundation-tooltip; 40 | @include foundation-top-bar; 41 | 42 | @include motion-ui-transitions; 43 | @include motion-ui-animations; 44 | 45 | @import 'instantsearch'; 46 | -------------------------------------------------------------------------------- /views/index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html.no-js(lang='en') 3 | head 4 | meta(charset='utf-8') 5 | meta(content='ie=edge', http-equiv='x-ua-compatible') 6 | meta(content='width=device-width, initial-scale=1.0', name='viewport') 7 | title instantsearch StackOverflow 8 | link(href='css/app.css', rel='stylesheet') 9 | body 10 | .row 11 | .large-12.columns 12 | h1 13 | img(src='img/stackoverflow.png', width=50) 14 | | #{config.stackoverflow.keyword} at StackOverflow 15 | p 16 | | Welcome to our StackOverflow page, where we maintain a list of StackOverflow tags that our engineering team monitors and participates in. 17 | .row 18 | .large-3.columns 19 | #q 20 | #facets 21 | #answered 22 | #accepted 23 | #tags 24 | #answersAuthor 25 | .large-9.columns 26 | #hits 27 | #pagination 28 | script(src='/bower_components/jquery/dist/jquery.js') 29 | script(src='/bower_components/what-input/what-input.js') 30 | script(src='/bower_components/foundation-sites/dist/foundation.js') 31 | script(src='//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js') 32 | script. 33 | var config = !{JSON.stringify(config)}; 34 | script(src='js/app.js') 35 | --------------------------------------------------------------------------------