Showing preview only (609K chars total). Download the full file or copy to clipboard to get everything.
Repository: aFarkas/lazysizes
Branch: gh-pages
Commit: 1523a4ff4579
Files: 80
Total size: 581.7 KB
Directory structure:
gitextract__71k464b/
├── BingSiteAuth.xml
├── CHANGELOG.md
├── Gruntfile.js
├── LICENSE
├── README.md
├── animate.html
├── assets/
│ ├── css/
│ │ ├── bootstrap-theme.css
│ │ ├── bootstrap.css
│ │ ├── carousel.css
│ │ └── tidy.css
│ └── js/
│ └── bootstrap.js
├── bower.json
├── component.json
├── index.html
├── lazysizes-umd.js
├── lazysizes.d.ts
├── lazysizes.js
├── no-src.html
├── optimumx/
│ ├── child.html
│ ├── index.html
│ └── js/
│ └── parent.js
├── package.json
├── plugins/
│ ├── README.md
│ ├── artdirect/
│ │ ├── README.md
│ │ └── ls.artdirect.js
│ ├── aspectratio/
│ │ ├── README.md
│ │ └── ls.aspectratio.js
│ ├── attrchange/
│ │ ├── README.md
│ │ └── ls.attrchange.js
│ ├── bgset/
│ │ ├── README.md
│ │ └── ls.bgset.js
│ ├── blur-up/
│ │ ├── README.md
│ │ └── ls.blur-up.js
│ ├── custommedia/
│ │ ├── README.md
│ │ └── ls.custommedia.js
│ ├── fix-edge-h-descriptor/
│ │ ├── README.md
│ │ └── ls.fix-edge-h-descriptor.js
│ ├── fix-ios-sizes/
│ │ └── fix-ios-sizes.js
│ ├── include/
│ │ ├── README.md
│ │ └── ls.include.js
│ ├── native-loading/
│ │ ├── README.md
│ │ └── ls.native-loading.js
│ ├── noscript/
│ │ ├── README.md
│ │ └── ls.noscript.js
│ ├── object-fit/
│ │ ├── README.md
│ │ └── ls.object-fit.js
│ ├── optimumx/
│ │ ├── README.md
│ │ └── ls.optimumx.js
│ ├── parent-fit/
│ │ ├── README.md
│ │ └── ls.parent-fit.js
│ ├── print/
│ │ ├── README.md
│ │ └── ls.print.js
│ ├── progressive/
│ │ ├── README.md
│ │ └── ls.progressive.js
│ ├── respimg/
│ │ ├── README.md
│ │ └── ls.respimg.js
│ ├── rias/
│ │ ├── README.md
│ │ └── ls.rias.js
│ ├── static-gecko-picture/
│ │ └── ls.static-gecko-picture.js
│ ├── twitter/
│ │ └── ls.twitter.js
│ ├── unload/
│ │ ├── README.md
│ │ └── ls.unload.js
│ ├── unveilhooks/
│ │ ├── README.md
│ │ └── ls.unveilhooks.js
│ └── video-embed/
│ ├── README.md
│ └── ls.video-embed.js
├── rias/
│ └── index.html
├── src/
│ ├── common.wrapper
│ ├── lazysizes-core.js
│ ├── lazysizes-intersection.js
│ └── umd.wrapper
├── tests/
│ ├── functional-tests-plugins.js
│ ├── functional-tests.js
│ ├── index.html
│ ├── test-files/
│ │ ├── content-file.html
│ │ └── matchMedia.js
│ └── test-helper.js
├── tsconfig.json
└── types/
├── global.d.ts
└── lazysizes-config.d.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: BingSiteAuth.xml
================================================
<?xml version="1.0"?>
<users>
<user>D45AA4276907D8A86808F0D7C84BC7BC</user>
</users>
================================================
FILE: CHANGELOG.md
================================================
# Changelog
### 5.3.1
- Added basic Typescript support
### 5.3.0
- BGSet: Support adding multiple images/backgrounds through `event.detail.fullSrc` ([#827](https://github.com/aFarkas/lazysizes/issues/827))
- RiaS plugin: Use `source` based config in case of `picture` element usage ([#764](https://github.com/aFarkas/lazysizes/issues/831))
- BlurUp plugin: Added possibility to change classNames ([#814](https://github.com/aFarkas/lazysizes/pull/814))
- Core: Added `iframeLoadMode` option (see [#810](https://github.com/aFarkas/lazysizes/pull/810))
## 5.2.2
- Add correct AMD module pattern for plugins.
## 5.2.1
- BlurUp-Plugin: Copy style attribute ([#764](https://github.com/aFarkas/lazysizes/pull/764))
- Fixes minor security issue with video-embed plugin ([#764](https://github.com/aFarkas/lazysizes/pull/764))
- Built: Update dependencies ([#774](https://github.com/aFarkas/lazysizes/pull/774), [#756](https://github.com/aFarkas/lazysizes/pull/756))
- Fixes diverse issues with old AMD module pattern ([#780](https://github.com/aFarkas/lazysizes/pull/780), [#779](https://github.com/aFarkas/lazysizes/pull/779))
## 5.2.0
* Fix wrong window context under very rare SSR (fixes [#717](https://github.com/aFarkas/lazysizes/pull/717))
* Fix Safari Back-Forward Cache issue with lazyloading image elements (fixes [#711](https://github.com/aFarkas/lazysizes/issues/711))
* Add lazyload of autoplay videos to unveilhooks (fixes [#697](https://github.com/aFarkas/lazysizes/issues/697))
## 5.1.2
* Fix visibility check (fixes [#709](https://github.com/aFarkas/lazysizes/issues/709))
## 5.1.1
* Fix ratio calculation in rias plugin (fixed in [#685](https://github.com/aFarkas/lazysizes/pull/685) by [tikotzky](https://github.com/tikotzky))
* Make thumb size for youtube poster image in video-embed plugin configurable (see [#681](https://github.com/aFarkas/lazysizes/pull/681) thx to [@nikitasol](https://github.com/nikitasol))
## 5.1.0
* Allow import/execution in node environment
* Use "hqdefault" for youtube poster image in video-embed plugin fixes [#666](https://github.com/aFarkas/lazysizes/issues/666)
## 5.0.0
* Use `width`/`height` content attributes to detect physical aspect ratio of image candidates, if `data-aspectratio` and `h`/`w` descriptors are missing. [#642](https://github.com/aFarkas/lazysizes/issues/642)
* Do not leak global `lazySizesConfig` anymore fixes [#647](https://github.com/aFarkas/lazysizes/issues/647)
* Improve handling of cloned object-fit images fixes [#648](https://github.com/aFarkas/lazysizes/issues/648)
* Improve blur-up/effect plugin.
* Add support for native `loading="lazy"` feature as a [native loading plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/native-loading).
## 4.1.8
* Added the class `ls-is-cached` to already cached images.
* Added h descriptor parsing fix plugin for MS edge (was already included in respimg polyfill.)
* Effects-Plugin/Blur Up plugin: Remove [].find because IE..., fixes [#631](https://github.com/aFarkas/lazysizes/issues/631)
* Documentation stuff
* Bring back *.min.js files to npm package, but don't use them in your `import`/`require`. These are mostly for CDNs. Not for Common JS bundlers.
## 4.1.7
* Blur Up plugin: make blur up mode configurable by script
* Unload Plugin: Fix unload plugin not knowing current expand, fixes [#608](https://github.com/aFarkas/lazysizes/issues/608)
* simplify resetPreloading and switchLoadingClass, fixes [#614](https://github.com/aFarkas/lazysizes/issues/614)
## 4.1.6
* Several Readme fixes
* Allow expand, hFax and expFactor to be changed after initialization, see [#581](https://github.com/aFarkas/lazysizes/issues/581)
## 4.1.5
* Blur Up plugin: Add an empty alt attribute to the blur image to satisfy a11y [c3256d6](https://github.com/aFarkas/lazysizes/commit/c3256d61c002a984ab3e644e922b0fdc052519d8)
* Blur Up plugin: added aria-hidden attribute [1d62efb](https://github.com/aFarkas/lazysizes/commit/1d62efb352f579d4505bd3d76d8166db2db9481f)
* RiaS plugin: fix wrong ratio calculation, fixes [#550](https://github.com/aFarkas/lazysizes/issues/550)
* Rias Plugin: add aspect-ratio to rias for calculating height, fixes [#557](https://github.com/aFarkas/lazysizes/issues/557)
## 4.1.4
* Resolve race condition with blurImg [dffa93b](https://github.com/aFarkas/lazysizes/commit/dffa93b804302363aceb7dc814b01629014ed03b)
* make intersectionobserver version compatible with plugins [2f1a025](https://github.com/aFarkas/lazysizes/commit/2f1a02531eb96e828d42fb7877e776b810d7f346)
## 4.1.3
* change from custom to basic event interface (maybe fixes [#520](https://github.com/aFarkas/lazysizes/issues/527))
* Clarify data-aspectratio attribute [d868605](https://github.com/aFarkas/lazysizes/commit/d8686050adeb68aae14e522bed12d68ab00b7595)
## 4.1.2
* fixes race condition with blurupimg [#527](https://github.com/aFarkas/lazysizes/issues/527)
* add proxy change event to extend bgset [#532](https://github.com/aFarkas/lazysizes/issues/532)
## 4.1.1
* See [3ace9f3](https://github.com/aFarkas/lazysizes/commit/3ace9f359617409fe2824311032439fcf76a7c99)
## 4.1.0
* improve effect plugin
## 4.0.4
* fixes issue in bgset introduced with version 4.0.3
## 4.0.3
* add [blur up plugin](https://jsfiddle.net/trixta/v0oq0412/embedded/result/)
## 4.0.0
* make all plugins CommonJS compatible (thx to @claudiobmgrtnr and @jantimon)
* added `loadHidden` option(thx to @justinvoelker)
* added artdirection plugin (no documentation yet, but great)
* iOS 8.1 fixes has to be loaded explicitly in non CommonJS environments (not included in respimg plugin anymore)
* removed `picture` support for old FF 38-
## 2.0.0
* lazysizes core:
* heavily improved performance (`requestIdleCallback`, better debouncing and a lot more).
* plugins:
* new plugin: [**object fit polyfill**](plugins/object-fit).
* improved new options for [parent-fit plugin](plugins/parent-fit).
## 1.5.0
Breaking change:
* the lazysizes.js and lazysizes.min.js files do not register as AMD modules anymore, if you need an AMD module use the new lazysizes-umd.js or lazysizes-umd.min.js file.
* lazysizes core:
* improved lazyloading in background tabs.
* fixed set lazyloaded class to early in FF.
* bgset/parentFit plugin:
* improved avoiding layout thrashing.
* respimg/bgset/parentFit plugin:
* fixed bug in Edge 14 to parse height descriptors correctly.
* unload plugin:
unload plugin was broken since version 1.4.0 (thanks to @hokamoto)
## 1.4.0
* lazysizes core:
* improved lazyloading in background tabs.
* improved avoiding layout thrashing
* support of SVG elements (`svg`/`image`/`use`...)
* bgset/parentFit plugin:
* improved avoiding layout thrashing
* rias (and bgset):
* added support for height calculation (thx to @LRancez, [#213](https://github.com/aFarkas/lazysizes/pull/213))
## 1.3.2
* lazysizes core:
* add `hFactor` option (see #181).
* unload plugin:
* simplified `unloadPixelThreshold` calculation.
* bgset plugin:
* add an empty alt to image (see #200).
## 1.3.1 version
* lazysizes core:
* replace `setImmediate` with `setTimeout` (improved performance for IE/EDGE).
* plugins:
* fixed conflict with respimg plugin in combination with bgset plugin, in case of art direction and resize to smaller.
* fixed conflict with RIaS plugin in combination with respimg plugin/picturefill in Safari 8/9.
================================================
FILE: Gruntfile.js
================================================
/*global module:true*/
(function () {
"use strict";
var pkg;
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
// Metadata.
pkg: pkg = grunt.file.readJSON("package.json"),
banner: "/*! <%= pkg.name %> - v<%= pkg.version %> */\n",
// Task configuration.
uglify: {
options: {
banner: "<%= banner %>",
compress: {
dead_code: true
}
},
plugins: {
files: [
{
expand: true,
cwd: 'plugins/',
src: ['**/*.js', '!*.min.js', '!**/*.min.js'],
dest: 'plugins/',
ext: '.min.js',
extDot: 'last'
},
{
expand: true,
cwd: '',
src: ['lazysizes*.js', '!*.min.js'],
dest: '',
ext: '.min.js',
extDot: 'last'
}
]
}
},
jshint: {
all: {
options: {
jshintrc: true
},
src: [ "lazysizes.js", "plugins/**/*.js", "!*.min.js", "!plugins/**/*.min.js" ] //, "Gruntfile.js", "tests/*.js"
}
},
qunit: {
all: ['tests/*.html']
},
watch: {
gruntfile: {
files: [ "Gruntfile.js", "lazysizes.js" ],
tasks: [ "default" ]
}
},
bytesize: {
all: {
src: [ "lazysizes.min.js" ]
}
},
uncss: {
dist: {
files: {
'assets/css/tidy.css': ['index.html', 'maxdpr/*.html']
}
}
},
maxFilesize: {
options: {
// Task-specific options go here.
},
minified: {
options: {
maxBytes: (1024 * 7.8)
},
src: ["lazysizes.min.js"]
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-bytesize');
grunt.loadNpmTasks('grunt-max-filesize');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.registerTask('wrapcore', 'wraps lazysizes into umd and common wrapper.', function() {
var ls = grunt.file.read('src/lazysizes-core.js');
var common = grunt.file.read('src/common.wrapper');
var umd = grunt.file.read('src/umd.wrapper');
grunt.file.write('lazysizes.js', common.replace('{{ls}}', ls));
grunt.file.write('lazysizes-umd.js', umd.replace('{{ls}}', ls));
});
grunt.registerTask('importTs', 'import global typescript.', function() {
const fileName = './lazysizes.d.ts';
const importStr = `import './types/global';\n\n`;
const tsContent = grunt.file.read(fileName);
grunt.file.write(fileName, importStr + tsContent);
});
// Default task.
grunt.registerTask("default", [ "wrapcore", "test", "uglify", "bytesize", "maxFilesize" ]);
grunt.registerTask("test", [ "jshint" ]);
};
})();
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2015 Alexander Farkas
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# lazysizes
**lazysizes** is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images ``picture``/``srcset``), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster.
It may become also your number one tool to integrate responsive images. It can automatically calculate the ``sizes`` attribute for your responsive images, it allows you to share media queries for your ``media`` attributes with your CSS, helping to separate layout (CSS) from content/structure (HTML) and it makes integrating responsive images into any environment really simple. It also includes a set of optional plugins to further extend its functionality.
## How to
1. Download the [lazysizes.min.js script](http://afarkas.github.io/lazysizes/lazysizes.min.js) and include **lazysizes** in your webpage. (Or install via npm: ``npm install lazysizes --save`` or bower ``bower install lazysizes --save``)
```html
<script src="lazysizes.min.js" async=""></script>
```
Or:
```js
import 'lazysizes';
// import a plugin
import 'lazysizes/plugins/parent-fit/ls.parent-fit';
// Note: Never import/require the *.min.js files from the npm package.
```
Note: For more information see [here](#include-early).
2. lazysizes does not need any JS configuration: Add the ``class`` ``"lazyload"`` to your images/iframes in conjunction with a ``data-src`` and/or ``data-srcset`` attribute. Optionally you can also add a ``src`` attribute with a low quality image:
```html
<!-- non-responsive: -->
<img data-src="image.jpg" class="lazyload" />
```
```html
<!-- responsive example with automatic sizes calculation: -->
<img
data-sizes="auto"
data-src="image2.jpg"
data-srcset="image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w" class="lazyload" />
```
```html
<!-- iframe example -->
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
```
## [Demo with code examples](http://afarkas.github.io/lazysizes/#examples)
Can be seen [here](http://afarkas.github.io/lazysizes/#examples)
## Responsive image support (picture and/or srcset)
Lazysizes is built upon the Responsive image standard and extends it with additional functionality. For full cross browser responsive image support you must use either a full polyfill like [picturefill](https://github.com/scottjehl/picturefill) or use the extreme lightweight partial [respimg polyfill plugin](plugins/respimg) or the [responsive image on demand plugin](plugins/rias). Alternatively, you can simply define a fallback src via the ``data-src`` attribute. If you want to learn more about the responsive image syntax read "[The anatomy of responsive images](https://jakearchibald.com/2015/anatomy-of-responsive-images/)".
## What makes lazysizes so awesome:
**lazysizes** is different than other lazy image loaders.
1. **Detects any visibility changes on current and future lazyload elements in any web environment automatically**: The script works as an universal, self-initializing, self-configuring and self-destroying component and detects any changes to the visibility of any current and future image/iframe elements automatically no matter whether it becomes visible through a user scroll, a CSS animation triggered through ``:hover`` or through any kind of JS behavior (carousel, slider, infinite scroll, masonry, isotope/filtering/sorting, AJAX, SPAs...). It also works automatically in conjunction with any kind of JS-/CSS-/Frontend-Framework (jQuery mobile, Bootstrap, Backbone, Angular, React, Ember (see also the [attrchange/re-initialization extension](plugins/attrchange))).
2. **Future-proof**: It directly includes standard responsive image support (``picture`` and ``srcset``)
3. **Separation of concerns**: For responsive image support it adds an automatic ``sizes`` calculation as also alias names for media queries feature. There is also no JS change needed if you add a scrollable container with CSS (overflow: auto) or create a mega menu containing images.
4. **Performance**: It's based on highly efficient, best practice code (runtime **and** network) to work jank-free at 60fps and can be used with hundreds of images/iframes on CSS and JS-heavy pages or webapps.
5. **Extendable**: It provides JS and CSS hooks to extend lazysizes with any kind of lazy loading, lazy instantiation, in view callbacks or effects (see also the [available plugins/snippets](#plugins)).
6. **Intelligent prefetch/Intelligent resource prioritization**: lazysizes prefetches/preloads near the view assets to improve user experience, but only while the browser network is idling (see also ``expand``, ``expFactor`` and ``loadMode`` options). This way in view elements are loaded faster and near of view images are preloaded lazily before they come into view.
7. **Lightweight, but mature solution**: lazysizes has the right balance between a lightweight and a fast, reliable solution
8. **SEO improved**: lazysizes does not hide images/assets from Google. No matter what markup pattern you use. Google doesn't scroll/interact with your website. lazysizes detects, whether the user agent is capable to scroll and if not, reveals all images instantly.
## More about the API
**lazysizes** comes with a simple markup and JS API. Normally you will only need to use the markup API.
### Markup API
Add the ``class`` ``lazyload`` to all ``img`` and ``iframe`` elements, which should be loaded lazy. *Instead* of a ``src`` or ``srcset`` attribute use a ``data-src`` or ``data-srcset`` attribute:
```html
<img data-src="image.jpg" class="lazyload" />
<!-- retina optimized image: -->
<img data-srcset="responsive-image1.jpg 1x, responsive-image2.jpg 2x" class="lazyload" />
```
#### <a name="data-sizes-auto"></a>Automatically setting the `sizes` attribute
**lazysizes** supports setting the ``sizes`` attribute automatically, corresponding to the current size of your image - just set the value of ``data-sizes`` to ``auto``.
```html
<img
data-sizes="auto"
data-srcset="responsive-image1.jpg 300w,
responsive-image2.jpg 600w,
responsive-image3.jpg 900w"
class="lazyload" />
```
**<a name="sizes-calculation"></a>Important: How ``sizes`` is calculated**: The automatic sizes calculation uses the display width of the image. This means that the width of the image has to be calculable at least approximately before the image itself is loaded (This means you can not use `width: auto`). Often the following general CSS rule might help: ``img[data-sizes="auto"] { display: block; width: 100%; }`` (see also [specifying image/iframe dimensions with the recommended aspect ratio definition](#specify-dimensions)). If it is below ``40`` (can be configured through the ``minSize`` option), lazysizes traverses up the DOM tree until it finds a parent which is over ``40`` and uses this number.
The width auto-calculated by lazysizes can be modified using the ``lazybeforesizes`` event ([lazybeforesizes documentation](#lazybeforesizes-documentation)). Alternatively, the [parent fit plugin](plugins/parent-fit) can be used for sizing images to fit a parent / container, and is the only solution when an image's height needs to be taken into account when fitting it to its container (This also includes the use of `object-fit`).
The ``data-sizes="auto"`` feature only makes sense if you use the ``data-srcset`` attribute with *width* descriptors which allows the most appropriate image can be selected (It does not make sense if you use the x descriptor or only ``src``.).
## Recommended/possible markup patterns
lazysizes allows you to write an endless variety of different markup patterns. Find your own/best pattern or choose one of the following. (All of the following patterns can be also used for art direction using the ``picture`` element.)
### Simple pattern
Add the class ``lazyload`` and simply omit the ``src`` attribute or add a data uri as fallback ``src``.
```html
<!-- responsive adaptive example -->
<img
class="lazyload"
data-srcset="image.jpg 1x, image2.jpg 2x"
alt="my image" />
<!-- retina optimized example -->
<img class="lazyload"
data-srcset="progressive-image.jpg 1x, progressive-image2.jpg 2x"
alt="my image" />
<!-- or non-responsive: -->
<img
data-src="image.jpg"
class="lazyload" />
```
Note: In case you are using either ``srcset``/``data-srcset`` or ``picture``, we recommend to extend this pattern with either a ``data-src`` (see next pattern: "Combine ``data-srcset`` with ``data-src``") or with a suitable ``src`` attribute (see: "modern pattern" or "LQIP").
### Combine ``data-srcset`` with ``data-src``
In case you want to use responsive images for supporting browsers, but don't want to include a polyfill, simply combine your ``data-srcset`` with a ``data-src`` attribute.
```html
<!-- responsive example: -->
<img
data-sizes="auto"
data-src="image3.jpg"
data-srcset="image3.jpg 600w,
image1.jpg 220w,
image2.jpg 300w,
image3.jpg 600w,
image4.jpg 900w"
class="lazyload" />
```
Note: Due to the fact that the ``data-src`` will also be picked up by "Read-Later" Apps and other tools (for example Pin it button), this pattern also makes sense if you use a polyfill. In case you don't use a polyfill it is recommended that the first image candidate matches the fallback `src`.
### LQIP/blurry image placeholder/Blur up image technique
If you are using the LQIP (Low Quality Image Placeholder) pattern, simply add a low quality image as the ``src``:
```html
<!-- responsive example: -->
<img
data-sizes="auto"
src="lqip-src.jpg"
data-srcset="lqip-src.jpg 220w,
image2.jpg 300w,
image3.jpg 600w,
image4.jpg 900w" class="lazyload" />
<!-- or non-responsive: -->
<img src="lqip-src.jpg" data-src="image.jpg" class="lazyload" />
```
The LQIP technique can be enhanced by combining it with CSS transitions/animation to sharpen/unblur or overfade the LQIP image.
Please also have a look at our [lazysizes Blur Up plugin](https://jsfiddle.net/trixta/v0oq0412/embedded/result/) (recommended).
```html
<style>
.blur-up {
-webkit-filter: blur(5px);
filter: blur(5px);
transition: filter 400ms, -webkit-filter 400ms;
}
.blur-up.lazyloaded {
-webkit-filter: blur(0);
filter: blur(0);
}
</style>
<img src="lqip-src.jpg" data-src="image.jpg" class="lazyload blur-up" />
<!-- ... -->
<style>
.fade-box .lazyload,
.fade-box .lazyloading {
opacity: 0;
transition: opacity 400ms;
}
.fade-box img.lazyloaded {
opacity: 1;
}
</style>
<div class="ratio-box fade-box">
<img src="lqip-src.jpg" />
<img data-src="image.jpg" class="lazyload" />
</div>
```
### modern transparent ``srcset`` pattern
Combine a normal ``src`` attribute with a transparent or low quality image as ``srcset`` value and a ``data-srcset`` attribute. This way modern browsers will lazy load without loading the ``src`` attribute and all others will simply fallback to the initial ``src`` attribute (without lazyload). (This nice pattern originated from @ivopetkov.)
```html
<img
src="image3.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-srcset="image3.jpg 600w,
image1.jpg 220w,
image2.jpg 300w,
image4.jpg 900w"
data-sizes="auto"
class="lazyload" />
```
### The noscript pattern
In case disabled JavaScript is a concern you can combine this simple pattern with an image inside a ``noscript`` element.
```html
<style>
.no-js img.lazyload {
display: none;
}
</style>
<!-- noscript pattern -->
<noscript>
<img src="image.jpg" />
</noscript>
<img src="transparent.jpg" data-src="image.jpg" class="lazyload" />
```
Note: As an alternative to the noscript pattern also checkout the [noscript extension](plugins/noscript).
### [data-expand] attribute
Normally lazysizes will expand the viewport area to lazy preload images/iframes which might become visible soon. This value can be adjusted using the ``expand`` option.
Additionally, this general option can be overridden with the ``data-expand`` attribute for each element. Different than the general ``expand`` option the ``data-expand`` attribute also accepts negative values (All numbers but ``0`` are accepted!).
This becomes especially handy to add unveiling effects for teasers or other elements:
```html
<style>
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}
</style>
<div class="teaser lazyload" data-expand="-20">
<img data-src="image.jpg" class="lazyload" />
<h1>Teaser Title</h1>
<p>...</p>
</div>
```
### CSS API
lazysizes adds the class ``lazyloading`` while the images are loading and the class ``lazyloaded`` as soon as the image is loaded. This can be used to add unveil effects:
```css
/* fade image in after load */
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}
```
```css
/* fade image in while loading and show a spinner as background image (good for progressive images) */
.lazyload {
opacity: 0;
}
.lazyloading {
opacity: 1;
transition: opacity 300ms;
background: #f7f7f7 url(loader.gif) no-repeat center;
}
```
### Broken image symbol
In case you are using an `alt` attribute but do not declare a `src`/`srcset` attribute you will end up with a broken image symbol.
There are two easy ways to deal with it.
Either define a `src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="` or add the following CSS.
```css
img.lazyload:not([src]) {
visibility: hidden;
}
```
### JS API
**lazysizes** automatically detects new elements with the class ``lazyload`` so you won't need to call or configure anything in most situations.
#### JS API - options
Options can be set by declaring a global configuration option object named ``lazySizesConfig``. This object must be defined before the lazysizes script. A basic example:
```js
window.lazySizesConfig = window.lazySizesConfig || {};
// use .lazy instead of .lazyload
window.lazySizesConfig.lazyClass = 'lazy';
// use data-original instead of data-src
lazySizesConfig.srcAttr = 'data-original';
//page is optimized for fast onload event
lazySizesConfig.loadMode = 1;
```
In case you are using a module bundler it is recommended to change the options directly after importing the `lazysizes` module:
```js
import lazySizes from 'lazysizes';
// other imports ...
lazySizes.cfg.lazyClass = 'lazy';
```
Here the list of options:
* ``lazySizesConfig.lazyClass`` (default: ``"lazyload"``): Marker class for all elements which should be lazy loaded (There can be only one ``class``. In case you need to add some other element, without the defined class, simply add it per JS: ``$('.lazy-others').addClass('lazyload');``)
* ``lazySizesConfig.preloadAfterLoad`` (default: ``false``): Whether lazysizes should load all elements after the window onload event. Note: lazySizes will then still download those not-in-view images inside of a lazy queue, so that other downloads after onload are not blocked.)
* ``lazySizesConfig.preloadClass`` (default: ``"lazypreload"``): Marker class for elements which should be lazy pre-loaded after onload. Those elements will be even preloaded, if the ``preloadAfterLoad`` option is set to ``false``. Note: This *class* can be also dynamically set (``$currentSlide.next().find('.lazyload').addClass('lazypreload');``).
* ``lazySizesConfig.loadingClass`` (default: ``"lazyloading"``): This ``class`` will be added to ``img`` element as soon as image loading starts. Can be used to add unveil effects.
* ``lazySizesConfig.loadedClass`` (default: ``"lazyloaded"``): This ``class`` will be added to any element as soon as the image is loaded or the image comes into view. Can be used to add unveil effects or to apply styles.
* ``lazySizesConfig.expand`` (default: ``370-500``): The ``expand`` option expands the calculated visual viewport area in all directions, so that elements can be loaded before they become visible. The default value is calculated depending on the viewport size of the device. (Note: Reasonable values are between ``300`` and ``1000`` (depending on the ``expFactor`` option.) In case you have a lot of small images or you are using the LQIP pattern you can lower the value, in case you have larger images set it to a higher value. Also note, that lazySizes will dynamically shrink this value to ``0`` if the browser is currently downloading and expand it if the browser network is currently idling and the user not scrolling (by multiplying the ``expand`` option with ``1.5`` (``expFactor``)). This option can also be overridden with the ``[data-expand]`` attribute.
* ``lazySizesConfig.minSize`` (default: ``40``): For ``data-sizes="auto"`` feature. The minimum size of an image that is used to calculate the ``sizes`` attribute. In case it is under ``minSize`` the script traverses up the DOM tree until it finds a parent that is over ``minSize``.
* ``lazySizesConfig.srcAttr`` (default: ``"data-src"``): The attribute, which should be transformed to ``src``.
* ``lazySizesConfig.srcsetAttr`` (default: ``"data-srcset"``): The attribute, which should be transformed to ``srcset``.
* ``lazySizesConfig.sizesAttr`` (default: ``"data-sizes"``): The attribute, which should be transformed to ``sizes``. Makes almost only makes sense with the value ``"auto"``. Otherwise, the ``sizes`` attribute should be used directly.
* ``lazySizesConfig.customMedia`` (default: ``{}``): The ``customMedia`` option object is an alias map for different media queries. It can be used to separate/centralize your multiple specific media queries implementation (layout) from the ``source[media]`` attribute (content/structure) by creating labeled media queries. (See also the [custommedia extension](plugins/custommedia)).
* ``lazySizesConfig.loadHidden`` (default: ``true``): Whether to load `visibility: hidden` elements. Important: lazySizes will load hidden images always delayed. If you want them to be loaded as fast as possible you can use `opacity: 0.001` but never `visibility: hidden` or `opacity: 0`.
* ``lazySizesConfig.ricTimeout`` (default: ``0``): The timeout option used for the `requestIdleCallback`. Reasonable values between: 0, 100 - 1000. (Values below 50 disable the `requestIdleCallback` feature.)
* ``lazySizesConfig.throttleDelay`` (default: ``125``): The timeout option used to throttle all listeners. Reasonable values between: 66 - 200.
```html
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.customMedia = {
'--small': '(max-width: 480px)',
'--medium': '(max-width: 900px)',
'--large': '(max-width: 1400px)',
};
</script>
<picture>
<!--[if IE 9]><video style="display: none;><![endif]-->
<source
data-srcset="http://placehold.it/500x600/11e87f/fff"
media="--small" />
<source
data-srcset="http://placehold.it/700x300"
media="--medium" />
<source
data-srcset="http://placehold.it/1400x600/e8117f/fff"
media="--large" />
<source
data-srcset="http://placehold.it/1800x900/117fe8/fff" />
<!--[if IE 9]></video><![endif]-->
<img
data-src="http://placehold.it/1400x600/e8117f/fff"
class="lazyload"
alt="image with artdirection" />
</picture>
```
* ``lazySizesConfig.expFactor`` (default: ``1.5``): The ``expFactor`` is used to calculate the "preload expand", by multiplying the normal ``expand`` with the ``expFactor`` which is used to preload assets while the browser is idling (no important network traffic and no scrolling). (Reasonable values are between ``1.5`` and ``4`` depending on the ``expand`` option).
* ``lazySizesConfig.hFac`` (default: ``0.8``): The ``hFac`` (horizontal factor) modifies the horizontal expand by multiplying the ``expand`` value with the ``hFac`` value. Use case: In case of carousels there is often the wish to make the horizontal expand narrower than the normal vertical expand option. Reasonable values are between 0.4 - 1. In the unlikely case of a horizontal scrolling website also 1 - 1.5.
* ``lazySizesConfig.loadMode`` (default: ``2``): The ``loadMode`` can be used to constrain the allowed loading mode. Possible values are 0 = don't load anything, 1 = only load visible elements, 2 = load also very near view elements (``expand`` option) and 3 = load also not so near view elements (``expand`` * ``expFactor`` option). This value is automatically set to ``3`` after onload. Change this value to ``1`` if you (also) optimize for the onload event or change it to ``3`` if your onload event is already heavily delayed.
* ``lazySizesConfig.init`` (default: ``true``): By default lazysizes initializes itself, to load in view assets as soon as possible. In the unlikely case you need to setup/configure something with a later script you can set this option to ``false`` and call ``lazySizes.init();`` later explicitly.
#### JS API - events
**lazysizes** provides three events to modify or extend the behavior of **lazysizes**.
* ``lazybeforeunveil``: This event will be fired on each lazyload element right before of the "unveil" transformation. This event can be used to extend the unveil functionality. In case the event is ``defaultPrevented`` the default transformation action will be prevented (see also the [ls.unveilhooks.js plugin](plugins/unveilhooks/ls.unveilhooks.js)):
```js
//add simple support for background images:
document.addEventListener('lazybeforeunveil', function(e){
var bg = e.target.getAttribute('data-bg');
if(bg){
e.target.style.backgroundImage = 'url(' + bg + ')';
}
});
//or add AJAX loading
//<div class="lazyload" data-ajax="my-url.html"></div>
$(document).on('lazybeforeunveil', function(){
var ajax = $(e.target).data('ajax');
if(ajax){
$(e.target).load(ajax);
}
});
```
The ``lazybeforeunveil`` can also be used for lazy initialization and due to the fact that lazysizes also detects new elements in the DOM automatically also for auto- and self-initialization of UI widgets:
```html
<script>
document.addEventListener('lazybeforeunveil', function(e){
$(e.target)
.filter('.slider')
.slider({
sliderOption: true
})
;
});
document.addEventListener('lazybeforeunveil', function(e){
$(e.target)
.filter('.chart')
.chart({
animate: true
})
;
});
</script>
<div class="slider lazyload lazypreload"></div>
<div class="chart lazyload" data-expand="-10"></div>
```
* <a id="lazyloaded-documentation"></a>`lazyloaded`: After the image is fully loaded lazysizes dispatches a `lazyloaded` event. While this often duplicates the native `load` event it is often more convenient to use.
* <a id="lazybeforesizes-documentation"></a>``lazybeforesizes``: This event will be fired on each element with the ``data-sizes="auto"`` attribute right before the calculated ``sizes`` attribute will be set. The ``event.detail.width`` property is set to the calculated width of the element and can be changed to any number. In case the event is ``defaultPrevented`` the ``sizes`` attribute won't be set. See also the [parent-fit extension](plugins/parent-fit).
```js
$(document).on('lazybeforesizes', function(e){
//use width of parent node instead of the image width itself
e.detail.width = $(e.target).parents(':not(picture)').innerWidth() || e.detail.width;
});
```
#### JS API - methods
##### ``lazySizes.loader.unveil(DOMNode)``
In case a developer wants to show an image even if it is not inside the viewport the ``lazySizes.loader.unveil(DOMNode)`` can be called:
```js
lazySizes.loader.unveil(imgElem);
```
Note: As a more lazy alternative the ``lazypreload`` class can be set: ``$(imgElem).addClass('lazypreload');``.
##### ``lazySizes.autoSizer.checkElems()``
In case one or more image elements with the attribute ``data-sizes="auto"`` have changed in size ``lazySizes.autoSizer.updateElems`` can be called (For example to implement element queries):
```js
lazySizes.autoSizer.checkElems();
```
##### ``lazySizes.loader.checkElems()``
Tests whether new elements has came into view. Normally this method only needs to be called, if ``lazySizesConfig.loadMode`` was set to ``0``.
##### ``lazySizes.init()``
LazySizes initializes itself automatically. In case you set ``lazySizesConfig.init`` to ``false`` you need to explicitly call ``lazySizes.init()``. Note: You can speed up initial loading of in view images if you call `lazySizesConfig.init()` explicitly after lazysizes and all plugins are loaded.
```html
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.init = false;
</script>
<script src="lazysizes.js"></script>
<script src="other-script.js"></script>
<script>
lazySizes.init();
</script>
```
## Browser Support
**lazysizes** supports all browsers, that support [``document.getElementsByClassName``](http://caniuse.com/#feat=getelementsbyclassname) (== all browsers but not IE8-). In case you need to support IE8, see also the [noscript extension](plugins/noscript/README.md#ie8) (or use a modified noscript pattern or the LQIP pattern).
## Contributing
Fixes, PRs and issues are always welcome, make sure to create a new branch from the **master** (not the gh-pages branch), validate against JSHint and test in all browsers. In case of an API/documentation change make sure to also document it here in the readme.md.
### Build
Run `npx grunt` to validate JSHint and uglify/minify all files.
### Tests
Run `npx serverino -p 3333` and navigate to [http://localhost:3333/tests/](http://localhost:3333/tests/)
## <a name="plugins"></a>Available plugins in this repo
It is recommended to concat all plugins together with lazySizes. In case you don't concat it is recommended to include the plugin scripts *before* the lazySizes main script.
### [respimg polyfill plugin](plugins/respimg)
The respimg polyfill plugin is an extremely lightweight alternate polyfill for the most important subsets of responsive images (srcset and picture).
### [OPTIMUMX plugin](plugins/optimumx)
The ``srcset`` attribute with the *w* descriptor and ``sizes`` attribute automatically also includes high DPI images. But each image has a different optimal pixel density, which might be lower (for example 1.5x) than the pixel density of your device (2x or 3x). This information is unknown to the browser and therefore can't be optimized for. The [lazySizes optimumx extension](plugins/optimumx) gives you more control to trade between perceived quality vs. perceived performance.
### [parent-fit extension](plugins/parent-fit)
The [parent fit plugin](plugins/parent-fit) extends the ``data-sizes="auto"`` feature to also calculate the right ``sizes`` for ``object-fit: contain|cover`` image elements and other **height** ( and width) constrained image elements in general.
### [object-fit polyfill extension](plugins/object-fit)
The [object fit polyfill plugin](plugins/object-fit) polyfills the `object-fit` and the `object-position` property in non supporting browsers.
### [blur up / effect plugin](plugins/blur-up)
The [blur up / effect plugin](plugins/blur-up) allows you to create [great over fade / blur up effects](https://jsfiddle.net/trixta/v0oq0412/embedded/result/) with low quality image placeholder, which improves the user experience and perceived performance in case you are using a low quality image approach.
### [attrchange / re-initialization extension](plugins/attrchange) (strongly recommended if you use React, Angular etc.)
In case you are changing the ``data-src``/``data-srcset`` attributes of already transformed lazyload elements, you must normally also re-add the ``lazyload`` class to the element.
This [attrchange / re-initialization extension](plugins/attrchange) automatically detects changes to your ``data-*`` attributes and adds the class for you.
### [artdirect plugin](plugins/artdirect)
The [artdirect plugin](plugins/artdirect) allows you to fully control art direction via CSS.
### Other [plugins/extensions](plugins)
There are also other plugins/extension in the [plugins folder](plugins). As always you are open to create new ones for your project.
## <a name="specify-dimensions"></a>Tip: Specifying image dimensions (minimizing reflows and avoiding page jumps)
To minimize reflows, content jumping or unpredictable behavior with some other JS widgets (isotope, masonry, some sliders/carousels...) the width **and** the height of an image should be calculable by the browser before the image source itself is loaded:
```html
<img
style="width: 350px; height: 150px;"
data-srcset="http://placehold.it/350x150 1x,
http://placehold.it/700x300 2x"
data-src="http://placehold.it/350x150"
class="lazyload" />
```
For flexible responsive images the [CSS intrinsic ratio scaling technique](http://www.mademyday.de/css-height-equals-width-with-pure-css.html) should be used:
```html
<style>
.ratio-container {
position: relative;
}
.ratio-container:after {
content: '';
display: block;
height: 0;
width: 100%;
/* 16:9 = 56.25% = calc(9 / 16 * 100%) */
padding-bottom: 42.86%;
}
.ratio-container > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
</style>
<div class="ratio-container">
<img
data-sizes="auto"
data-srcset="http://placehold.it/175x75 175w,
http://placehold.it/350x150 350w,
http://placehold.it/700x300 700w,
http://placehold.it/1400x600 1400w"
data-src="http://placehold.it/700x300"
class="lazyload" />
</div>
```
In case you want to dynamically calculate your intrinsic ratios for many different formats you can vary the pattern to something like this:
```html
<style>
.ratio-box {
position: relative;
height: 0;
display: block;
width: 100%;
/* padding-bottom is calculated and rendered in to HTML */
}
.ratio-box img,
.ratio-box iframe,
.ratio-box video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
</style>
<div class="ratio-box" style="padding-bottom: 42.85% /* calc(75 / 175 * 100%)*/;">
<img
data-sizes="auto"
data-srcset="http://placehold.it/175x75 175w,
http://placehold.it/350x150 350w,
http://placehold.it/700x300 700w,
http://placehold.it/1400x600 1400w"
data-src="http://placehold.it/700x300"
class="lazyload" />
</div>
```
In case the exact ratio of your image is unknown you can also vary the intrinsic ratio like this:
```html
<style>
.ratio-container {
position: relative;
}
.ratio-container:after {
content: '';
display: block;
height: 0;
width: 100%;
/* 16:9 = 56.25% = calc(9 / 16 * 100%) */
padding-bottom: 56.25%;
content: "";
}
.ratio-container > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* unknown ration variation */
.unknown-ratio-container > * {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
</style>
<div class="ratio-container unknown-ratio-container">
<img
data-src="http://placehold.it/350x150"
class="lazyload" />
</div>
```
or at least add a ``min-height`` (and ``min-width``) to minimize content jumps:
```css
.lazyload,
.lazyloading {
min-height: 200px;
}
```
**Note**:
* If you use the "unknown intrinsic ratio pattern" and the width of the loaded image will not (approximately) match the width of its container, the ``data-sizes="auto"`` feature will not be effective when used on its own. In this situation, the most appropriate size for the image to fit in the available space can be calculated automatically using the [parent fit plugin](plugins/parent-fit).
### Updating layout of JS widgets
In case you can't specify the image dimensions using CSS or one of the above suggested methods and your JS widgets have problems to calculate the right dimensions. You can use the following pattern to update your JS widgets (sliders/masonry):
```js
$('.my-widget').each(function(){
var $module = $(this);
var update = function(){
$module.myWidget('updateLayout');
};
// Note: Instead of waiting for all images until we initialize the widget
// we use event capturing to update the widget's layout progressively.
this.addEventListener('load', update, true);
$module.myWidget();
});
```
For this update pattern you may want to combine this at least with the ``min-height`` pattern explained above.
## <a id="include-early"></a>Tip: Where/How to include lazySizes
While lazy loading is a great feature, it is important for users that crucial in view images are loaded as fast as possible. (Most users start to interact with a page after in view images are loaded.)
In case you normally combine all your scripts into one large script and add this to the bottom of your page, it can be better for perceived performance to generate two or sometimes more script packages: One small package, which includes all scripts which have heavy influence on the content or the UI and another larger one which includes the normal behavior of the page.
This smaller script, which should include lazySizes (and all its plugins), should then be placed **before** any other blocking elements (i.e.: script(s)) at the end of the body or after any blocking elements (i.e.: scripts, stylesheets) in the head to load the crucial content as fast possible. (Note: It might make also sense to call `lazySizes.init();` explicitly right after lazySizes and all its plugins are added.)
## Why lazysizes
In the past, I often struggled using lazy image loaders, because the "main check function" is called repeatedly and with a high frequency. Which makes it hard to fulfill two purposes runtime and memory efficiency. And looking into the source code of most so called lazy loaders often also unveils lazy developers...
But in a world of responsive retina optimized images on the one hand and JS widgets like carousels or tabs (a lot of initially hidden images) on the other hand lazy loading images becomes more and more important, so I created this project.
**lazysizes** is different:
Due to the fact, that it is designed to be invoked with a high frequency and therefore works highly efficient, it was possible to hook into all kinds of events as a mutationobserver meaning this lazyloader works as a simple drop in solution - you simply write/render your markup and no matter whether the ``.lazyload`` element was added by AJAX or revealed by a JS or CSS animation it will be picked up by **lazysizes**.
```html
<!-- responsive example: -->
<img
data-sizes="auto"
data-srcset="image2.jpg 300w,
image3.jpg 600w,
image4.jpg 900w"
data-src="image3.jpg"
class="lazyload" />
<!-- or non-responsive: -->
<img
data-src="image.jpg"
class="lazyload" />
```
================================================
FILE: animate.html
================================================
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>lazysizes - the umltimate lazyloader for responsive images, iframes and widget</title>
<link rel="canonical" href="http://afarkas.github.io/lazysizes/index.html" />
<!-- polyfill responsive images: https://github.com/aFarkas/respimage -->
<script>
function loadJS(u){var r=document.getElementsByTagName("script")[ 0 ],s=document.createElement("script");s.src=u;r.parentNode.insertBefore(s,r);}
if(!window.HTMLPictureElement || !('sizes' in document.createElement('img'))){
document.createElement('picture');
//generating the config array
window.picturefillCFG = window.picturefillCFG || [];
picturefillCFG.push([ "algorithm", "saveData" ]);
loadJS("https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.0-beta1/picturefill.min.js");
}
</script>
<link href="assets/css/tidy.css" rel="stylesheet" />
<style>
.nav {
margin-bottom: 30px;
}
.intrinsic {
position: relative;
padding-bottom: 75%;
height: 0;
}
.intrinsic-2 {
padding-bottom: 56.25%;
}
.intrinsic img,
.intrinsic iframe,
.intrinsic .lazyload {
position:absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: none;
overflow: hidden;
}
.thumbnail-small {
width: 32%;
display: inline-block;
margin-bottom: 35px;
}
pre {
-moz-tab-size: 2;
tab-size: 2;
}
.scroll-view {
overflow: auto;
overflow-x: auto;
overflow-y: hidden;
position: relative;
width: 100%;
padding: 2px 2px 10px;
}
.scroll-doc {
display: table;
position: relative;
text-align: left;
}
.scroll-item {
display: table-cell;
vertical-align: middle;
}
.scroll-item .thumbnail {
margin: 5px 10px;
width: 230px;
}
.scroll-item .thumbnail img {
width: 100%;
height: auto;
}
.lazyloading:not(iframe) {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: 400ms opacity;
}
[data-expand].lazyload {
opacity: 0;
transform: scale(0.8);
}
[data-expand].lazyloaded {
opacity: 1;
transition: all 700ms;
transform: scale(1);
}
.effect-row-middle > [data-expand]:nth-child(2),
.effect-row-reverse > [data-expand]:nth-child(3),
.effect-row > [data-expand]:nth-child(1) {
transition-delay: 100ms;
}
.effect-row-middle > [data-expand]:nth-child(1),
.effect-row-middle > [data-expand]:nth-child(3),
.effect-row-reverse > [data-expand]:nth-child(2),
.effect-row > [data-expand]:nth-child(2) {
transition-delay: 400ms;
}
.effect-row-reverse > [data-expand]:nth-child(1),
.effect-row > [data-expand]:nth-child(3) {
transition-delay: 700ms;
}
</style>
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
//window.lazySizesConfig.preloadAfterLoad = true;
window.lazySizesConfig.expand = 10;
</script>
<script src="plugins/unveilhooks/ls.unveilhooks.min.js" async=""></script>
<script src="lazysizes.min.js" async=""></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>lazySizes</h1>
<p><strong>lazySizes</strong> is the ultimate and lightweight lazyLoader which lazy loads images (including responsive images (picture/srcset)), iframes and scripts. It is written in VanillaJS and with high performance in mind.</p>
<p>Simply add the JS to your website and put the <code>class</code> <code>lazyload</code> to all elements, which should be lazy loaded. For a short <a href="https://github.com/aFarkas/lazysizes/blob/gh-pages/README.md">API description go to the readme.md</a>.</p>
</div>
<div id="examples">
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<img alt="Boat"
data-src="https://farm5.staticflickr.com/4094/4859138371_9713d4396e_b.jpg"
class="lazyload" />
</div>
<div class="caption">
<h3>Image with LQIP technique</h3>
<p>The low quality image placeholder pattern is a performance technique. While it might increase measuered time until the <code>onload</code> event, it dramatically increases percieved performance.</p>
<p>This pattern is recommend for above the fold/crictical images.</p>
<pre><img
alt="100%x200"
src="low-quality.jpg"
data-src="normal-quality.jpg"
class="lazyload" />
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<img alt="Desert Road" data-src="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_b.jpg" class="lazyload" />
</div>
<div class="caption">
<h3>Normal lazy image</h3>
<p>The normal image pattern is can be used for non-critical images or in case there is no low quality image available:</p>
<pre><img class="lazyload" data-src="image.jpg" alt="Desert Road" />
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<img
sizes="(min-width: 1000px) 930px, 90vw"
data-srcset="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w"
class="lazyload" />
</div>
<div class="caption">
<h3>responsive image with srcset and sizes attribute</h3>
<p>Simply use <code>data-srcset</code> and <code>data-sizes</code> and you can support responsive images.</p>
<pre><img
alt=""
src="small.jpg"
sizes="(min-width: 1000px) 930px, 90vw"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
class="lazyload" />
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<picture>
<!--[if IE 9]><audio><![endif]-->
<source
data-srcset="http://lorempixel.com/710/533/people/9/"
media="(max-width: 990px)" />
<source
data-srcset="http://lorempixel.com/930/698/people/8/"
media="(max-width: 1024px)" />
<source
data-srcset="http://lorempixel.com/1130/848/people/" />
<!--[if IE 9]></audio><![endif]-->
<img
class="lazyload"
alt="image with artdirection" />
</picture>
</div>
<div class="caption">
<h3>responsive image with the <code>picture</code> element</h3>
<p>The picture element is also supported. Simply add the <code>lazyload</code> class to the <code>img</code> and use <code>data-srcset</code> on your <code>source</code> and the <code>img</code> element.</p>
<pre><picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
<source
data-srcset="500.jpg"
media="(max-width: 500px)" />
<source
data-srcset="1024.jpg"
media="(max-width: 1024px)" />
<source
data-srcset="1200.jpg" />
<!--[if IE 9]></video><![endif]-->
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
class="lazyload"
alt="image with artdirection" />
</picture>
</pre>
</div>
</div>
</div>
</div>
<div class="row" id="autosizes-example">
<div class="alert alert-info">
<p><strong>automatic sizes feature</strong>: In case of lazy loading images the <code>sizes</code> attribute of the <code>img</code>/<code>source</code> elements can be calculated with JS.</p>
<p>This automatic sizes feature is directly included in <strong>lazySizes</strong>. Simply use the keyword <code>auto</code> inside of the <code>data-sizes</code> attributes (<code>data-sizes="auto"</code>).</p>
<p><strong>Important: How <code>sizes</code> is calculated</strong>: The automatic sizes calculation takes the width of the image if it is over <code>40</code> (see also <code>minSize</code> option). In case it's below the <code>minSize</code> threshold, it traverses up the DOM tree until it finds a parent which is over <code>40</code> and uses this number. Often the following general CSS rule might help: <code>img[data-sizes="auto"] { display: block; }</code>.</p>
</div>
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<img
alt=""
data-sizes="auto"
data-srcset="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg 240w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_n.jpg 320w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147.jpg 500w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_c.jpg 800w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_b.jpg 1024w"
class="lazyload" />
</div>
<div class="caption">
<h3>responsive image with srcset and <strong>automatic sizes</strong> attribute</h3>
<p>The <strong>autosizes feature</strong> makes using responsive images with the right <code>sizes</code> value easy as hell.</p>
<pre><img
alt=""
data-sizes="auto"
src="small.jpg"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
class="lazyload" />
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="alert alert-danger">
<p>For responsive images support you must use either use a full polyfill like <a href="https://github.com/scottjehl/picturefill" target="_blank">picturefill</a> or <a href="https://github.com/aFarkas/respimage">respimage</a> or use the <a href="https://github.com/aFarkas/lazysizes/blob/gh-pages/plugins/respimg">extreme lightweight partial respimg polyfill plugin</a> or use the <a href="https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias">Responsive Images as a Service extension</a>.</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic intrinsic-2">
<iframe data-src="//www.youtube.com/embed/ZfV-aYdU4uE" frameborder="0" allowfullscreen="" class="lazyload">
</iframe>
</div>
<div class="caption">
<h3>iframe</h3>
<p>Iframes can be loaded too:</p>
<pre><iframe data-src="//www.youtube.com/embed/ZfV-aYdU4uE" class="lazyload" frameborder="0" allowfullscreen></iframe>
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div data-ride="carousel" data-script="assets/js/bootstrap.min.js" data-link="assets/css/carousel.css" class="carousel lazyload lazypreload slide" data-interval="false" id="carousel-example-captions">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-example-captions"></li>
<li data-slide-to="1" data-target="#carousel-example-captions"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<div class="intrinsic">
<img alt="100%x200"
data-sizes="auto"
data-srcset="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg 240w,
https://farm1.staticflickr.com/113/284651694_69e63b374d.jpg 500w,
https://farm1.staticflickr.com/113/284651694_69e63b374d_z.jpg?zz=1 640w,
https://farm1.staticflickr.com/113/284651694_69e63b374d_o.jpg 800w"
class="lazyload" />
</div>
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item active">
<div class="intrinsic">
<img alt="100%x200"
data-srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg 500w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_z.jpg 640w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_b.jpg 1024w"
data-sizes="auto"
class="lazyload" />
</div>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-example-captions" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" role="button" href="#carousel-example-captions" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<div class="caption">
<h3>Widgets/Javascript/Script</h3>
<p>LazySizes can be extended to load nearly everything lazily. The <a href="https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins">ls.unveilhooks.js</a> plugin can be used to lazy load scripts, background images, and videos. Simply add a <code>data-script</code> to your widget and you are done:</p>
<pre><div data-ride="carousel" data-script="assets/js/bootstrap.min.js" class="carousel lazyload">
<!-- widget content -->
<div>
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="scroll-view">
<div class="scroll-doc">
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_m.jpg 240w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_n.jpg 320w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8.jpg 500w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_z.jpg 640w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_c.jpg 800w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_b.jpg 1024w"
alt="Desert Road" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg 240w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_n.jpg 320w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147.jpg 500w"
alt="@ The Desert Tortoise Natural Area" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg 240w,
https://farm1.staticflickr.com/113/284651694_69e63b374d.jpg 500w"
alt="Woman in water" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm3.staticflickr.com/2401/2171553538_37d0a133da_m.jpg 240w,
https://farm3.staticflickr.com/2401/2171553538_37d0a133da.jpg 500w"
alt="Borobudur" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm1.staticflickr.com/17/92230866_713ae1eeef_n.jpg 240w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef.jpg 375w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef_z.jpg 480w"
alt="A tree in the blue" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_n.jpg 240w,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5.jpg 375w,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5_z.jpg 480w"
alt="Windows on Istanbul" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm6.staticflickr.com/5139/5546134597_0b19627066_m.jpg 240w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066_n.jpg 320w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066.jpg 500w"
alt="Goldie Dawn" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg 240w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_n.jpg 320w"
alt="Avebury Stone Circle" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w"
alt="el castil de tierra" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm8.staticflickr.com/7356/11122919374_55294abec3_m.jpg 240w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_n.jpg 320w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3.jpg 500w"
alt="sunset" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_m.jpg 240w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_n.jpg 320w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc.jpg 500w"
alt="Sky and earth" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_n.jpg 240w,
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf.jpg 375w,
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_z.jpg 480w"
alt="Missing Ulsoor lake (Explore)" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_n.jpg 227w,
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d.jpg 354w,
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_z.jpg 453w"
alt="Oxford Path 2" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="alert alert-info">
<p>While other lazy loaders or responsive images solution need to be called, if new elements are added to the DOM or do become visible through a special user interaction or a JavaScript behavior.</p>
<p>LazySizes does automatically detect any changes to the DOM and the visibility of <code>.lazyload</code> elements.</p>
<button type="button" class="add-new btn btn-primary">click to add new elements</button>
</div>
<script type="text/html" class="template">
<div class="row">
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/abstract/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/animals/1"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/business/1/"
alt="" />
</div>
</div>
</div>
<div class="row effect-row">
<div class="thumbnail thumbnail-small lazyload lightSpeedIn" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/cats/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload lightSpeedIn" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/city/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload lightSpeedIn" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/food/1/"
alt="" />
</div>
</div>
</div>
<div class="row effect-row-middle">
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/nature/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/sports/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/technics/1/"
alt="" />
</div>
</div>
</div>
<div class="row effect-row-reverse">
<div class="thumbnail thumbnail-small lazyload flipInX" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/nightlife/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload flipInX" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/fashion/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload flipInX" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/people/1/"
alt="" />
</div>
</div>
</div>
<div class="row">
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/transport/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/animals/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/food/2/"
alt="" />
</div>
</div>
</div>
</script>
<script>
$('.add-new').on('click', function(){
var $template = $('.template');
$template.after($template.html());
});
</script>
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</div>
</body>
</html>
================================================
FILE: assets/css/bootstrap-theme.css
================================================
/*!
* Bootstrap v3.3.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*!
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=5e2acd9519dbb9aaf550)
* Config saved to config.json and https://gist.github.com/5e2acd9519dbb9aaf550
*/
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}
.btn-default:active,
.btn-primary:active,
.btn-success:active,
.btn-info:active,
.btn-warning:active,
.btn-danger:active,
.btn-default.active,
.btn-primary.active,
.btn-success.active,
.btn-info.active,
.btn-warning.active,
.btn-danger.active {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-default .badge,
.btn-primary .badge,
.btn-success .badge,
.btn-info .badge,
.btn-warning .badge,
.btn-danger .badge {
text-shadow: none;
}
.btn:active,
.btn.active {
background-image: none;
}
.btn-default {
background-image: -webkit-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #dbdbdb;
text-shadow: 0 1px 0 #fff;
border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus {
background-color: #e0e0e0;
background-position: 0 -15px;
}
.btn-default:active,
.btn-default.active {
background-color: #e0e0e0;
border-color: #dbdbdb;
}
.btn-default:disabled,
.btn-default[disabled] {
background-color: #e0e0e0;
background-image: none;
}
.btn-primary {
background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #2b669a;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #2d6ca2;
background-position: 0 -15px;
}
.btn-primary:active,
.btn-primary.active {
background-color: #2d6ca2;
border-color: #2b669a;
}
.btn-primary:disabled,
.btn-primary[disabled] {
background-color: #2d6ca2;
background-image: none;
}
.btn-success {
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #3e8f3e;
}
.btn-success:hover,
.btn-success:focus {
background-color: #419641;
background-position: 0 -15px;
}
.btn-success:active,
.btn-success.active {
background-color: #419641;
border-color: #3e8f3e;
}
.btn-success:disabled,
.btn-success[disabled] {
background-color: #419641;
background-image: none;
}
.btn-info {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #28a4c9;
}
.btn-info:hover,
.btn-info:focus {
background-color: #2aabd2;
background-position: 0 -15px;
}
.btn-info:active,
.btn-info.active {
background-color: #2aabd2;
border-color: #28a4c9;
}
.btn-info:disabled,
.btn-info[disabled] {
background-color: #2aabd2;
background-image: none;
}
.btn-warning {
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #e38d13;
}
.btn-warning:hover,
.btn-warning:focus {
background-color: #eb9316;
background-position: 0 -15px;
}
.btn-warning:active,
.btn-warning.active {
background-color: #eb9316;
border-color: #e38d13;
}
.btn-warning:disabled,
.btn-warning[disabled] {
background-color: #eb9316;
background-image: none;
}
.btn-danger {
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #b92c28;
}
.btn-danger:hover,
.btn-danger:focus {
background-color: #c12e2a;
background-position: 0 -15px;
}
.btn-danger:active,
.btn-danger.active {
background-color: #c12e2a;
border-color: #b92c28;
}
.btn-danger:disabled,
.btn-danger[disabled] {
background-color: #c12e2a;
background-image: none;
}
.thumbnail,
.img-thumbnail {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
background-color: #e8e8e8;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
background-color: #357ebd;
}
.navbar-default {
background-image: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a {
background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
background-image: -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
background-image: linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.navbar-inverse {
background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background-image: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background-image: linear-gradient(to bottom, #3c3c3c 0%, #222222 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .active > a {
background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
background-image: -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
background-image: linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
}
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
.alert {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.alert-success {
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
border-color: #b2dba1;
}
.alert-info {
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
background-image: -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
border-color: #9acfea;
}
.alert-warning {
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
background-image: -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
border-color: #f5e79e;
}
.alert-danger {
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
border-color: #dca7a7;
}
.progress {
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
background-image: -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
}
.progress-bar {
background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #3071a9 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
}
.progress-bar-success {
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
}
.progress-bar-info {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
}
.progress-bar-warning {
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
}
.progress-bar-danger {
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
}
.progress-bar-striped {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.list-group {
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
text-shadow: 0 -1px 0 #3071a9;
background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #3278b3 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
border-color: #3278b3;
}
.panel {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.panel-default > .panel-heading {
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
}
.panel-primary > .panel-heading {
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
}
.panel-success > .panel-heading {
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
}
.panel-info > .panel-heading {
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
background-image: -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
}
.panel-warning > .panel-heading {
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
background-image: -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
}
.panel-danger > .panel-heading {
background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
background-image: -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
}
.well {
background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
background-image: -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
border-color: #dcdcdc;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
}
================================================
FILE: assets/css/bootstrap.css
================================================
/*!
* Bootstrap v3.3.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*!
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=5e2acd9519dbb9aaf550)
* Config saved to config.json and https://gist.github.com/5e2acd9519dbb9aaf550
*/
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background-color: #ffffff;
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
a {
color: #428bca;
text-decoration: none;
}
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
figure {
margin: 0;
}
img {
vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 6px;
}
.img-thumbnail {
padding: 4px;
line-height: 1.42857143;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
display: inline-block;
max-width: 100%;
height: auto;
}
.img-circle {
border-radius: 50%;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eeeeee;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
font-weight: normal;
line-height: 1;
color: #777777;
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
margin-top: 20px;
margin-bottom: 10px;
}
h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
font-size: 65%;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
margin-top: 10px;
margin-bottom: 10px;
}
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
font-size: 75%;
}
h1,
.h1 {
font-size: 36px;
}
h2,
.h2 {
font-size: 30px;
}
h3,
.h3 {
font-size: 24px;
}
h4,
.h4 {
font-size: 18px;
}
h5,
.h5 {
font-size: 14px;
}
h6,
.h6 {
font-size: 12px;
}
p {
margin: 0 0 10px;
}
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 300;
line-height: 1.4;
}
@media (min-width: 768px) {
.lead {
font-size: 21px;
}
}
small,
.small {
font-size: 85%;
}
mark,
.mark {
background-color: #fcf8e3;
padding: .2em;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
.text-nowrap {
white-space: nowrap;
}
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
.text-muted {
color: #777777;
}
.text-primary {
color: #428bca;
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover {
color: #843534;
}
.bg-primary {
color: #fff;
background-color: #428bca;
}
a.bg-primary:hover {
background-color: #3071a9;
}
.bg-success {
background-color: #dff0d8;
}
a.bg-success:hover {
background-color: #c1e2b3;
}
.bg-info {
background-color: #d9edf7;
}
a.bg-info:hover {
background-color: #afd9ee;
}
.bg-warning {
background-color: #fcf8e3;
}
a.bg-warning:hover {
background-color: #f7ecb5;
}
.bg-danger {
background-color: #f2dede;
}
a.bg-danger:hover {
background-color: #e4b9b9;
}
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eeeeee;
}
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
margin-bottom: 0;
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
.list-inline {
padding-left: 0;
list-style: none;
margin-left: -5px;
}
.list-inline > li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
clear: left;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #777777;
}
.initialism {
font-size: 90%;
text-transform: uppercase;
}
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eeeeee;
}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
margin-bottom: 0;
}
blockquote footer,
blockquote small,
blockquote .small {
display: block;
font-size: 80%;
line-height: 1.42857143;
color: #777777;
}
blockquote footer:before,
blockquote small:before,
blockquote .small:before {
content: '\2014 \00A0';
}
.blockquote-reverse,
blockquote.pull-right {
padding-right: 15px;
padding-left: 0;
border-right: 5px solid #eeeeee;
border-left: 0;
text-align: right;
}
.blockquote-reverse footer:before,
blockquote.pull-right footer:before,
.blockquote-reverse small:before,
blockquote.pull-right small:before,
.blockquote-reverse .small:before,
blockquote.pull-right .small:before {
content: '';
}
.blockquote-reverse footer:after,
blockquote.pull-right footer:after,
.blockquote-reverse small:after,
blockquote.pull-right small:after,
.blockquote-reverse .small:after,
blockquote.pull-right .small:after {
content: '\00A0 \2014';
}
address {
margin-bottom: 20px;
font-style: normal;
line-height: 1.42857143;
}
code,
kbd,
pre,
samp {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
kbd {
padding: 2px 4px;
font-size: 90%;
color: #ffffff;
background-color: #333333;
border-radius: 3px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
kbd kbd {
padding: 0;
font-size: 100%;
font-weight: bold;
box-shadow: none;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
word-break: break-all;
word-wrap: break-word;
color: #333333;
background-color: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 4px;
}
pre code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
.col-xs-pull-12 {
right: 100%;
}
.col-xs-pull-11 {
right: 91.66666667%;
}
.col-xs-pull-10 {
right: 83.33333333%;
}
.col-xs-pull-9 {
right: 75%;
}
.col-xs-pull-8 {
right: 66.66666667%;
}
.col-xs-pull-7 {
right: 58.33333333%;
}
.col-xs-pull-6 {
right: 50%;
}
.col-xs-pull-5 {
right: 41.66666667%;
}
.col-xs-pull-4 {
right: 33.33333333%;
}
.col-xs-pull-3 {
right: 25%;
}
.col-xs-pull-2 {
right: 16.66666667%;
}
.col-xs-pull-1 {
right: 8.33333333%;
}
.col-xs-pull-0 {
right: auto;
}
.col-xs-push-12 {
left: 100%;
}
.col-xs-push-11 {
left: 91.66666667%;
}
.col-xs-push-10 {
left: 83.33333333%;
}
.col-xs-push-9 {
left: 75%;
}
.col-xs-push-8 {
left: 66.66666667%;
}
.col-xs-push-7 {
left: 58.33333333%;
}
.col-xs-push-6 {
left: 50%;
}
.col-xs-push-5 {
left: 41.66666667%;
}
.col-xs-push-4 {
left: 33.33333333%;
}
.col-xs-push-3 {
left: 25%;
}
.col-xs-push-2 {
left: 16.66666667%;
}
.col-xs-push-1 {
left: 8.33333333%;
}
.col-xs-push-0 {
left: auto;
}
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666667%;
}
.col-xs-offset-10 {
margin-left: 83.33333333%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666667%;
}
.col-xs-offset-7 {
margin-left: 58.33333333%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.66666667%;
}
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
.col-xs-offset-0 {
margin-left: 0%;
}
@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0%;
}
}
@media (min-width: 992px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: auto;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: auto;
}
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0%;
}
}
@media (min-width: 1200px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-12 {
width: 100%;
}
.col-lg-11 {
width: 91.66666667%;
}
.col-lg-10 {
width: 83.33333333%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-8 {
width: 66.66666667%;
}
.col-lg-7 {
width: 58.33333333%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-5 {
width: 41.66666667%;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-2 {
width: 16.66666667%;
}
.col-lg-1 {
width: 8.33333333%;
}
.col-lg-pull-12 {
right: 100%;
}
.col-lg-pull-11 {
right: 91.66666667%;
}
.col-lg-pull-10 {
right: 83.33333333%;
}
.col-lg-pull-9 {
right: 75%;
}
.col-lg-pull-8 {
right: 66.66666667%;
}
.col-lg-pull-7 {
right: 58.33333333%;
}
.col-lg-pull-6 {
right: 50%;
}
.col-lg-pull-5 {
right: 41.66666667%;
}
.col-lg-pull-4 {
right: 33.33333333%;
}
.col-lg-pull-3 {
right: 25%;
}
.col-lg-pull-2 {
right: 16.66666667%;
}
.col-lg-pull-1 {
right: 8.33333333%;
}
.col-lg-pull-0 {
right: auto;
}
.col-lg-push-12 {
left: 100%;
}
.col-lg-push-11 {
left: 91.66666667%;
}
.col-lg-push-10 {
left: 83.33333333%;
}
.col-lg-push-9 {
left: 75%;
}
.col-lg-push-8 {
left: 66.66666667%;
}
.col-lg-push-7 {
left: 58.33333333%;
}
.col-lg-push-6 {
left: 50%;
}
.col-lg-push-5 {
left: 41.66666667%;
}
.col-lg-push-4 {
left: 33.33333333%;
}
.col-lg-push-3 {
left: 25%;
}
.col-lg-push-2 {
left: 16.66666667%;
}
.col-lg-push-1 {
left: 8.33333333%;
}
.col-lg-push-0 {
left: auto;
}
.col-lg-offset-12 {
margin-left: 100%;
}
.col-lg-offset-11 {
margin-left: 91.66666667%;
}
.col-lg-offset-10 {
margin-left: 83.33333333%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-8 {
margin-left: 66.66666667%;
}
.col-lg-offset-7 {
margin-left: 58.33333333%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-5 {
margin-left: 41.66666667%;
}
.col-lg-offset-4 {
margin-left: 33.33333333%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-2 {
margin-left: 16.66666667%;
}
.col-lg-offset-1 {
margin-left: 8.33333333%;
}
.col-lg-offset-0 {
margin-left: 0%;
}
}
table {
background-color: transparent;
}
caption {
padding-top: 8px;
padding-bottom: 8px;
color: #777777;
text-align: left;
}
th {
text-align: left;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #dddddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
border-top: 0;
}
.table > tbody + tbody {
border-top: 2px solid #dddddd;
}
.table .table {
background-color: #ffffff;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}
.table-bordered {
border: 1px solid #dddddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #dddddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) {
background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
background-color: #f5f5f5;
}
table col[class*="col-"] {
position: static;
float: none;
display: table-column;
}
table td[class*="col-"],
table th[class*="col-"] {
position: static;
float: none;
display: table-cell;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
background-color: #f5f5f5;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
background-color: #e8e8e8;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
background-color: #dff0d8;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
background-color: #d0e9c6;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
background-color: #c4e3f3;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
background-color: #fcf8e3;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
background-color: #faf2cc;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
background-color: #f2dede;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
background-color: #ebcccc;
}
.table-responsive {
overflow-x: auto;
min-height: 0.01%;
}
@media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #dddddd;
}
.table-responsive > .table {
margin-bottom: 0;
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap;
}
.table-responsive > .table-bordered {
border: 0;
}
.table-responsive > .table-bordered > thead > tr > th:first-child,
.table-responsive > .table-bordered > tbody > tr > th:first-child,
.table-responsive > .table-bordered > tfoot > tr > th:first-child,
.table-responsive > .table-bordered > thead > tr > td:first-child,
.table-responsive > .table-bordered > tbody > tr > td:first-child,
.table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.table-responsive > .table-bordered > thead > tr > th:last-child,
.table-responsive > .table-bordered > tbody > tr > th:last-child,
.table-responsive > .table-bordered > tfoot > tr > th:last-child,
.table-responsive > .table-bordered > thead > tr > td:last-child,
.table-responsive > .table-bordered > tbody > tr > td:last-child,
.table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.table-responsive > .table-bordered > tbody > tr:last-child > th,
.table-responsive > .table-bordered > tfoot > tr:last-child > th,
.table-responsive > .table-bordered > tbody > tr:last-child > td,
.table-responsive > .table-bordered > tfoot > tr:last-child > td {
border-bottom: 0;
}
}
fieldset {
padding: 0;
margin: 0;
border: 0;
min-width: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal;
}
input[type="file"] {
display: block;
}
input[type="range"] {
display: block;
width: 100%;
}
select[multiple],
select[size] {
height: auto;
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
output {
display: block;
padding-top: 7px;
font-size: 14px;
line-height: 1.42857143;
color: #555555;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555555;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.form-control::-moz-placeholder {
color: #999999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999999;
}
.form-control::-webkit-input-placeholder {
color: #999999;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eeeeee;
opacity: 1;
}
textarea.form-control {
height: auto;
}
input[type="search"] {
-webkit-appearance: none;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
line-height: 34px;
line-height: 1.42857143 \0;
}
input[type="date"].input-sm,
input[type="time"].input-sm,
input[type="datetime-local"].input-sm,
input[type="month"].input-sm {
line-height: 30px;
line-height: 1.5 \0;
}
input[type="date"].input-lg,
input[type="time"].input-lg,
input[type="datetime-local"].input-lg,
input[type="month"].input-lg {
line-height: 46px;
line-height: 1.33 \0;
}
_:-ms-fullscreen,
:root input[type="date"],
_:-ms-fullscreen,
:root input[type="time"],
_:-ms-fullscreen,
:root input[type="datetime-local"],
_:-ms-fullscreen,
:root input[type="month"] {
line-height: 1.42857143;
}
_:-ms-fullscreen.input-sm,
:root input[type="date"].input-sm,
_:-ms-fullscreen.input-sm,
:root input[type="time"].input-sm,
_:-ms-fullscreen.input-sm,
:root input[type="datetime-local"].input-sm,
_:-ms-fullscreen.input-sm,
:root input[type="month"].input-sm {
line-height: 1.5;
}
_:-ms-fullscreen.input-lg,
:root input[type="date"].input-lg,
_:-ms-fullscreen.input-lg,
:root input[type="time"].input-lg,
_:-ms-fullscreen.input-lg,
:root input[type="datetime-local"].input-lg,
_:-ms-fullscreen.input-lg,
:root input[type="month"].input-lg {
line-height: 1.33;
}
.form-group {
margin-bottom: 15px;
}
.radio,
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label,
.checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-left: -20px;
margin-top: 4px \9;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}
.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
cursor: not-allowed;
}
.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
cursor: not-allowed;
}
.form-control-static {
padding-top: 7px;
padding-bottom: 7px;
margin-bottom: 0;
}
.form-control-static.input-lg,
.form-control-static.input-sm {
padding-left: 0;
padding-right: 0;
}
.input-sm,
.form-group-sm .form-control {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm,
select.form-group-sm .form-control {
height: 30px;
line-height: 30px;
}
textarea.input-sm,
textarea.form-group-sm .form-control,
select[multiple].input-sm,
select[multiple].form-group-sm .form-control {
height: auto;
}
.input-lg,
.form-group-lg .form-control {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-lg,
select.form-group-lg .form-control {
height: 46px;
line-height: 46px;
}
textarea.input-lg,
textarea.form-group-lg .form-control,
select[multiple].input-lg,
select[multiple].form-group-lg .form-control {
height: auto;
}
.has-feedback {
position: relative;
}
.has-feedback .form-control {
padding-right: 42.5px;
}
.form-control-feedback {
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
pointer-events: none;
}
.input-lg + .form-control-feedback {
width: 46px;
height: 46px;
line-height: 46px;
}
.input-sm + .form-control-feedback {
width: 30px;
height: 30px;
line-height: 30px;
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
color: #3c763d;
}
.has-success .form-control {
border-color: #3c763d;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .form-control:focus {
border-color: #2b542c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.has-success .input-group-addon {
color: #3c763d;
border-color: #3c763d;
background-color: #dff0d8;
}
.has-success .form-control-feedback {
color: #3c763d;
}
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
color: #8a6d3b;
}
.has-warning .form-control {
border-color: #8a6d3b;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .form-control:focus {
border-color: #66512c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-warning .input-group-addon {
color: #8a6d3b;
border-color: #8a6d3b;
background-color: #fcf8e3;
}
.has-warning .form-control-feedback {
color: #8a6d3b;
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
color: #a94442;
}
.has-error .form-control {
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .form-control:focus {
border-color: #843534;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-error .input-group-addon {
color: #a94442;
border-color: #a94442;
background-color: #f2dede;
}
.has-error .form-control-feedback {
color: #a94442;
}
.has-feedback label ~ .form-control-feedback {
top: 25px;
}
.has-feedback label.sr-only ~ .form-control-feedback {
top: 0;
}
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}
@media (min-width: 768px) {
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.form-inline .form-control-static {
display: inline-block;
}
.form-inline .input-group {
display: inline-table;
vertical-align: middle;
}
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn,
.form-inline .input-group .form-control {
width: auto;
}
.form-inline .input-group > .form-control {
width: 100%;
}
.form-inline .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .radio,
.form-inline .checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .radio label,
.form-inline .checkbox label {
padding-left: 0;
}
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
.form-inline .has-feedback .form-control-feedback {
top: 0;
}
}
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
margin-top: 0;
margin-bottom: 0;
padding-top: 7px;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
min-height: 27px;
}
.form-horizontal .form-group {
margin-left: -15px;
margin-right: -15px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
margin-bottom: 0;
padding-top: 7px;
}
}
.form-horizontal .has-feedback .form-control-feedback {
right: 15px;
}
@media (min-width: 768px) {
.form-horizontal .form-group-lg .control-label {
padding-top: 14.3px;
}
}
@media (min-width: 768px) {
.form-horizontal .form-group-sm .control-label {
padding-top: 6px;
}
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
color: #333333;
text-decoration: none;
}
.btn:active,
.btn.active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
cursor: not-allowed;
pointer-events: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-default {
color: #333333;
background-color: #ffffff;
border-color: #cccccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
color: #333333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
background-color: #ffffff;
border-color: #cccccc;
}
.btn-default .badge {
color: #ffffff;
background-color: #333333;
}
.btn-primary {
color: #ffffff;
background-color: #428bca;
border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
color: #ffffff;
background-color: #3071a9;
border-color: #285e8e;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
background-color: #428bca;
border-color: #357ebd;
}
.btn-primary .badge {
color: #428bca;
background-color: #ffffff;
}
.btn-success {
color: #ffffff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #449d44;
border-color: #398439;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-success .badge {
color: #5cb85c;
background-color: #ffffff;
}
.btn-info {
color: #ffffff;
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
color: #ffffff;
background-color: #31b0d5;
border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-info .badge {
color: #5bc0de;
background-color: #ffffff;
}
.btn-warning {
color: #ffffff;
background-color: #f0ad4e;
border-color: #eea236;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
color: #ffffff;
background-color: #ec971f;
border-color: #d58512;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
background-image: none;
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled.focus,
.btn-warning[disabled].focus,
fieldset[disabled] .btn-warning.focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
background-color: #f0ad4e;
border-color: #eea236;
}
.btn-warning .badge {
color: #f0ad4e;
background-color: #ffffff;
}
.btn-danger {
color: #ffffff;
background-color: #d9534f;
border-color: #d43f3a;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
color: #ffffff;
background-color: #c9302c;
border-color: #ac2925;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
background-image: none;
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
background-color: #d9534f;
border-color: #d43f3a;
}
.btn-danger .badge {
color: #d9534f;
background-color: #ffffff;
}
.btn-link {
color: #428bca;
font-weight: normal;
border-radius: 0;
}
.btn-link,
.btn-link:active,
.btn-link.active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
border-color: transparent;
}
.btn-link:hover,
.btn-link:focus {
color: #2a6496;
text-decoration: underline;
background-color: transparent;
}
.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
color: #777777;
text-decoration: none;
}
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-block {
display: block;
width: 100%;
}
.btn-block + .btn-block {
margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
width: 100%;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #ffffff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
a.label:hover,
a.label:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.label:empty {
display: none;
}
.btn .label {
position: relative;
top: -1px;
}
.label-default {
background-color: #777777;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #5e5e5e;
}
.label-primary {
background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #3071a9;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #ec971f;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}
.jumbotron {
padding: 30px 15px;
margin-bottom: 30px;
color: inherit;
background-color: #eeeeee;
}
.jumbotron h1,
.jumbotron .h1 {
color: inherit;
}
.jumbotron p {
margin-bottom: 15px;
font-size: 21px;
font-weight: 200;
}
.jumbotron > hr {
border-top-color: #d5d5d5;
}
.container .jumbotron,
.container-fluid .jumbotron {
border-radius: 6px;
}
.jumbotron .container {
max-width: 100%;
}
@media screen and (min-width: 768px) {
.jumbotron {
padding: 48px 0;
}
.container .jumbotron {
padding-left: 60px;
padding-right: 60px;
}
.jumbotron h1,
.jumbotron .h1 {
font-size: 63px;
}
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: border 0.2s ease-in-out;
-o-transition: border 0.2s ease-in-out;
transition: border 0.2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-left: auto;
margin-right: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #428bca;
}
.thumbnail .caption {
padding: 9px;
color: #333333;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert h4 {
margin-top: 0;
color: inherit;
}
.alert .alert-link {
font-weight: bold;
}
.alert > p,
.alert > ul {
margin-bottom: 0;
}
.alert > p + p {
margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d;
}
.alert-success hr {
border-top-color: #c9e2b3;
}
.alert-success .alert-link {
color: #2b542c;
}
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
}
.alert-info hr {
border-top-color: #a6e1ec;
}
.alert-info .alert-link {
color: #245269;
}
.alert-warning {
background-color: #fcf8e3;
border-color: #faebcc;
color: #8a6d3b;
}
.alert-warning hr {
border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
color: #66512c;
}
.alert-danger {
background-color: #f2dede;
border-color: #ebccd1;
color: #a94442;
}
.alert-danger hr {
border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
color: #843534;
}
.panel {
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
padding: 15px;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
color: inherit;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
}
.panel-title > a {
color: inherit;
}
.panel-footer {
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #dddddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel > .list-group,
.panel > .panel-collapse > .list-group {
margin-bottom: 0;
}
.panel > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item {
border-width: 1px 0;
border-radius: 0;
}
.panel > .list-group:first-child .list-group-item:first-child,
.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
border-top: 0;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel > .list-group:last-child .list-group-item:last-child,
.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
border-bottom: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel-heading + .list-group .list-group-item:first-child {
border-top-width: 0;
}
.list-group + .panel-footer {
border-top-width: 0;
}
.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
margin-bottom: 0;
}
.panel > .table caption,
.panel > .table-responsive > .table caption,
.panel > .panel-collapse > .table caption {
padding-left: 15px;
padding-right: 15px;
}
.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
border-top-left-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
border-top-right-radius: 3px;
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
border-bottom-right-radius: 3px;
}
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive,
.panel > .table + .panel-body,
.panel > .table-responsive + .panel-body {
border-top: 1px solid #dddddd;
}
.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
border-top: 0;
}
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
border: 0;
}
.panel > .table-bordered > thead > tr > th:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.panel > .table-bordered > tbody > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.panel > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-bordered > thead > tr > td:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.panel > .table-bordered > tbody > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.panel > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > tbody > tr:first-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.panel > .table-bordered > tbody > tr:first-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
border-bottom: 0;
}
.panel > .table-bordered > tbody > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.panel > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-bordered > tbody > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.panel > .table-bordered > tfoot > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
border-bottom: 0;
}
.panel > .table-responsive {
border: 0;
margin-bottom: 0;
}
.panel-group {
margin-bottom: 20px;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 4px;
}
.panel-group .panel + .panel {
margin-top: 5px;
}
.panel-group .panel-heading {
border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
border-top: 1px solid #dddddd;
}
.panel-group .panel-footer {
border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
border-bottom: 1px solid #dddddd;
}
.panel-default {
border-color: #dddddd;
}
.panel-default > .panel-heading {
color: #333333;
background-color: #f5f5f5;
border-color: #dddddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #dddddd;
}
.panel-default > .panel-heading .badge {
color: #f5f5f5;
background-color: #333333;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #dddddd;
}
.panel-primary {
border-color: #428bca;
}
.panel-primary > .panel-heading {
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #428bca;
}
.panel-primary > .panel-heading .badge {
color: #428bca;
background-color: #ffffff;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #428bca;
}
.panel-success {
border-color: #d6e9c6;
}
.panel-success > .panel-heading {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #d6e9c6;
}
.panel-success > .panel-heading .badge {
color: #dff0d8;
background-color: #3c763d;
}
.panel-success > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #d6e9c6;
}
.panel-info {
border-color: #bce8f1;
}
.panel-info > .panel-heading {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #bce8f1;
}
.panel-info > .panel-heading .badge {
color: #d9edf7;
background-color: #31708f;
}
.panel-info > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #bce8f1;
}
.panel-warning {
border-color: #faebcc;
}
.panel-warning > .panel-heading {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #faebcc;
}
.panel-warning > .panel-heading .badge {
color: #fcf8e3;
background-color: #8a6d3b;
}
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #faebcc;
}
.panel-danger {
border-color: #ebccd1;
}
.panel-danger > .panel-heading {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #ebccd1;
}
.panel-danger > .panel-heading .badge {
color: #f2dede;
background-color: #a94442;
}
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #ebccd1;
}
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-inner > .item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item {
transition: transform 0.6s ease-in-out;
backface-visibility: hidden;
perspective: 1000;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
transform: translate3d(100%, 0, 0);
left: 0;
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
transform: translate3d(-100%, 0, 0);
left: 0;
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
transform: translate3d(0, 0, 0);
left: 0;
}
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 15%;
opacity: 0.5;
filter: alpha(opacity=50);
font-size: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
left: auto;
right: 0;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
outline: 0;
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
left: 50%;
margin-left: -10px;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
right: 50%;
margin-right: -10px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 20px;
height: 20px;
margin-top: -10px;
font-family: serif;
}
.carousel-control .icon-prev:before {
content: '\2039';
}
.carousel-control .icon-next:before {
content: '\203a';
}
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid #ffffff;
border-radius: 10px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
margin: 0;
width: 12px;
height: 12px;
background-color: #ffffff;
}
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
text-shadow: none;
}
@media screen and (min-width: 768px) {
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
font-size: 30px;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
margin-left: -15px;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
margin-right: -15px;
}
.carousel-caption {
left: 20%;
right: 20%;
padding-bottom: 30px;
}
.carousel-indicators {
bottom: 20px;
}
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.panel-body:before,
.panel-body:after {
content: " ";
display: table;
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.panel-body:after {
clear: both;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.affix {
position: fixed;
}
@-ms-viewport {
width: device-width;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
@media (max-width: 767px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
}
@media (max-width: 767px) {
.visible-xs-block {
display: block !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline {
display: inline !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline-block {
display: inline-block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-block {
display: block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline {
display: inline !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline-block {
display: inline-block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}
table.visible-md {
display: table;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-block {
display: block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline {
display: inline !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline-block {
display: inline-block !important;
}
}
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}
table.visible-lg {
display: table;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-lg-block {
display: block !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline {
display: inline !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline-block {
display: inline-block !important;
}
}
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
.visible-print {
display: none !important;
}
@media print {
.visible-print {
display: block !important;
}
table.visible-print {
display: table;
}
tr.visible-print {
display: table-row !important;
}
th.visible-print,
td.visible-print {
display: table-cell !important;
}
}
.visible-print-block {
display: none !important;
}
@media print {
.visible-print-block {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
}
@media print {
.visible-print-inline {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
}
@media print {
.visible-print-inline-block {
display: inline-block !important;
}
}
@media print {
.hidden-print {
display: none !important;
}
}
================================================
FILE: assets/css/carousel.css
================================================
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-inner > .item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 15%;
opacity: 0.5;
filter: alpha(opacity=50);
font-size: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
left: auto;
right: 0;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
outline: 0;
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
left: 50%;
margin-left: -10px;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
right: 50%;
margin-right: -10px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 20px;
height: 20px;
margin-top: -10px;
font-family: serif;
}
.carousel-control .icon-prev:before {
content: '\2039';
}
.carousel-control .icon-next:before {
content: '\203a';
}
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid #ffffff;
border-radius: 10px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
margin: 0;
width: 12px;
height: 12px;
background-color: #ffffff;
}
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
text-shadow: none;
}
@media screen and (min-width: 768px) {
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
font-size: 30px;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
margin-left: -15px;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
margin-right: -15px;
}
.carousel-caption {
left: 20%;
right: 20%;
padding-bottom: 30px;
}
.carousel-indicators {
bottom: 20px;
}
}
================================================
FILE: assets/css/tidy.css
================================================
/*!
* Bootstrap v3.3.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*!
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=5e2acd9519dbb9aaf550)
* Config saved to config.json and https://gist.github.com/5e2acd9519dbb9aaf550
*/
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
strong {
font-weight: bold;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
img {
border: 0;
}
pre {
overflow: auto;
}
code,
pre {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button {
text-transform: none;
}
button {
-webkit-appearance: button;
cursor: pointer;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
input,
button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
a {
color: #428bca;
text-decoration: none;
}
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
img {
vertical-align: middle;
}
.thumbnail>img {
display: block;
max-width: 100%;
height: auto;
}
h1,
h3 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1,
h3 {
margin-top: 20px;
margin-bottom: 10px;
}
h1 {
font-size: 36px;
}
h3 {
font-size: 24px;
}
p {
margin: 0 0 10px;
}
code,
pre {
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
word-break: break-all;
word-wrap: break-word;
color: #333;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width:768px) {
.container {
width: 750px;
}
}
@media (min-width:992px) {
.container {
width: 970px;
}
}
@media (min-width:1200px) {
.container {
width: 1170px;
}
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.col-sm-4,
.col-sm-6,
.col-sm-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width:768px) {
.col-sm-4,
.col-sm-6,
.col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-4 {
width: 33%;
}
.col-sm-6 {
width: 50%;
}
}
table {
background-color: transparent;
}
th {
text-align: left;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tbody>tr>td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
.table>thead>tr>th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
.table>thead:first-child>tr:first-child>th {
border-top: 0;
}
.table-condensed>thead>tr>th,
.table-condensed>tbody>tr>th,
.table-condensed>tbody>tr>td {
padding: 5px;
}
.table-striped>tbody>tr:nth-child(odd) {
background-color: #f9f9f9;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
min-width: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal;
}
input[type="range"] {
display: block;
width: 100%;
}
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
}
_:-ms-fullscreen,
_:-ms-fullscreen,
_:-ms-fullscreen,
_:-ms-fullscreen {
line-height: 1.42857143;
}
_:-ms-fullscreen.input-sm,
_:-ms-fullscreen.input-sm,
_:-ms-fullscreen.input-sm,
_:-ms-fullscreen.input-sm {
line-height: 1.5;
}
_:-ms-fullscreen.input-lg,
_:-ms-fullscreen.input-lg,
_:-ms-fullscreen.input-lg,
_:-ms-fullscreen.input-lg {
line-height: 1.33;
}
.form-group {
margin-bottom: 15px;
}
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
.checkbox input[type="checkbox"] {
position: absolute;
margin-left: -20px;
margin-top: 4px \9;
}
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn:focus,
.btn:active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus {
color: #333;
text-decoration: none;
}
.btn:active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
}
.btn-primary {
color: #fff;
background-color: #428bca;
border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
color: #fff;
background-color: #3071a9;
border-color: #285e8e;
}
.btn-primary:active {
background-image: none;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.label-default {
background-color: #777;
}
.label-success {
background-color: #5cb85c;
}
.label-danger {
background-color: #d9534f;
}
.jumbotron {
padding: 30px 15px;
margin-bottom: 30px;
color: inherit;
background-color: #eee;
}
.jumbotron h1 {
color: inherit;
}
.jumbotron p {
margin-bottom: 15px;
font-size: 21px;
font-weight: 200;
}
.container .jumbotron {
border-radius: 6px;
}
@media screen and (min-width:768px) {
.jumbotron {
padding: 48px 0;
}
.container .jumbotron {
padding-left: 60px;
padding-right: 60px;
}
.jumbotron h1 {
font-size: 63px;
}
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.thumbnail>img {
margin-left: auto;
margin-right: auto;
}
.thumbnail .caption {
padding: 9px;
color: #333;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert>p {
margin-bottom: 0;
}
.alert>p+p {
margin-top: 5px;
}
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
}
.alert-danger {
background-color: #f2dede;
border-color: #ebccd1;
color: #a94442;
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.panel-body {
padding: 15px;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel-default {
border-color: #ddd;
}
.panel-default>.panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
}
.container:before,
.container:after,
.row:before,
.row:after,
.panel-body:before,
.panel-body:after {
content: " ";
display: table;
}
.container:after,
.row:after,
.panel-body:after {
clear: both;
}
@-ms-viewport {
width: device-width;
}
/*!
* Bootstrap v3.3.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*!
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=5e2acd9519dbb9aaf550)
* Config saved to config.json and https://gist.github.com/5e2acd9519dbb9aaf550
*/
.btn-primary {
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
}
.btn-primary:active {
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
}
.btn:active {
background-image: none;
}
.btn-primary {
background-image: -webkit-linear-gradient(top, #428bca 0, #2d6ca2 100%);
background-image: -o-linear-gradient(top, #428bca 0, #2d6ca2 100%);
background-image: linear-gradient(to bottom, #428bca 0, #2d6ca2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #2b669a;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #2d6ca2;
background-position: 0 -15px;
}
.btn-primary:active {
background-color: #2d6ca2;
border-color: #2b669a;
}
.btn-primary:disabled {
background-color: #2d6ca2;
background-image: none;
}
.thumbnail {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.075);
box-shadow: 0 1px 2px rgba(0,0,0,0.075);
}
.alert {
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25),0 1px 2px rgba(0,0,0,0.05);
}
.alert-info {
background-image: -webkit-linear-gradient(top, #d9edf7 0, #b9def0 100%);
background-image: -o-linear-gradient(top, #d9edf7 0, #b9def0 100%);
background-image: linear-gradient(to bottom, #d9edf7 0, #b9def0 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
border-color: #9acfea;
}
.alert-danger {
background-image: -webkit-linear-gradient(top, #f2dede 0, #e7c3c3 100%);
background-image: -o-linear-gradient(top, #f2dede 0, #e7c3c3 100%);
background-image: linear-gradient(to bottom, #f2dede 0, #e7c3c3 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
border-color: #dca7a7;
}
.panel {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.panel-default>.panel-heading {
background-image: -webkit-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%);
background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
}
================================================
FILE: assets/js/bootstrap.js
================================================
/*!
* Bootstrap v3.2.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*!
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=43210ccffbad43b37f66)
* Config saved to config.json and https://gist.github.com/43210ccffbad43b37f66
*/
if (typeof jQuery === "undefined") { throw new Error("Bootstrap's JavaScript requires jQuery") }
/* ========================================================================
* Bootstrap: carousel.js v3.2.0
* http://getbootstrap.com/javascript/#carousel
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// CAROUSEL CLASS DEFINITION
// =========================
var Carousel = function (element, options) {
this.$element = $(element).on('keydown.bs.carousel', $.proxy(this.keydown, this))
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options
this.paused =
this.sliding =
this.interval =
this.$active =
this.$items = null
this.options.pause == 'hover' && this.$element
.on('mouseenter.bs.carousel', $.proxy(this.pause, this))
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
}
Carousel.VERSION = '3.2.0'
Carousel.DEFAULTS = {
interval: 5000,
pause: 'hover',
wrap: true
}
Carousel.prototype.keydown = function (e) {
switch (e.which) {
case 37: this.prev(); break
case 39: this.next(); break
default: return
}
e.preventDefault()
}
Carousel.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval && clearInterval(this.interval)
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
return this
}
Carousel.prototype.getItemIndex = function (item) {
this.$items = item.parent().children('.item')
return this.$items.index(item || this.$active)
}
Carousel.prototype.to = function (pos) {
var that = this
var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
if (pos > (this.$items.length - 1) || pos < 0) return
if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
if (activeIndex == pos) return this.pause().cycle()
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
}
Carousel.prototype.pause = function (e) {
e || (this.paused = true)
if (this.$element.find('.next, .prev').length && $.support.transition) {
this.$element.trigger($.support.transition.end)
this.cycle(true)
}
this.interval = clearInterval(this.interval)
return this
}
Carousel.prototype.next = function () {
if (this.sliding) return
return this.slide('next')
}
Carousel.prototype.prev = function () {
if (this.sliding) return
return this.slide('prev')
}
Carousel.prototype.slide = function (type, next) {
var $active = this.$element.find('.item.active')
var $next = next || $active[type]()
var isCycling = this.interval
var direction = type == 'next' ? 'left' : 'right'
var fallback = type == 'next' ? 'first' : 'last'
var that = this
if (!$next.length) {
if (!this.options.wrap) return
$next = this.$element.find('.item')[fallback]()
}
if ($next.hasClass('active')) return (this.sliding = false)
var relatedTarget = $next[0]
var slideEvent = $.Event('slide.bs.carousel', {
relatedTarget: relatedTarget,
direction: direction
})
this.$element.trigger(slideEvent)
if (slideEvent.isDefaultPrevented()) return
this.sliding = true
isCycling && this.pause()
if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active')
var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
$nextIndicator && $nextIndicator.addClass('active')
}
var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
if ($.support.transition && this.$element.hasClass('slide')) {
$next.addClass(type)
$next[0].offsetWidth // force reflow
$active.addClass(direction)
$next.addClass(direction)
$active
.one('bsTransitionEnd', function () {
$next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' '))
that.sliding = false
setTimeout(function () {
that.$element.trigger(slidEvent)
}, 0)
})
.emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000)
} else {
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger(slidEvent)
}
isCycling && this.cycle()
return this
}
// CAROUSEL PLUGIN DEFINITION
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.carousel')
var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
var action = typeof option == 'string' ? option : options.slide
if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option)
else if (action) data[action]()
else if (options.interval) data.pause().cycle()
})
}
var old = $.fn.carousel
$.fn.carousel = Plugin
$.fn.carousel.Constructor = Carousel
// CAROUSEL NO CONFLICT
// ====================
$.fn.carousel.noConflict = function () {
$.fn.carousel = old
return this
}
// CAROUSEL DATA-API
// =================
$(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
var href
var $this = $(this)
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
if (!$target.hasClass('carousel')) return
var options = $.extend({}, $target.data(), $this.data())
var slideIndex = $this.attr('data-slide-to')
if (slideIndex) options.interval = false
Plugin.call($target, options)
if (slideIndex) {
$target.data('bs.carousel').to(slideIndex)
}
e.preventDefault()
})
$(window).on('load', function () {
$('[data-ride="carousel"]').each(function () {
var $carousel = $(this)
Plugin.call($carousel, $carousel.data())
})
})
}(jQuery);
/* ========================================================================
* Bootstrap: transition.js v3.2.0
* http://getbootstrap.com/javascript/#transitions
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
OTransition : 'oTransitionEnd otransitionend',
transition : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false
var $el = this
$(this).one('bsTransitionEnd', function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}
$(function () {
$.support.transition = transitionEnd()
if (!$.support.transition) return
$.event.special.bsTransitionEnd = {
bindType: $.support.transition.end,
delegateType: $.support.transition.end,
handle: function (e) {
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
}
}
})
}(jQuery);
================================================
FILE: bower.json
================================================
{
"name": "lazysizes",
"repo": "afarkas/lazysizes",
"main": "lazysizes.js",
"scripts": [
"lazysizes.js",
"lazysizes.min.js"
],
"license": "MIT",
"authors": [
"Alexander Farkas <info@corrupt-system.de>"
],
"moduleType": [
"amd",
"globals"
],
"description": "High performance (jankfree) lazy loader for images (including responsive images), iframes and scripts (widgets).",
"keywords": ["lazy", "lazyloader", "performance", "responsive", "image", "responsive images", "picture", "srcset"],
"ignore": [
"**/.*",
"node_modules",
"/assets",
"/maxdpr",
"/rias",
"/include",
"/optimumx",
"bower_components",
"/test",
"/tests",
"index.html",
"no-src.html",
"animate.html",
"Gruntfile.js",
"component.json",
"package.json",
"plato-report"
]
}
================================================
FILE: component.json
================================================
{
"name": "lazysizes",
"version": "1.4.0",
"repo": "afarkas/lazysizes",
"main": "lazysizes.min.js",
"scripts": ["lazysizes.min.js"],
"description": "High performance (jankfree) lazy loader for images (including responsive images), iframes and scripts (widgets).",
"keywords": ["lazy", "lazyloader", "performance", "responsive", "image", "responsive images", "picture", "srcset"],
"license": "MIT"
}
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>lazysizes - the ultimate lazyloader for responsive images, iframes and widget</title>
<link rel="canonical" href="https://afarkas.github.io/lazysizes/index.html" />
<script>
function loadJS(u){var r=document.getElementsByTagName("script")[ 0 ],s=document.createElement("script");s.src=u;r.parentNode.insertBefore(s,r);}
if(!window.HTMLPictureElement || !('sizes' in document.createElement('img'))){
document.createElement('picture');
loadJS("plugins/respimg/ls.respimg.min.js");
}
</script>
<link href="assets/css/tidy.css" rel="stylesheet" />
<style>
.nav {
margin-bottom: 30px;
}
.intrinsic {
position: relative;
padding-bottom: 75%;
height: 0;
}
.intrinsic-2 {
padding-bottom: 56.25%;
}
.intrinsic-3 {
padding-bottom: 133.333%;
}
.intrinsic img,
.intrinsic iframe,
.intrinsic .lazyload {
position:absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: none;
overflow: hidden;
}
.thumbnail-small {
width: 32%;
display: inline-block;
margin-bottom: 35px;
}
pre {
-moz-tab-size: 2;
tab-size: 2;
}
.scroll-view {
overflow: auto;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
width: 100%;
padding: 2px 2px 10px;
}
.scroll-doc {
display: table;
position: relative;
text-align: left;
}
.scroll-item {
display: table-cell;
vertical-align: middle;
}
.scroll-item .thumbnail {
margin: 5px 10px;
width: 230px;
}
.scroll-item .thumbnail img {
width: 100%;
height: auto;
}
.no-src.lazyload,
.no-src.lazyloading {
opacity: 0;
}
.no-src.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}
[data-expand].lazyload {
opacity: 0;
transform: scale(0.8);
}
[data-expand].lazyloaded {
opacity: 1;
transition: all 700ms;
transform: scale(1);
}
.effect-row-middle > [data-expand]:nth-child(2),
.effect-row-reverse > [data-expand]:nth-child(3),
.effect-row > [data-expand]:nth-child(1) {
transition-delay: 100ms;
}
.effect-row-middle > [data-expand]:nth-child(1),
.effect-row-middle > [data-expand]:nth-child(3),
.effect-row-reverse > [data-expand]:nth-child(2),
.effect-row > [data-expand]:nth-child(2) {
transition-delay: 400ms;
}
.effect-row-reverse > [data-expand]:nth-child(1),
.effect-row > [data-expand]:nth-child(3) {
transition-delay: 700ms;
}
/*.blur-up {*/
/*-webkit-filter: blur(4px);*/
/*filter: blur(4px);*/
/*transition: filter 400ms, -webkit-filter 400ms;*/
/*}*/
/*.blur-up.lazyloaded {*/
/*-webkit-filter: blur(0);*/
/*filter: blur(0);*/
/*}*/
</style>
<script>
(function(){
var docElem = document.documentElement;
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadMode = 1;
//set expand to a higher value on larger displays
window.lazySizesConfig.expand = Math.max(Math.min(docElem.clientWidth, docElem.clientHeight, 1222) - 1, 359);
window.lazySizesConfig.expFactor = lazySizesConfig.expand < 380 ? 3 : 2;
})();
</script>
<script src="plugins/unveilhooks/ls.unveilhooks.min.js" async=""></script>
<script src="lazysizes.min.js" async=""></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>lazySizes</h1>
<p><strong>lazySizes</strong> is the ultimate and lightweight lazyLoader which lazy loads images (including responsive images (picture/srcset)), iframes and scripts. It is written in VanillaJS and with high performance in mind.</p>
<p>Simply add the JS to your website and put the <code>class</code> <code>lazyload</code> to all elements, which should be lazy loaded. For a short <a href="https://github.com/aFarkas/lazysizes/blob/gh-pages/README.md">API description go to the readme.md</a>.</p>
</div>
<div id="examples">
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<img
alt="bird"
src="https://images.unsplash.com/photo-1470116073782-48ae2ccd8ffd?ixlib=rb-1.2.1&auto=format&fit=crop&w=100"
data-src="https://images.unsplash.com/photo-1470116073782-48ae2ccd8ffd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80"
class="lazyload" />
</div>
<div class="caption">
<h3>Image with LQIP technique</h3>
<p>The low quality image placeholder pattern uses a low quality image for the first impression.</p>
<pre><img
alt="bird"
src="low-quality.jpg"
data-src="normal-quality.jpg"
class="lazyload" />
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<img alt="Mountain" data-src="https://images.unsplash.com/photo-1544198365-f5d60b6d8190?ixlib=rb-1.2.1&auto=format&fit=crop&w=1130&q=80" class="lazyload no-src" />
</div>
<div class="caption">
<h3>Normal lazy image</h3>
<p>Of course the low quality image can be simply omitted to save more image data.</p>
<pre><img class="lazyload" data-src="image.jpg" alt="Mountain" />
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<img
alt="Jellyfish"
sizes="(min-width: 1000px) 930px, 90vw"
data-sizes="auto"
data-src="https://images.unsplash.com/photo-1523264629844-40dd6bf17c2b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&q=60"
data-srcset="https://images.unsplash.com/photo-1523264629844-40dd6bf17c2b?ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=60 240w,
https://images.unsplash.com/photo-1523264629844-40dd6bf17c2b?ixlib=rb-1.2.1&auto=format&fit=crop&w=320&q=60 320w,
https://images.unsplash.com/photo-1523264629844-40dd6bf17c2b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60 500w,
https://images.unsplash.com/photo-1523264629844-40dd6bf17c2b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=60 640w,
https://images.unsplash.com/photo-1523264629844-40dd6bf17c2b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&q=60 1024w"
class="lazyload no-src" />
</div>
<div class="caption">
<h3>responsive image with srcset and sizes attribute</h3>
<p>Simply use <code>data-srcset</code> and you can support responsive images.</p>
<pre><img
alt="Jellyfish"
sizes="(min-width: 1000px) 930px, 90vw"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
data-src="medium.jpg"
class="lazyload" />
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<picture>
<!--[if IE 9]><audio><![endif]-->
<source
data-src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&crop=focalpoint&w=550&q=80&ar=1.5:1&fp-x=0.55&fp-y=0.35&fp-z=2"
data-srcset="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&crop=focalpoint&w=240&q=80&ar=1.5:1&fp-x=0.55&fp-y=0.35&fp-z=2 240w,
https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&crop=focalpoint&w=320&q=80&ar=1.5:1&fp-x=0.55&fp-y=0.35&fp-z=2 320w,
https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&crop=focalpoint&w=500&q=80&ar=1.5:1&fp-x=0.55&fp-y=0.35&fp-z=2 500w"
media="(max-width: 550px)" />
<source
data-src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?i
gitextract__71k464b/
├── BingSiteAuth.xml
├── CHANGELOG.md
├── Gruntfile.js
├── LICENSE
├── README.md
├── animate.html
├── assets/
│ ├── css/
│ │ ├── bootstrap-theme.css
│ │ ├── bootstrap.css
│ │ ├── carousel.css
│ │ └── tidy.css
│ └── js/
│ └── bootstrap.js
├── bower.json
├── component.json
├── index.html
├── lazysizes-umd.js
├── lazysizes.d.ts
├── lazysizes.js
├── no-src.html
├── optimumx/
│ ├── child.html
│ ├── index.html
│ └── js/
│ └── parent.js
├── package.json
├── plugins/
│ ├── README.md
│ ├── artdirect/
│ │ ├── README.md
│ │ └── ls.artdirect.js
│ ├── aspectratio/
│ │ ├── README.md
│ │ └── ls.aspectratio.js
│ ├── attrchange/
│ │ ├── README.md
│ │ └── ls.attrchange.js
│ ├── bgset/
│ │ ├── README.md
│ │ └── ls.bgset.js
│ ├── blur-up/
│ │ ├── README.md
│ │ └── ls.blur-up.js
│ ├── custommedia/
│ │ ├── README.md
│ │ └── ls.custommedia.js
│ ├── fix-edge-h-descriptor/
│ │ ├── README.md
│ │ └── ls.fix-edge-h-descriptor.js
│ ├── fix-ios-sizes/
│ │ └── fix-ios-sizes.js
│ ├── include/
│ │ ├── README.md
│ │ └── ls.include.js
│ ├── native-loading/
│ │ ├── README.md
│ │ └── ls.native-loading.js
│ ├── noscript/
│ │ ├── README.md
│ │ └── ls.noscript.js
│ ├── object-fit/
│ │ ├── README.md
│ │ └── ls.object-fit.js
│ ├── optimumx/
│ │ ├── README.md
│ │ └── ls.optimumx.js
│ ├── parent-fit/
│ │ ├── README.md
│ │ └── ls.parent-fit.js
│ ├── print/
│ │ ├── README.md
│ │ └── ls.print.js
│ ├── progressive/
│ │ ├── README.md
│ │ └── ls.progressive.js
│ ├── respimg/
│ │ ├── README.md
│ │ └── ls.respimg.js
│ ├── rias/
│ │ ├── README.md
│ │ └── ls.rias.js
│ ├── static-gecko-picture/
│ │ └── ls.static-gecko-picture.js
│ ├── twitter/
│ │ └── ls.twitter.js
│ ├── unload/
│ │ ├── README.md
│ │ └── ls.unload.js
│ ├── unveilhooks/
│ │ ├── README.md
│ │ └── ls.unveilhooks.js
│ └── video-embed/
│ ├── README.md
│ └── ls.video-embed.js
├── rias/
│ └── index.html
├── src/
│ ├── common.wrapper
│ ├── lazysizes-core.js
│ ├── lazysizes-intersection.js
│ └── umd.wrapper
├── tests/
│ ├── functional-tests-plugins.js
│ ├── functional-tests.js
│ ├── index.html
│ ├── test-files/
│ │ ├── content-file.html
│ │ └── matchMedia.js
│ └── test-helper.js
├── tsconfig.json
└── types/
├── global.d.ts
└── lazysizes-config.d.ts
SYMBOL INDEX (62 symbols across 16 files)
FILE: assets/js/bootstrap.js
function Plugin (line 178) | function Plugin(option) {
function transitionEnd (line 252) | function transitionEnd() {
FILE: lazysizes.d.ts
type LazySizesConfigPartial (line 58) | type LazySizesConfigPartial = {
FILE: plugins/artdirect/ls.artdirect.js
function getCandidatesAspectRatio (line 34) | function getCandidatesAspectRatio(element){
function getLayoutAspectRatio (line 62) | function getLayoutAspectRatio(element){
function toTagSelector (line 66) | function toTagSelector(tag){
function getArtDirectConfig (line 70) | function getArtDirectConfig(img){
function toSourceObj (line 91) | function toSourceObj(source){
function sortAspectRatio (line 101) | function sortAspectRatio(source1, source2){
function getClosestSource (line 105) | function getClosestSource(sources, aspecRatio){
function setMedia (line 118) | function setMedia(source, media){
function selectSource (line 128) | function selectSource(imgCfg){
function addAutoArtDirection (line 156) | function addAutoArtDirection(e){
FILE: plugins/aspectratio/ls.aspectratio.js
function AspectRatio (line 48) | function AspectRatio(){
FILE: plugins/include/ls.include.js
function addUrl (line 151) | function addUrl(url){
function parseCandidate (line 161) | function parseCandidate(input){
function getIncludeData (line 196) | function getIncludeData(elem){
function matchesCondition (line 236) | function matchesCondition(elem, candidate){
function createPseudoCondition (line 253) | function createPseudoCondition(){
function findCandidate (line 281) | function findCandidate(elem){
function loadInclude (line 298) | function loadInclude(detail, includeCallback){
function loadRequire (line 318) | function loadRequire(urls, callback){
function loadSystemJs (line 332) | function loadSystemJs(url, callback){
function isStyleReady (line 340) | function isStyleReady(link){
function loadStyleScript (line 356) | function loadStyleScript(url, isScript, cb){
function loadStyles (line 423) | function loadStyles(urls, cb){
function transformInclude (line 433) | function transformInclude(module){
function unloadModule (line 440) | function unloadModule(module){
function loadModule (line 447) | function loadModule(module){
function loadCandidate (line 454) | function loadCandidate(elem, candidate){
function findLoadCandidate (line 566) | function findLoadCandidate(elem){
function beforeUnveil (line 577) | function beforeUnveil(e){
FILE: plugins/native-loading/ls.native-loading.js
function disableEvents (line 45) | function disableEvents() {
function runConfig (line 75) | function runConfig() {
FILE: plugins/object-fit/ls.object-fit.js
function getObject (line 35) | function getObject(element){
function generateStyleClass (line 51) | function generateStyleClass() {
function removePrevClone (line 63) | function removePrevClone(element) {
function initFix (line 73) | function initFix(element, config){
FILE: plugins/rias/ls.rias.js
function getElementOptions (line 88) | function getElementOptions(elem, src, options){
function replaceUrlProps (line 156) | function replaceUrlProps(url, options){
function setSrc (line 190) | function setSrc(src, opts, elem){
function createAttrObject (line 228) | function createAttrObject(elem, src){
function getSrc (line 237) | function getSrc(elem){
FILE: plugins/twitter/ls.twitter.js
function loadExecuteTwitter (line 37) | function loadExecuteTwitter(){
FILE: plugins/unload/ls.unload.js
function init (line 94) | function init(){
FILE: plugins/unveilhooks/ls.unveilhooks.js
function addStyleScript (line 160) | function addStyleScript(src, style, cb){
FILE: plugins/video-embed/ls.video-embed.js
function getJSON (line 38) | function getJSON(url, callback){
function embedVimeoImg (line 56) | function embedVimeoImg(id, elem){
function embedVimeoIframe (line 65) | function embedVimeoIframe(e){
function embedYoutubeImg (line 88) | function embedYoutubeImg(id, elem){
function embedYoutubeIframe (line 95) | function embedYoutubeIframe(e){
FILE: src/lazysizes-core.js
function l (line 5) | function l(window, document, Date) { // Pass in the window Date function...
FILE: tests/functional-tests-plugins.js
function _optimumxReinit (line 1) | function _optimumxReinit(addClass){
FILE: types/global.d.ts
type LazyUnveilReadEvent (line 5) | interface LazyUnveilReadEvent extends CustomEvent {
type LazyBeforeUnveilEvent (line 14) | interface LazyBeforeUnveilEvent extends CustomEvent {
type LazyBeforeSizesEvent (line 24) | interface LazyBeforeSizesEvent extends CustomEvent {
type Window (line 35) | interface Window {
type WindowEventMap (line 39) | interface WindowEventMap {
type DocumentEventMap (line 45) | interface DocumentEventMap {
type ElementEventMap (line 51) | interface ElementEventMap {
FILE: types/lazysizes-config.d.ts
type LazySizesConfig (line 1) | interface LazySizesConfig {
type LazySizesConfigPartial (line 30) | type LazySizesConfigPartial = Partial<LazySizesConfig>;
Condensed preview — 80 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (662K chars).
[
{
"path": "BingSiteAuth.xml",
"chars": 85,
"preview": "<?xml version=\"1.0\"?>\n<users>\n\t<user>D45AA4276907D8A86808F0D7C84BC7BC</user>\n</users>"
},
{
"path": "CHANGELOG.md",
"chars": 7374,
"preview": "# Changelog\n\n### 5.3.1\n- Added basic Typescript support\n\n### 5.3.0\n\n- BGSet: Support adding multiple images/backgrounds "
},
{
"path": "Gruntfile.js",
"chars": 2745,
"preview": "/*global module:true*/\n(function () {\n\t\"use strict\";\n\n\tvar pkg;\n\n\tmodule.exports = function (grunt) {\n\n\t\t// Project conf"
},
{
"path": "LICENSE",
"chars": 1084,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2015 Alexander Farkas\n\nPermission is hereby granted, free of charge, to any person "
},
{
"path": "README.md",
"chars": 35079,
"preview": "# lazysizes\n\n**lazysizes** is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including re"
},
{
"path": "animate.html",
"chars": 24331,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n\t<meta charset=\"UTF-8\" />\n\t<meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "assets/css/bootstrap-theme.css",
"chars": 18437,
"preview": "/*!\n * Bootstrap v3.3.0 (http://getbootstrap.com)\n * Copyright 2011-2014 Twitter, Inc.\n * Licensed under MIT (https://gi"
},
{
"path": "assets/css/bootstrap.css",
"chars": 74282,
"preview": "/*!\n * Bootstrap v3.3.0 (http://getbootstrap.com)\n * Copyright 2011-2014 Twitter, Inc.\n * Licensed under MIT (https://gi"
},
{
"path": "assets/css/carousel.css",
"chars": 4433,
"preview": "\n.carousel-inner > .item > img,\n.carousel-inner > .item > a > img {\n\tdisplay: block;\n\twidth: 100% \\9;\n\tmax-width: 100%;\n"
},
{
"path": "assets/css/tidy.css",
"chars": 12540,
"preview": "/*!\n * Bootstrap v3.3.0 (http://getbootstrap.com)\n * Copyright 2011-2014 Twitter, Inc.\n * Licensed under MIT (https://gi"
},
{
"path": "assets/js/bootstrap.js",
"chars": 8819,
"preview": "/*!\n * Bootstrap v3.2.0 (http://getbootstrap.com)\n * Copyright 2011-2014 Twitter, Inc.\n * Licensed under MIT (https://gi"
},
{
"path": "bower.json",
"chars": 799,
"preview": "{\n\t\"name\": \"lazysizes\",\n\t\"repo\": \"afarkas/lazysizes\",\n\t\"main\": \"lazysizes.js\",\n\t\"scripts\": [\n\t\t\"lazysizes.js\",\n\t\t\"lazysi"
},
{
"path": "component.json",
"chars": 407,
"preview": "{\n\t\"name\": \"lazysizes\",\n\t\"version\": \"1.4.0\",\n\t\"repo\": \"afarkas/lazysizes\",\n\t\"main\": \"lazysizes.min.js\",\n\t\"scripts\": [\"la"
},
{
"path": "index.html",
"chars": 32958,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\" />\n\t<meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "lazysizes-umd.js",
"chars": 19996,
"preview": "(function(window, factory) {\n\tvar lazySizes = factory(window, window.document, Date);\n\tif(typeof module == 'object' && m"
},
{
"path": "lazysizes.d.ts",
"chars": 2070,
"preview": "import './types/global';\n\nexport = lazySizes;\ndeclare var lazySizes: {\n init: () => void;\n /**\n * @type { Lazy"
},
{
"path": "lazysizes.js",
"chars": 19949,
"preview": "(function(window, factory) {\n\tvar lazySizes = factory(window, window.document, Date);\n\twindow.lazySizes = lazySizes;\n\tif"
},
{
"path": "no-src.html",
"chars": 27546,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n\t<meta charset=\"UTF-8\" />\n\t<meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "optimumx/child.html",
"chars": 31455,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n\t<meta charset=\"UTF-8\">\n\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />"
},
{
"path": "optimumx/index.html",
"chars": 3756,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n\t<meta charset=\"UTF-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, init"
},
{
"path": "optimumx/js/parent.js",
"chars": 1319,
"preview": "(function(window, document){\n\n\tif ( window.HTMLPictureElement ) {\n\t\t$('html').addClass('resp-supported');\n\t}\n\n\tif ( (win"
},
{
"path": "package.json",
"chars": 1604,
"preview": "{\n \"name\": \"lazysizes\",\n \"version\": \"5.3.2\",\n \"filename\": \"lazysizes.min.js\",\n \"license\": \"MIT\",\n \"author\": \"Alexan"
},
{
"path": "plugins/README.md",
"chars": 291,
"preview": "# lazysizes plugins/extensions/snippets\n\n**lazysizes** works out of the box with standard and responsive images (``src``"
},
{
"path": "plugins/artdirect/README.md",
"chars": 3585,
"preview": "# lazysizes artdirect extension\n\nThe artdirect extension allows you to fully control art direction through your CSS. Thi"
},
{
"path": "plugins/artdirect/ls.artdirect.js",
"chars": 4404,
"preview": "(function(window, factory) {\n\tif (!window) {return;}\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twin"
},
{
"path": "plugins/aspectratio/README.md",
"chars": 2857,
"preview": "# lazysizes aspectratio extension\n\nThis plugin helps to pre-occupy the space needed for an image by calculating the heig"
},
{
"path": "plugins/aspectratio/ls.aspectratio.js",
"chars": 5190,
"preview": "(function(window, factory) {\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twindow.removeEventListener("
},
{
"path": "plugins/attrchange/README.md",
"chars": 781,
"preview": "# lazysizes attribute change / re-initialization extension\n\nIn case you are changing the ``data-src``/``data-srcset`` at"
},
{
"path": "plugins/attrchange/ls.attrchange.js",
"chars": 3464,
"preview": "(function(window, factory) {\n\tif(!window) {return;}\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twind"
},
{
"path": "plugins/bgset/README.md",
"chars": 2989,
"preview": "# lazysizes bgset extension - responsive background images\n\nThis simple and small plugin allows you to define multiple b"
},
{
"path": "plugins/bgset/ls.bgset.js",
"chars": 5276,
"preview": "(function(window, factory) {\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twindow.removeEventListener("
},
{
"path": "plugins/blur-up/README.md",
"chars": 3335,
"preview": "# The lazysizes Blur Up/effect plugin\n\nThe lazysizes Blur Up plugin ([demo](https://jsfiddle.net/trixta/v0oq0412/embedde"
},
{
"path": "plugins/blur-up/ls.blur-up.js",
"chars": 5764,
"preview": "(function(window, factory) {\n\tif(!window) {return;}\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twind"
},
{
"path": "plugins/custommedia/README.md",
"chars": 1955,
"preview": "# lazysizes custommedia extension\n\nlazySizes custommedia extension allows you to automatically sync and manage your brea"
},
{
"path": "plugins/custommedia/ls.custommedia.js",
"chars": 2280,
"preview": "/*\n html:after {\n \tdisplay: none;\n \tcontent: '--small: (max-width: 500px) | --medium: (max-width: 1100px) | --large: (mi"
},
{
"path": "plugins/fix-edge-h-descriptor/README.md",
"chars": 492,
"preview": "# MS Edge h descriptor fix\n\nThis plugin/polyfill fixes the missing `h` descriptor parsing in MS Edge by removing the `h`"
},
{
"path": "plugins/fix-edge-h-descriptor/ls.fix-edge-h-descriptor.js",
"chars": 2247,
"preview": "(function(window, factory) {\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twindow.removeEventListener("
},
{
"path": "plugins/fix-ios-sizes/fix-ios-sizes.js",
"chars": 2422,
"preview": "/**\n * Some versions of iOS (8.1-) do load the first candidate of a srcset candidate list, if width descriptors with the"
},
{
"path": "plugins/include/README.md",
"chars": 13400,
"preview": "# lazysizes include plugin\n\n**lazysizes** include extension/plugin asynchronously include non crucial content, styles or"
},
{
"path": "plugins/include/ls.include.js",
"chars": 13849,
"preview": "/*\n This plugin extends lazySizes to lazyLoad and/or conditionally load content\n */\n\n(function(window, factory) {\n\tvar g"
},
{
"path": "plugins/native-loading/README.md",
"chars": 1784,
"preview": "# lazysizes native loading extension\n\nThis extension automatically transforms `img.lazyload`/`iframe.lazyload` elements "
},
{
"path": "plugins/native-loading/ls.native-loading.js",
"chars": 2943,
"preview": "(function(window, factory) {\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twindow.removeEventListener("
},
{
"path": "plugins/noscript/README.md",
"chars": 3072,
"preview": "# lazysizes noscript/progressive enhancement extension\n\nThe noscript extension is the true ultimate progressive enhancem"
},
{
"path": "plugins/noscript/ls.noscript.js",
"chars": 2489,
"preview": "(function(window, factory) {\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twindow.removeEventListener("
},
{
"path": "plugins/object-fit/README.md",
"chars": 2519,
"preview": "# lazySizes object fit extension\n\nThis extension polyfills `object-fit`: `cover` and `contain` properties as also the `o"
},
{
"path": "plugins/object-fit/ls.object-fit.js",
"chars": 5926,
"preview": "(function(window, factory) {\n\tif(!window) {return;}\n\tvar globalInstall = function(initialEvent){\n\t\tfactory(window.lazySi"
},
{
"path": "plugins/optimumx/README.md",
"chars": 8982,
"preview": "# lazysizes optimumx plugin\n\n**lazysizes** optimumx plugin helps you to limit/constrain the maximum resolution in case t"
},
{
"path": "plugins/optimumx/ls.optimumx.js",
"chars": 6414,
"preview": "(function(window, factory) {\n\tif(!window) {return;}\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twind"
},
{
"path": "plugins/parent-fit/README.md",
"chars": 4057,
"preview": "# lazySizes parent fit extension\n\nThe parent fit plugin extends the ``data-sizes=\"auto\"`` feature to also calculate the "
},
{
"path": "plugins/parent-fit/ls.parent-fit.js",
"chars": 4692,
"preview": "(function(window, factory) {\n\tif(!window) {return;}\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twind"
},
{
"path": "plugins/print/README.md",
"chars": 194,
"preview": "# lazysizes print extension\n\nThis simple print plugin for lazysizes will automatically unveil all element as soon as a p"
},
{
"path": "plugins/print/ls.print.js",
"chars": 1538,
"preview": "/*\nThis lazySizes extension adds better support for print.\nIn case the user starts to print lazysizes will load all imag"
},
{
"path": "plugins/progressive/README.md",
"chars": 1798,
"preview": "# lazysizes progressive extension\n\nThis plugin optimizes perceived performance by adding better support for rendering pr"
},
{
"path": "plugins/progressive/ls.progressive.js",
"chars": 1455,
"preview": "/*\nThis lazysizes plugin optimizes perceived performance by adding better support for rendering progressive JPGs/PNGs in"
},
{
"path": "plugins/respimg/README.md",
"chars": 4828,
"preview": "# lazysizes respimg polyfill extension\n\nWhile [picturefill](https://github.com/scottjehl/picturefill) are full functiona"
},
{
"path": "plugins/respimg/ls.respimg.js",
"chars": 7911,
"preview": "(function(window, factory) {\n\tif(!window) {return;}\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twind"
},
{
"path": "plugins/rias/README.md",
"chars": 12385,
"preview": "# lazySizes RIaS extension (Responsive image as a service / Responsive image on demand)\n\nThe RiaS plugin enables lazySiz"
},
{
"path": "plugins/rias/ls.rias.js",
"chars": 10619,
"preview": "(function(window, factory) {\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twindow.removeEventListener("
},
{
"path": "plugins/static-gecko-picture/ls.static-gecko-picture.js",
"chars": 2336,
"preview": "/**\n * FF's first picture implementation is static and does not react to viewport changes, this tiny script fixes this.\n"
},
{
"path": "plugins/twitter/ls.twitter.js",
"chars": 1924,
"preview": "(function(window, factory) {\n\tif(!window) {return;}\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twind"
},
{
"path": "plugins/unload/README.md",
"chars": 2147,
"preview": "# lazysizes unload\n\nUnloads ``img.lazyload`` (including ``picture``) elements if they consume a lot of memory and they a"
},
{
"path": "plugins/unload/ls.unload.js",
"chars": 4470,
"preview": "(function(window, factory) {\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twindow.removeEventListener("
},
{
"path": "plugins/unveilhooks/README.md",
"chars": 1471,
"preview": "# lazysizes unveilhooks extension\n\nThe unveilhooks plugin extends lazySizes to also unveil / lazyload scripts/widgets, b"
},
{
"path": "plugins/unveilhooks/ls.unveilhooks.js",
"chars": 4355,
"preview": "/*\nThis plugin extends lazySizes to lazyLoad:\nbackground images, videos/posters and scripts\n\nBackground-Image:\nFor backg"
},
{
"path": "plugins/video-embed/README.md",
"chars": 272,
"preview": "TBD\n\n```html\n<div class=\"ratio-16-9 lazyload\" data-youtube=\"M7lc1UVf-VE\" data-ytparams=\"\">\n\t<button class=\"play-btn\">pla"
},
{
"path": "plugins/video-embed/ls.video-embed.js",
"chars": 3777,
"preview": "(function(window, factory) {\n\tif(!window) {return;}\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twind"
},
{
"path": "rias/index.html",
"chars": 7923,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n\t<meta charset=\"UTF-8\">\n\t<title>lazysizes - the restful responsive image service"
},
{
"path": "src/common.wrapper",
"chars": 262,
"preview": "(function(window, factory) {\n\tvar lazySizes = factory(window, window.document, Date);\n\twindow.lazySizes = lazySizes;\n\tif"
},
{
"path": "src/lazysizes-core.js",
"chars": 19693,
"preview": "\n/**\n * @typedef { import(\"./types/global\").LazySizesConfigPartial } LazySizesConfigPartial\n */\nfunction l(window, docum"
},
{
"path": "src/lazysizes-intersection.js",
"chars": 12640,
"preview": "(function(window, factory) {\n\tif(typeof module == 'object' && module.exports){\n\t\tmodule.exports = lazySizes;\n\t} else {\n\t"
},
{
"path": "src/umd.wrapper",
"chars": 309,
"preview": "(function(window, factory) {\n\tvar lazySizes = factory(window, window.document, Date);\n\tif(typeof module == 'object' && m"
},
{
"path": "tests/functional-tests-plugins.js",
"chars": 19772,
"preview": "function _optimumxReinit(addClass){\n\treturn function (assert){\n\n\t\tif(!window.devicePixelRatio){\n\t\t\tassert.ok(true);\n\t\t\tr"
},
{
"path": "tests/functional-tests.js",
"chars": 16016,
"preview": "window.lazyTests = {\n\tsimpleView: ['lazyloads simple image in view', function(assert){\n\t\tvar done = assert.async();\n\n\t\tt"
},
{
"path": "tests/index.html",
"chars": 1054,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n <meta charset=\"UTF-8\">\n <title></title>\n <link rel=\"stylesheet\" href=\""
},
{
"path": "tests/test-files/content-file.html",
"chars": 2462,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n <meta charset=\"UTF-8\">\n <title></title>\n\n <style>\n * {\n "
},
{
"path": "tests/test-files/matchMedia.js",
"chars": 1700,
"preview": "/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nic"
},
{
"path": "tests/test-helper.js",
"chars": 1591,
"preview": "(function(){\n\t'use strict';\n\tvar source = document.createElement('source');\n\tvar requestAnimationFrame = window.requestA"
},
{
"path": "tsconfig.json",
"chars": 343,
"preview": "{\n\t// Change this to match your project\n\t\"include\": [\"lazysizes.js\"],\n\t\"compilerOptions\": {\n\t\t// Tells TypeScript to rea"
},
{
"path": "types/global.d.ts",
"chars": 1245,
"preview": "import { LazySizesConfigPartial, LazySizesConfig } from './lazysizes-config';\n\nexport { LazySizesConfigPartial, LazySize"
},
{
"path": "types/lazysizes-config.d.ts",
"chars": 653,
"preview": "export interface LazySizesConfig {\n\tlazyClass: string;\n\tloadedClass: string;\n\tloadingClass: string;\n\tpreloadClass: strin"
}
]
About this extraction
This page contains the full source code of the aFarkas/lazysizes GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 80 files (581.7 KB), approximately 177.3k tokens, and a symbol index with 62 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.