Skip to content
Browse files

Docs and random fixes

  • Loading branch information...
1 parent 1411a04 commit d91b527ef8af28d743b0a69dae0f5b37e5e9e08f @screeley screeley committed
View
79 Gruntfile.js
@@ -0,0 +1,79 @@
+/*global module:false*/
+module.exports = function(grunt) {
+
+ grunt.loadNpmTasks('grunt-contrib-connect');
+ grunt.loadNpmTasks('grunt-contrib-concat');
+ grunt.loadNpmTasks('grunt-contrib-jshint');
+ grunt.loadNpmTasks('grunt-contrib-qunit');
+ grunt.loadNpmTasks('grunt-contrib-uglify');
+ grunt.loadNpmTasks('grunt-contrib-watch');
+
+ // Project configuration.
+ grunt.initConfig({
+ pkg: grunt.file.readJSON('jquery-preview.jquery.json'),
+ meta: {
+ banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
+ '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
+ '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' +
+ '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
+ ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */'
+ },
+ qunit: {
+ all: ['test/**/*.html']
+ },
+ concat: {
+ dist: {
+ src: [
+ '<banner:meta.banner>',
+ 'src/intro.js',
+ 'lib/sprintf-0.7-beta1.js',
+ 'src/hidden.js',
+ 'src/thumb.js',
+ 'src/preview.js',
+ 'src/outro.js'],
+ dest: 'dist/<%= pkg.name %>.js'
+ }
+ },
+ uglify: {
+ preview: {
+ mangle: true,
+ files: {
+ 'dist/<%= pkg.name %>.min.js': ['dist/<%= pkg.name %>.js']
+ }
+ }
+ },
+ connect: {
+ server: {
+ options: {
+ port: 8080,
+ base: '.'
+ }
+ }
+ },
+ watch: {
+ files: 'src/**/*.js',
+ tasks: 'concat'
+ },
+ jshint: {
+ options: {
+ curly: true,
+ eqeqeq: true,
+ immed: true,
+ latedef: true,
+ newcap: true,
+ noarg: true,
+ sub: true,
+ undef: true,
+ boss: true,
+ eqnull: true,
+ browser: true
+ },
+ globals: {'jQuery' : true, 'embedly':true, 'utils': true},
+ all: ['Gruntfile.js', 'src/hidden.js', 'src/thumb.js', 'src/preview.js', 'test/**/*.js']
+ }
+ });
+
+ // Default task.
+ grunt.registerTask('default', ["jshint", "concat", "uglify"]);
+ grunt.registerTask("run", ["connect", "watch"]);
+};
View
476 README.rest
@@ -16,8 +16,6 @@ able to build.
* `Link <http://embedly.github.com/jquery-preview/demo/link.html>`_
* `Status <http://embedly.github.com/jquery-preview/demo/status.html>`_
-* `Large Embeds <http://embedly.github.com/jquery-preview/demo/large.html>`_
-* `Rich Embeds <http://embedly.github.com/jquery-preview/demo/rich.html>`_
* `Multipe Inputs <http://embedly.github.com/jquery-preview/demo/multi.html>`_
Basic Setup
@@ -53,12 +51,22 @@ Next set up a simple form that allows a user to input link::
<form action="/update" method="POST">
<input id="url" type="text" name="url"/>
+
+ <!-- Placeholder that tells Preview where to put the selector-->
+ <div class="selector-wrapper"></div>
</form>
You then need to tell preview what field to listen to::
<script>
+ // Set up preview.
$('#url').preview({key:'your_embedly_key'})
+
+ // On submit add hidden inputs to the form.
+ $('form').on('submit', function(){
+ $(this).addInputs($('#url').data('preview'));
+ return true;
+ });
</script>
And you are done setting up the front end solution for jQuery Preview. The
@@ -70,65 +78,43 @@ up for a Starter plan at `embed.ly/pricing <http://embed.ly/pricing>`_.
How it Works
------------
-The plugin works by listening to the field on ``paste``, ``keyup``, ``attach``
-and ``blur``. If a URL is entered a call is made to Embedly's `Preview
-<http://embed.ly/docs/endpoints/1/preview>`_ endpoint and the result is then
-passed to the Selector object and all the elements are added to the form as
-hidden inputs. The Selector is then rendered using a Mustache template. The
-user can use the selector to pick a thumbnail associated with the URL.
-
-When the form is submitted each attribute it passed back to the action URL.
-The server then saves the information and either echos or augments the object
-and passes it back to the fronted. The Display object then renders the obj into
-the feed.
-
-Each object is infinitely customizable, but the flow is the same. We will go
-over each object and how to customize them.
-
-Objects
--------
-There are 3 basic objects that you should get familiar with in order to
-customize the selector.
+The plugin works by listening to the field on ``paste``, ``keyup``, ``preview``
+and ``blur``. If a URL is entered a call is made to Embedly's `Extract
+<http://embed.ly/docs/extract/api/endpoints/1/extract>`_ endpoint and the
+result is then passed to the ``render`` function. ``render`` uses ``sprintf``
+to create a selector, so the user can pick a thumbnail associated with the
+URL.
+
+jQuery Preview just saves all the data and changes associated with the URL on
+the input using jQuery's data. It's up to the developer to choose how they want
+to deal with that data on submit. jQuery Preview comes with a helper function
+``addInputs`` so all the data can be added to the form. This is the code to
+enable it::
+
+ // On submit add hidden inputs to the form.
+ $('form').on('submit', function(){
+ $(this).addInputs($('#url').data('preview'));
+ return true;
+ });
+
+The developer can then choose how they wish to display the preview in the feed.
+We will show some simple examples for handling this in the documentation.
Preview
-^^^^^^^
-Preview holds all the logic for calls to Embedly. You shouldn't have to do a
-ton of customizations here.
-
-Functions
-"""""""""
-
-``submit``
- Called when the form is submitted and all the attributes are passed in as
- an object. If you want to do something other than a POST to the action you
- can overwrite the method like so::
-
- var preview = {
- // Instead of posting to the server, send the object to display for
- // rendering to the feed.
- submit : function(e, data){
- e.preventDefault();
- this.display.create(data);
- }
- }
- $('#url').preview({preview:preview});
+-------
+Preview holds all the logic for calls to Embedly and rendering the selector.
+Options
+^^^^^^^
``bind``
- Called when the preview is set up to bind all the listeners to the file and
- the form. If you want to listen on custom events you can call it like so::
-
- var preview = {
- bind : function(){
- // Instead of listening to the field, wait for the user to click
- // 'Attach Link'.
- $('a.attach').bind('click', this.fetch);
-
- // Still bind the form to ``_submit`` that cleans up the data
- // before calling ``submit``
- $(this.form).bind('submit', this._submit);
- }
- }
- $('#url').preview({preview:preview});
+ By default preview will bind to ``keyup``, ``blur`` and ``paste`` if you
+ wish to define your own bindings you can set this attribute to false::
+
+ // Don't bind the listeners
+ $('#url').preview({bind:false});
+
+ // When a use hits Attach, trigger a preview of the link.
+ $('a.attach').on('click', function(){$('#url').trigger('preview')});
``error``
Called when the url that the user inputed throws an error somewhere along
@@ -136,288 +122,140 @@ Functions
from them. The default behavior is to not notify the user. To notify them
you can use::
- var preview = {
- error : function(){
+ $('#url').preview({
+ error: function(obj){
alert('The URL you entered was not processed.');
- }
- }
- $('#url').preview({preview:preview});
+ }});
+
-``callback``
+``success``
Called after a URL has been successfully rendered by the selector. Useful
if you want to change state after the URL has been successfully processed.
- For example if you want to change a button from 'Share' to 'Attach' you can
+ For example if you want to change a button from 'Share' to 'Submit' you can
do it like so::
- var preview = {
- callback : function(){
- $('button').text('Attach');
+ $('#url').preview({
+ success : function(obj){
+ $('button').text('Submit');
}
- }
- $('#url').preview({preview:preview});
+ });
-Using Attach
-""""""""""""
-If you missed it jQuery Preview listens to a special event ``attach`` on the
-field. If you wish to have a two step process of attaching the link to the
-status and then sharing the link you can set something up like this::
+``render``
+ If you would like to create your own selector, overwrite ``render`` with
+ your own function. We will go in more detail, in the writing your own
+ selector function, but here is the simplest example I could think of.
- <form id="preview_form" class="form-vertical" method="post" action=".">
- <input type="text" name="url" id="id_url" value="http://vimeo.com/18150336" />
- <button id="id_attach">Attach</button>
- </form>
- <script>
- $('#id_attach').bind('click', function(e){
- e.preventDefault();
- $('#id_url').trigger('attach');
-
- $('#id_attach').replaceWith($('<input/>').attr({
- 'id' : 'id_submit',
- 'value' : 'Share',
- 'type' : 'submit'
- }));
- });
- </script>
+ $('#url').preview({
+ render: function(obj, options){
+ // Put the title after the input.
+ $(this).after(obj.title);
+ }});
-This triggers the ``attach`` event on the field and that tells Preview to go
-fetch the url and show it in the Selector.
-
-Selector
-^^^^^^^^
-Builds the selector that allows users to pick out a thumbnail.
-
-Attributes
-""""""""""
-
-``type``
- There are 3 different built-in types that a developer can choose from
-
- * `small <http://embedly.github.com/jquery-preview/demo/link.html>`_
- * `large <http://embedly.github.com/jquery-preview/demo/large.html>`_
- * `rich <http://embedly.github.com/jquery-preview/demo/rich.html>`_
-
- Each allows for a different type of feel. We suggest using one of them to
- get started and customizing from there.
-
-``template``
- If you would like to use your own Mustache template to render the selector
- you can add it here. The default looks like::
-
- <div id="selector" class="small">
- <div class="thumbnail">
- <div class="controls">
- <a class="left" href="#">&#9664;</a>
- <a class="right" href="#">&#9654;</a>
- <a class="nothumb" href="#">&#10005;</a>
- </div>
- <div class="items">
- <ul class="images">
- {{#images}}
- <li><img src="{{url}}"/></li>
- {{/images}}
- </ul>
- </div>
- </div>
- <div class="attributes">
- <a class="title" href="#">{{title}}</a>
- <p><a class="description" href="#">{{description}}</a></p>
- <span class="meta">
- <img class="favicon" src="{{favicon_url}}">
- <a class="provider" href="{{provider_url}}">{{provider_display}}</a>
- </span>
- </div>
- <div class="action"><a href="#" class="close">&#10005;</a></div>
- </div>
-
- By default Preview passes the following attributes to the template
-
- * ``type``
- * ``original_url``
- * ``url``
- * ``title``
- * ``description``
- * ``favicon_url``
- * ``provider_url``
- * ``provider_display``
- * ``safe``
- * ``html``
- * ``thumbnail_url``
- * ``object_type``
- * ``image_url``
-
- All these responses are defined `here
- <http://embed.ly/docs/endpoints/1/preview#response>`_ except for the
- following:
-
- ``object_type``
- The oEmbed of the preview response. Will be either ``video``,
- ``rich``, ``photo`` or ``link``. We use this to decide weather to
- embed the ``html`` attribute.
-
- ``image_url``
- If the ``type`` is ``image`` or the ``object_type`` is ``photo`` an
- ``image_url`` will be the full sized image URL.
-
- ``thumbnail_url``
- The URL that the user selected as the thumbnail for the embed.
-
- ``template`` can also be a dictionary if you want to use different
- templates for different ``object_type``s. For instance::
-
- template : {
- 'video' : 'Video Template',
- 'rich' : 'Rich Template',
- 'photo' : 'Photo Template',
- 'link' : 'Link Template'
- }
-Functions
-"""""""""
+Events
+^^^^^^
+``preview``
+ Manually trigger the input to fetch the URL. This is generally only needed
+ if ``bind`` is set to false::
-``title``
- Allows users to click on the title in the selector and edit the text. It is
- set up like this in the ``bind`` function::
+ $('a.attach').on('click', function(){$('#url').trigger('preview')});
- $('.selector .title').bind('click', this.title);
+``loading``
+ Triggered when the request is being made to the API endpoint::
-``description``
- Allows users to click on the description in the selector and edit the text.
- It is set up like this in the ``bind`` function::
+ $('#url').on('loading', function(){$('.loading').show()});
- $('.selector .description').bind('click', this.description);
+``loaded``
+ Triggered when a response has been returned from the API endpoint::
+ $('#url').on('loaded', function(){$('.loading').hide()});
-``scroll``
- Simple logic that scrolls the image left and right in selector. It takes a
- direction (``left`` or ``right``) and an event. We set it up like so::
+``close``
+ Triggered when the selector should be closed. If you are implementing a
+ custom selector, you must listen for this event.
- $('.selector .left').bind('click', _.bind(this.scroll, {}, 'left'));
- $('.selector .right').bind('click', _.bind(this.scroll, {}, 'right'));
+ var render = function(data, options){
+ // Insert selector
+ $(this).on('close', function(){
+ //Remove selector.
+ });
+ }
-``nothumb``
- Logic that tells the form NOT to use a thumbnail when rendering a preview.
- ``bind`` calls it like so::
+Custom Selector
+---------------
+It's actually recommended that you build a custom selector. While the default
+one is pretty good, you are going to want to customize it more than just the
+default styles. Here's how you can create your own.
- $('.selector .nothumb').bind('click', this.nothumb);
+Render
+^^^^^^
+To create our own selector you just need to pass in a function into the
+``render`` option when calling preview::
-``clear``
- Clears the selector, hides it and all the hidden inputs.
+ var render = function(data, options){
+ // custom render
+ };
+ $('#url').preview({render:render});
-``update``
- Update can be set to an input field to also update the value in the
- selector. This is useful if you want to have a different input field for
- title and selector. We use this from the Preview object like so::
+The render function should accept a ``data`` argument that is the response from
+the ``extract`` endpoint. ``options`` is also passed in if you would like to
+set custom options in preview. ``this`` is the HTMLElement of the input. This
+will let you listen for events or trigger events on the input.
- $('#id_title').bind('keyup', function(e){
- $.preview.selector.update(e);
- });
+The simplest version of a custom selector looks like so::
- The element must have a ``name`` attribute of the ``title`` or
- ``description``.
+ var render = function(data, options){
+ // Add the title after the input.
+ $(this).after('<span>'+data.title+'</span>');
-``bind``
- Sets the listeners for the above functions. Don't overwrite this function
- unless you know what you are doing.
+ // remove the selector
+ $(this).on('close', function(){
+ $(this).siblings('span').remove();
+ });
+ };
-``render``
- Uses Mustache to render the template chosen by the developer. Don't
- overwrite this function unless you know what you are doing.
Display
-^^^^^^^
-Create's a Feed item for a given object.
-
-Attributes
-""""""""""
-
-``type``
- There are 3 different built-in types that a developer can choose from
-
- * `small <http://embedly.github.com/jquery-preview/demo/link.html>`_
- * `status <http://embedly.github.com/jquery-preview/demo/status.html>`_
- * `rich <http://embedly.github.com/jquery-preview/demo/rich.html>`_
-
- Each allows for a different type of feel. We suggest using one of them to
- get started and customizing from there. The ``status`` type is the same as
- ``small``, but takes an additional field ``status`` and displays that in
- the item as well.
-
-``template``
- The Mustache template that you would like to use to render the obj. The
- default one looks like this::
-
- <div class="item">
- <div class="thumbnail">
- <a href="{{original_url}}">
- <img title="{{title}}" src="{{thumbnail_url}}"/>
- <span class="overlay"></span>
- </a>
- </div>
- <div class="attributes">
- <a class="title" href="{{original_url}}">{{title}}</a>
- <p class="description">{{description}}</p>
- <span class="meta">
- <img class="favicon" src="{{favicon_url}}"/>
- <a class="provider" href="{{provider_url}}">{{provider_display}}</a>
- </span>
- </div>
- </div>
-
- By default Preview passes the following attributes to the template
-
- * ``type``
- * ``original_url``
- * ``url``
- * ``title``
- * ``description``
- * ``favicon_url``
- * ``provider_url``
- * ``provider_display``
- * ``safe``
- * ``html``
- * ``thumbnail_url``
- * ``object_type``
- * ``image_url``
-
- All these responses are defined `here
- <http://embed.ly/docs/endpoints/1/preview#response>`_ except for the
- following:
-
- ``object_type``
- The oEmbed of the preview response. Will be either ``video``,
- ``rich``, ``photo`` or ``link``. We use this to decide weather to
- embed the ``html`` attribute.
-
- ``image_url``
- If the ``type`` is ``image`` or the ``object_type`` is ``photo`` an
- ``image_url`` will be the full sized image URL.
-
- ``thumbnail_url``
- The URL that the user selected as the thumbnail for the embed.
-
- ``template`` can also be a dictionary if you want to use different
- templates for different ``object_type``s. For instance::
-
- template : {
- 'video' : 'Video Template',
- 'rich' : 'Rich Template',
- 'photo' : 'Photo Template',
- 'link' : 'Link Template'
- }
-
-
-``selector``
- Tells create where to prepend the Feed item html to. The default value is
- ``#feed``.
-
-Functions
-"""""""""
-
-``create``
- Uses Mustache to render the template chosen by the developer. Don't
- overwrite this function unless you know what you are doing.
+-------
+jQuery Preview has no concept of displaying the item in a feed. This should be
+handled by the developer. This is a simple example from one of the demos::
+
+ $('#preview_form').on('submit', function(){
+ // Preview data.
+ var preview = $('#id_url').data('preview');
+
+ // Close the selector
+ $('#id_url').trigger('close');
+ $('#id_url').val('');
+
+ // Create a post using mustache, i.e. the nice way.
+ var template = ['<div class="row">',
+ '<div class="large-3 columns">',
+ '<img class="thumb" src="{{thumbnail_url}}"></img>',
+ '</div>',
+ '<div class="large-9 column">',
+ '<a href="{{original_url}}">{{title}}</a>',
+ '<p>{{description}}</p>',
+ '</div>',
+ '</div>'].join('');
+
+ html = $(Mustache.to_html(template, preview));
+ html.data('preview', preview);
+ html.on('click', function(){
+ var data = $(this).data('preview');
+ // Insert the video or rich object.
+ if (data.media.type === 'video' || data.media.type === 'rich'){
+ $(this).html(data.media.html);
+ return false;
+ }
+ return true;
+ });
+ // Display the item in the feed.
+ $('#feed').append(html);
+ return false;
+ });
Server Side
@@ -464,22 +302,16 @@ CDN
To get you going even faster, Embedly hosts all the files you need on
scripts.embed.ly. The latest version is available here::
- http://scripts.embed.ly/p/0.2/jquery.preview.min.js
- http://scripts.embed.ly/p/0.2/jquery.preview.full.min.js
- http://scripts.embed.ly/p/0.2/css/preview.css
-
-The most current version of jQuery Preview will be available here::
-
- http://scripts.embed.ly/p/jquery.preview.min.js
- http://scripts.embed.ly/p/jquery.preview.full.min.js
- http://scripts.embed.ly/p/css/preview.css
+ http://scripts.embed.ly/p/0.3/jquery.preview.min.js
+ http://scripts.embed.ly/p/0.3/jquery.preview.full.min.js
+ http://scripts.embed.ly/p/0.3/css/preview.css
Development
-----------
The code is broken down into modules in the ``src`` folder and built by
-``watch.py``. If you want to modify anything in ``preview.jquery.js`` please
-find the code in the module and run ``python watch.py`` to build
+``grunt``. If you want to modify anything in ``preview.jquery.js`` please
+find the code in the module and run ``grunt run`` to build
``preview.jquery.js``. ``preview.css`` is a `sass <http://sass-lang.com/>`_
generated file. Please modify ``preview.scss`` by running ``sass --watch
preview.scss:preview.css``
@@ -488,6 +320,10 @@ preview.scss:preview.css``
Changelog
---------
+0.3
+^^^
+* Full rewrite to simplify adding jQuery to a site.
+
0.2
^^^
* Added the $.preview so it can be used before the a form is initialized.
View
22 css/preview.scss
@@ -217,26 +217,4 @@
}
}
-}
-
-
-.clearfix:after {
- content: ".";
- display: block;
- clear: both;
- visibility: hidden;
- line-height: 0;
- height: 0;
-}
-
-.clearfix {
- display: inline-block;
-}
-
-html[xmlns] .clearfix {
- display: block;
-}
-
-* html .clearfix {
- height: 1%;
}
View
71 demo/common/css/demo.css
@@ -0,0 +1,71 @@
+body {
+ background:#fff url(../img/grid-18px-masked.png) repeat-x top left;
+}
+.button i {
+ color:#fff;
+}
+
+.actions {
+ text-align: right;
+ border-top: 1px solid #ddd;
+ padding-top: 15px;
+ margin-top: 15px;
+}
+
+.panel {
+ padding:3em;
+}
+
+.panel .selector {
+ margin: 10px 0;
+ background-color: white;
+ padding: 10px;
+ border: 1px solid #BBB;
+}
+.panel .selector p {
+ font-size: 14px;
+ line-height: 20px;
+}
+.panel h1{
+ font-size: 4em;
+}
+
+#feed {
+ margin:0 100px 0 120px;
+}
+
+#doc {
+ display: block;
+ font-size: 20px;
+ float: right;
+}
+
+#preview_form {
+ position: relative;
+ padding-top:40px;
+}
+
+.arrow {
+ width:200px;
+ position: absolute;
+ top: 0;
+ right: 46px;
+}
+.arrow p {
+ position: absolute;
+ top: 0;
+ display:block;
+ right:25px;
+ line-height: 20px;
+}
+.arrow img {
+ position: absolute;
+ display:block;
+ top: 0;
+ right:-10px;
+}
+.item .attributes {
+ padding: 0 0 0 120px;
+}
+.section { padding-top:60px; }
+fieldset .help-block { clear:both; display:block;}
View
33 demo/common/css/font-awesome.min.css
@@ -0,0 +1,33 @@
+/*!
+ * Font Awesome 3.0.2
+ * the iconic font designed for use with Twitter Bootstrap
+ * -------------------------------------------------------
+ * The full suite of pictographic icons, examples, and documentation
+ * can be found at: http://fortawesome.github.com/Font-Awesome/
+ *
+ * License
+ * -------------------------------------------------------
+ * - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
+ * - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
+ * http://opensource.org/licenses/mit-license.html
+ * - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
+ * - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
+ * "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
+
+ * Contact
+ * -------------------------------------------------------
+ * Email: dave@davegandy.com
+ * Twitter: http://twitter.com/fortaweso_me
+ * Work: Lead Product Designer @ http://kyruus.com
+ */
+
+@font-face{
+ font-family:'FontAwesome';
+ src:url('../font/fontawesome-webfont.eot?v=3.0.1');
+ src:url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
+ url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
+ url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
+ font-weight:normal;
+ font-style:normal }
+
+[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;margin-top:0}.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]{background-image:none}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none}a [class^="icon-"],a [class*=" icon-"]{display:inline-block}.icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em}.btn [class^="icon-"],.nav [class^="icon-"],.btn [class*=" icon-"],.nav [class*=" icon-"]{display:inline}.btn [class^="icon-"].icon-large,.nav [class^="icon-"].icon-large,.btn [class*=" icon-"].icon-large,.nav [class*=" icon-"].icon-large{line-height:.9em}.btn [class^="icon-"].icon-spin,.nav [class^="icon-"].icon-spin,.btn [class*=" icon-"].icon-spin,.nav [class*=" icon-"].icon-spin{display:inline-block}.nav-tabs [class^="icon-"],.nav-pills [class^="icon-"],.nav-tabs [class*=" icon-"],.nav-pills [class*=" icon-"],.nav-tabs [class^="icon-"].icon-large,.nav-pills [class^="icon-"].icon-large,.nav-tabs [class*=" icon-"].icon-large,.nav-pills [class*=" icon-"].icon-large{line-height:.9em}li [class^="icon-"],.nav li [class^="icon-"],li [class*=" icon-"],.nav li [class*=" icon-"]{display:inline-block;width:1.25em;text-align:center}li [class^="icon-"].icon-large,.nav li [class^="icon-"].icon-large,li [class*=" icon-"].icon-large,.nav li [class*=" icon-"].icon-large{width:1.5625em}ul.icons{list-style-type:none;text-indent:-0.75em}ul.icons li [class^="icon-"],ul.icons li [class*=" icon-"]{width:.75em}.icon-muted{color:#eee}.icon-border{border:solid 1px #eee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.icon-2x{font-size:2em}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.icon-3x{font-size:3em}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.icon-4x{font-size:4em}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.pull-right{float:right}.pull-left{float:left}[class^="icon-"].pull-left,[class*=" icon-"].pull-left{margin-right:.3em}[class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em}.btn [class^="icon-"].pull-left.icon-2x,.btn [class*=" icon-"].pull-left.icon-2x,.btn [class^="icon-"].pull-right.icon-2x,.btn [class*=" icon-"].pull-right.icon-2x{margin-top:.18em}.btn [class^="icon-"].icon-spin.icon-large,.btn [class*=" icon-"].icon-spin.icon-large{line-height:.8em}.btn.btn-small [class^="icon-"].pull-left.icon-2x,.btn.btn-small [class*=" icon-"].pull-left.icon-2x,.btn.btn-small [class^="icon-"].pull-right.icon-2x,.btn.btn-small [class*=" icon-"].pull-right.icon-2x{margin-top:.25em}.btn.btn-large [class^="icon-"],.btn.btn-large [class*=" icon-"]{margin-top:0}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x,.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-top:.05em}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x{margin-right:.2em}.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-left:.2em}.icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}@-moz-document url-prefix(){.icon-spin{height:.9em}.btn .icon-spin{height:auto}.icon-spin.icon-large{height:1.25em}.btn .icon-spin.icon-large{height:.75em}}.icon-glass:before{content:"\f000"}.icon-music:before{content:"\f001"}.icon-search:before{content:"\f002"}.icon-envelope:before{content:"\f003"}.icon-heart:before{content:"\f004"}.icon-star:before{content:"\f005"}.icon-star-empty:before{content:"\f006"}.icon-user:before{content:"\f007"}.icon-film:before{content:"\f008"}.icon-th-large:before{content:"\f009"}.icon-th:before{content:"\f00a"}.icon-th-list:before{content:"\f00b"}.icon-ok:before{content:"\f00c"}.icon-remove:before{content:"\f00d"}.icon-zoom-in:before{content:"\f00e"}.icon-zoom-out:before{content:"\f010"}.icon-off:before{content:"\f011"}.icon-signal:before{content:"\f012"}.icon-cog:before{content:"\f013"}.icon-trash:before{content:"\f014"}.icon-home:before{content:"\f015"}.icon-file:before{content:"\f016"}.icon-time:before{content:"\f017"}.icon-road:before{content:"\f018"}.icon-download-alt:before{content:"\f019"}.icon-download:before{content:"\f01a"}.icon-upload:before{content:"\f01b"}.icon-inbox:before{content:"\f01c"}.icon-play-circle:before{content:"\f01d"}.icon-repeat:before{content:"\f01e"}.icon-refresh:before{content:"\f021"}.icon-list-alt:before{content:"\f022"}.icon-lock:before{content:"\f023"}.icon-flag:before{content:"\f024"}.icon-headphones:before{content:"\f025"}.icon-volume-off:before{content:"\f026"}.icon-volume-down:before{content:"\f027"}.icon-volume-up:before{content:"\f028"}.icon-qrcode:before{content:"\f029"}.icon-barcode:before{content:"\f02a"}.icon-tag:before{content:"\f02b"}.icon-tags:before{content:"\f02c"}.icon-book:before{content:"\f02d"}.icon-bookmark:before{content:"\f02e"}.icon-print:before{content:"\f02f"}.icon-camera:before{content:"\f030"}.icon-font:before{content:"\f031"}.icon-bold:before{content:"\f032"}.icon-italic:before{content:"\f033"}.icon-text-height:before{content:"\f034"}.icon-text-width:before{content:"\f035"}.icon-align-left:before{content:"\f036"}.icon-align-center:before{content:"\f037"}.icon-align-right:before{content:"\f038"}.icon-align-justify:before{content:"\f039"}.icon-list:before{content:"\f03a"}.icon-indent-left:before{content:"\f03b"}.icon-indent-right:before{content:"\f03c"}.icon-facetime-video:before{content:"\f03d"}.icon-picture:before{content:"\f03e"}.icon-pencil:before{content:"\f040"}.icon-map-marker:before{content:"\f041"}.icon-adjust:before{content:"\f042"}.icon-tint:before{content:"\f043"}.icon-edit:before{content:"\f044"}.icon-share:before{content:"\f045"}.icon-check:before{content:"\f046"}.icon-move:before{content:"\f047"}.icon-step-backward:before{content:"\f048"}.icon-fast-backward:before{content:"\f049"}.icon-backward:before{content:"\f04a"}.icon-play:before{content:"\f04b"}.icon-pause:before{content:"\f04c"}.icon-stop:before{content:"\f04d"}.icon-forward:before{content:"\f04e"}.icon-fast-forward:before{content:"\f050"}.icon-step-forward:before{content:"\f051"}.icon-eject:before{content:"\f052"}.icon-chevron-left:before{content:"\f053"}.icon-chevron-right:before{content:"\f054"}.icon-plus-sign:before{content:"\f055"}.icon-minus-sign:before{content:"\f056"}.icon-remove-sign:before{content:"\f057"}.icon-ok-sign:before{content:"\f058"}.icon-question-sign:before{content:"\f059"}.icon-info-sign:before{content:"\f05a"}.icon-screenshot:before{content:"\f05b"}.icon-remove-circle:before{content:"\f05c"}.icon-ok-circle:before{content:"\f05d"}.icon-ban-circle:before{content:"\f05e"}.icon-arrow-left:before{content:"\f060"}.icon-arrow-right:before{content:"\f061"}.icon-arrow-up:before{content:"\f062"}.icon-arrow-down:before{content:"\f063"}.icon-share-alt:before{content:"\f064"}.icon-resize-full:before{content:"\f065"}.icon-resize-small:before{content:"\f066"}.icon-plus:before{content:"\f067"}.icon-minus:before{content:"\f068"}.icon-asterisk:before{content:"\f069"}.icon-exclamation-sign:before{content:"\f06a"}.icon-gift:before{content:"\f06b"}.icon-leaf:before{content:"\f06c"}.icon-fire:before{content:"\f06d"}.icon-eye-open:before{content:"\f06e"}.icon-eye-close:before{content:"\f070"}.icon-warning-sign:before{content:"\f071"}.icon-plane:before{content:"\f072"}.icon-calendar:before{content:"\f073"}.icon-random:before{content:"\f074"}.icon-comment:before{content:"\f075"}.icon-magnet:before{content:"\f076"}.icon-chevron-up:before{content:"\f077"}.icon-chevron-down:before{content:"\f078"}.icon-retweet:before{content:"\f079"}.icon-shopping-cart:before{content:"\f07a"}.icon-folder-close:before{content:"\f07b"}.icon-folder-open:before{content:"\f07c"}.icon-resize-vertical:before{content:"\f07d"}.icon-resize-horizontal:before{content:"\f07e"}.icon-bar-chart:before{content:"\f080"}.icon-twitter-sign:before{content:"\f081"}.icon-facebook-sign:before{content:"\f082"}.icon-camera-retro:before{content:"\f083"}.icon-key:before{content:"\f084"}.icon-cogs:before{content:"\f085"}.icon-comments:before{content:"\f086"}.icon-thumbs-up:before{content:"\f087"}.icon-thumbs-down:before{content:"\f088"}.icon-star-half:before{content:"\f089"}.icon-heart-empty:before{content:"\f08a"}.icon-signout:before{content:"\f08b"}.icon-linkedin-sign:before{content:"\f08c"}.icon-pushpin:before{content:"\f08d"}.icon-external-link:before{content:"\f08e"}.icon-signin:before{content:"\f090"}.icon-trophy:before{content:"\f091"}.icon-github-sign:before{content:"\f092"}.icon-upload-alt:before{content:"\f093"}.icon-lemon:before{content:"\f094"}.icon-phone:before{content:"\f095"}.icon-check-empty:before{content:"\f096"}.icon-bookmark-empty:before{content:"\f097"}.icon-phone-sign:before{content:"\f098"}.icon-twitter:before{content:"\f099"}.icon-facebook:before{content:"\f09a"}.icon-github:before{content:"\f09b"}.icon-unlock:before{content:"\f09c"}.icon-credit-card:before{content:"\f09d"}.icon-rss:before{content:"\f09e"}.icon-hdd:before{content:"\f0a0"}.icon-bullhorn:before{content:"\f0a1"}.icon-bell:before{content:"\f0a2"}.icon-certificate:before{content:"\f0a3"}.icon-hand-right:before{content:"\f0a4"}.icon-hand-left:before{content:"\f0a5"}.icon-hand-up:before{content:"\f0a6"}.icon-hand-down:before{content:"\f0a7"}.icon-circle-arrow-left:before{content:"\f0a8"}.icon-circle-arrow-right:before{content:"\f0a9"}.icon-circle-arrow-up:before{content:"\f0aa"}.icon-circle-arrow-down:before{content:"\f0ab"}.icon-globe:before{content:"\f0ac"}.icon-wrench:before{content:"\f0ad"}.icon-tasks:before{content:"\f0ae"}.icon-filter:before{content:"\f0b0"}.icon-briefcase:before{content:"\f0b1"}.icon-fullscreen:before{content:"\f0b2"}.icon-group:before{content:"\f0c0"}.icon-link:before{content:"\f0c1"}.icon-cloud:before{content:"\f0c2"}.icon-beaker:before{content:"\f0c3"}.icon-cut:before{content:"\f0c4"}.icon-copy:before{content:"\f0c5"}.icon-paper-clip:before{content:"\f0c6"}.icon-save:before{content:"\f0c7"}.icon-sign-blank:before{content:"\f0c8"}.icon-reorder:before{content:"\f0c9"}.icon-list-ul:before{content:"\f0ca"}.icon-list-ol:before{content:"\f0cb"}.icon-strikethrough:before{content:"\f0cc"}.icon-underline:before{content:"\f0cd"}.icon-table:before{content:"\f0ce"}.icon-magic:before{content:"\f0d0"}.icon-truck:before{content:"\f0d1"}.icon-pinterest:before{content:"\f0d2"}.icon-pinterest-sign:before{content:"\f0d3"}.icon-google-plus-sign:before{content:"\f0d4"}.icon-google-plus:before{content:"\f0d5"}.icon-money:before{content:"\f0d6"}.icon-caret-down:before{content:"\f0d7"}.icon-caret-up:before{content:"\f0d8"}.icon-caret-left:before{content:"\f0d9"}.icon-caret-right:before{content:"\f0da"}.icon-columns:before{content:"\f0db"}.icon-sort:before{content:"\f0dc"}.icon-sort-down:before{content:"\f0dd"}.icon-sort-up:before{content:"\f0de"}.icon-envelope-alt:before{content:"\f0e0"}.icon-linkedin:before{content:"\f0e1"}.icon-undo:before{content:"\f0e2"}.icon-legal:before{content:"\f0e3"}.icon-dashboard:before{content:"\f0e4"}.icon-comment-alt:before{content:"\f0e5"}.icon-comments-alt:before{content:"\f0e6"}.icon-bolt:before{content:"\f0e7"}.icon-sitemap:before{content:"\f0e8"}.icon-umbrella:before{content:"\f0e9"}.icon-paste:before{content:"\f0ea"}.icon-lightbulb:before{content:"\f0eb"}.icon-exchange:before{content:"\f0ec"}.icon-cloud-download:before{content:"\f0ed"}.icon-cloud-upload:before{content:"\f0ee"}.icon-user-md:before{content:"\f0f0"}.icon-stethoscope:before{content:"\f0f1"}.icon-suitcase:before{content:"\f0f2"}.icon-bell-alt:before{content:"\f0f3"}.icon-coffee:before{content:"\f0f4"}.icon-food:before{content:"\f0f5"}.icon-file-alt:before{content:"\f0f6"}.icon-building:before{content:"\f0f7"}.icon-hospital:before{content:"\f0f8"}.icon-ambulance:before{content:"\f0f9"}.icon-medkit:before{content:"\f0fa"}.icon-fighter-jet:before{content:"\f0fb"}.icon-beer:before{content:"\f0fc"}.icon-h-sign:before{content:"\f0fd"}.icon-plus-sign-alt:before{content:"\f0fe"}.icon-double-angle-left:before{content:"\f100"}.icon-double-angle-right:before{content:"\f101"}.icon-double-angle-up:before{content:"\f102"}.icon-double-angle-down:before{content:"\f103"}.icon-angle-left:before{content:"\f104"}.icon-angle-right:before{content:"\f105"}.icon-angle-up:before{content:"\f106"}.icon-angle-down:before{content:"\f107"}.icon-desktop:before{content:"\f108"}.icon-laptop:before{content:"\f109"}.icon-tablet:before{content:"\f10a"}.icon-mobile-phone:before{content:"\f10b"}.icon-circle-blank:before{content:"\f10c"}.icon-quote-left:before{content:"\f10d"}.icon-quote-right:before{content:"\f10e"}.icon-spinner:before{content:"\f110"}.icon-circle:before{content:"\f111"}.icon-reply:before{content:"\f112"}.icon-github-alt:before{content:"\f113"}.icon-folder-close-alt:before{content:"\f114"}.icon-folder-open-alt:before{content:"\f115"}
View
1 demo/common/css/foundation.min.css
@@ -0,0 +1 @@
+*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html,body{font-size:100%}body{background:#fff;color:#222;padding:0;margin:0;font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;font-weight:normal;font-style:normal;line-height:1;position:relative}a:focus{outline:none}img,object,embed{max-width:100%;height:auto}object,embed{height:100%}img{-ms-interpolation-mode:bicubic}#map_canvas img,#map_canvas embed,#map_canvas object,.map_canvas img,.map_canvas embed,.map_canvas object{max-width:none !important}.left{float:left !important}.right{float:right !important}.text-left{text-align:left !important}.text-right{text-align:right !important}.text-center{text-align:center !important}.text-justify{text-align:justify !important}.hide{display:none}.antialiased{-webkit-font-smoothing:antialiased}img{display:inline-block}textarea{height:auto;min-height:50px}select{width:100%}.row{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}.row .column,.row .columns{position:relative;padding-left:0.9375em;padding-right:0.9375em;width:100%;float:left}.row.collapse .column,.row.collapse .columns{position:relative;padding-left:0;padding-right:0;float:left}.row .row{width:auto;margin-left:-0.9375em;margin-right:-0.9375em;margin-top:0;margin-bottom:0;max-width:none;*zoom:1}.row .row:before,.row .row:after{content:" ";display:table}.row .row:after{clear:both}.row .row.collapse{width:auto;margin:0;max-width:none;*zoom:1}.row .row.collapse:before,.row .row.collapse:after{content:" ";display:table}.row .row.collapse:after{clear:both}@media only screen{.row .column,.row .columns{position:relative;padding-left:0.9375em;padding-right:0.9375em;float:left}.row .small-1{position:relative;width:8.33333%}.row .small-2{position:relative;width:16.66667%}.row .small-3{position:relative;width:25%}.row .small-4{position:relative;width:33.33333%}.row .small-5{position:relative;width:41.66667%}.row .small-6{position:relative;width:50%}.row .small-7{position:relative;width:58.33333%}.row .small-8{position:relative;width:66.66667%}.row .small-9{position:relative;width:75%}.row .small-10{position:relative;width:83.33333%}.row .small-11{position:relative;width:91.66667%}.row .small-12{position:relative;width:100%}.row .small-offset-1{position:relative;margin-left:8.33333%}.row .small-offset-2{position:relative;margin-left:16.66667%}.row .small-offset-3{position:relative;margin-left:25%}.row .small-offset-4{position:relative;margin-left:33.33333%}.row .small-offset-5{position:relative;margin-left:41.66667%}.row .small-offset-6{position:relative;margin-left:50%}.row .small-offset-7{position:relative;margin-left:58.33333%}.row .small-offset-8{position:relative;margin-left:66.66667%}.row .small-offset-9{position:relative;margin-left:75%}.row .small-offset-10{position:relative;margin-left:83.33333%}[class*="column"]+[class*="column"]:last-child{float:right}[class*="column"]+[class*="column"].end{float:left}.column.small-centered,.columns.small-centered{position:relative;margin-left:auto;margin-right:auto;float:none !important}}@media only screen and (min-width: 48em){.row .large-1{position:relative;width:8.33333%}.row .large-2{position:relative;width:16.66667%}.row .large-3{position:relative;width:25%}.row .large-4{position:relative;width:33.33333%}.row .large-5{position:relative;width:41.66667%}.row .large-6{position:relative;width:50%}.row .large-7{position:relative;width:58.33333%}.row .large-8{position:relative;width:66.66667%}.row .large-9{position:relative;width:75%}.row .large-10{position:relative;width:83.33333%}.row .large-11{position:relative;width:91.66667%}.row .large-12{position:relative;width:100%}.row .large-offset-1{position:relative;margin-left:8.33333%}.row .large-offset-2{position:relative;margin-left:16.66667%}.row .large-offset-3{position:relative;margin-left:25%}.row .large-offset-4{position:relative;margin-left:33.33333%}.row .large-offset-5{position:relative;margin-left:41.66667%}.row .large-offset-6{position:relative;margin-left:50%}.row .large-offset-7{position:relative;margin-left:58.33333%}.row .large-offset-8{position:relative;margin-left:66.66667%}.row .large-offset-9{position:relative;margin-left:75%}.row .large-offset-10{position:relative;margin-left:83.33333%}.push-2{position:relative;left:16.66667%;right:auto}.pull-2{position:relative;right:16.66667%;left:auto}.push-3{position:relative;left:25%;right:auto}.pull-3{position:relative;right:25%;left:auto}.push-4{position:relative;left:33.33333%;right:auto}.pull-4{position:relative;right:33.33333%;left:auto}.push-5{position:relative;left:41.66667%;right:auto}.pull-5{position:relative;right:41.66667%;left:auto}.push-6{position:relative;left:50%;right:auto}.pull-6{position:relative;right:50%;left:auto}.push-7{position:relative;left:58.33333%;right:auto}.pull-7{position:relative;right:58.33333%;left:auto}.push-8{position:relative;left:66.66667%;right:auto}.pull-8{position:relative;right:66.66667%;left:auto}.push-9{position:relative;left:75%;right:auto}.pull-9{position:relative;right:75%;left:auto}.push-10{position:relative;left:83.33333%;right:auto}.pull-10{position:relative;right:83.33333%;left:auto}.small-push-2{left:inherit}.small-pull-2{right:inherit}.small-push-3{left:inherit}.small-pull-3{right:inherit}.small-push-4{left:inherit}.small-pull-4{right:inherit}.small-push-5{left:inherit}.small-pull-5{right:inherit}.small-push-6{left:inherit}.small-pull-6{right:inherit}.small-push-7{left:inherit}.small-pull-7{right:inherit}.small-push-8{left:inherit}.small-pull-8{right:inherit}.small-push-9{left:inherit}.small-pull-9{right:inherit}.small-push-10{left:inherit}.small-pull-10{right:inherit}.column.large-centered,.columns.large-centered{position:relative;margin-left:auto;margin-right:auto;float:none !important}}.show-for-small,.show-for-medium-down,.show-for-large-down{display:inherit !important}.show-for-medium,.show-for-medium-up,.show-for-large,.show-for-large-up,.show-for-xlarge{display:none !important}.hide-for-medium,.hide-for-medium-up,.hide-for-large,.hide-for-large-up,.hide-for-xlarge{display:inherit !important}.hide-for-small,.hide-for-medium-down,.hide-for-large-down{display:none !important}table.show-for-small,table.show-for-medium-down,table.show-for-large-down,table.hide-for-medium,table.hide-for-medium-up,table.hide-for-large,table.hide-for-large-up,table.hide-for-xlarge{display:table}thead.show-for-small,thead.show-for-medium-down,thead.show-for-large-down,thead.hide-for-medium,thead.hide-for-medium-up,thead.hide-for-large,thead.hide-for-large-up,thead.hide-for-xlarge{display:table-header-group !important}tbody.show-for-small,tbody.show-for-medium-down,tbody.show-for-large-down,tbody.hide-for-medium,tbody.hide-for-medium-up,tbody.hide-for-large,tbody.hide-for-large-up,tbody.hide-for-xlarge{display:table-row-group !important}tr.show-for-small,tr.show-for-medium-down,tr.show-for-large-down,tr.hide-for-medium,tr.hide-for-medium-up,tr.hide-for-large,tr.hide-for-large-up,tr.hide-for-xlarge{display:table-row !important}td.show-for-small,td.show-for-medium-down,td.show-for-large-down,td.hide-for-medium,td.hide-for-medium-up,td.hide-for-large,td.hide-for-large-up,td.hide-for-xlarge,th.show-for-small,th.show-for-medium-down,th.show-for-large-down,th.hide-for-medium,th.hide-for-medium-up,th.hide-for-large,th.hide-for-large-up,th.hide-for-xlarge{display:table-cell !important}@media only screen and (min-width: 48em){.show-for-medium,.show-for-medium-up{display:inherit !important}.show-for-small{display:none !important}.hide-for-small{display:inherit !important}.hide-for-medium,.hide-for-medium-up{display:none !important}table.show-for-medium,table.show-for-medium-up,table.hide-for-small{display:table}thead.show-for-medium,thead.show-for-medium-up,thead.hide-for-small{display:table-header-group !important}tbody.show-for-medium,tbody.show-for-medium-up,tbody.hide-for-small{display:table-row-group !important}tr.show-for-medium,tr.show-for-medium-up,tr.hide-for-small{display:table-row !important}td.show-for-medium,td.show-for-medium-up,td.hide-for-small,th.show-for-medium,th.show-for-medium-up,th.hide-for-small{display:table-cell !important}}@media only screen and (min-width: 80em){.show-for-large,.show-for-large-up{display:inherit !important}.show-for-medium,.show-for-medium-down{display:none !important}.hide-for-medium,.hide-for-medium-down{display:inherit !important}.hide-for-large,.hide-for-large-up{display:none !important}table.show-for-large,table.show-for-large-up,table.hide-for-medium,table.hide-for-medium-down{display:table}thead.show-for-large,thead.show-for-large-up,thead.hide-for-medium,thead.hide-for-medium-down{display:table-header-group !important}tbody.show-for-large,tbody.show-for-large-up,tbody.hide-for-medium,tbody.hide-for-medium-down{display:table-row-group !important}tr.show-for-large,tr.show-for-large-up,tr.hide-for-medium,tr.hide-for-medium-down{display:table-row !important}td.show-for-large,td.show-for-large-up,td.hide-for-medium,td.hide-for-medium-down,th.show-for-large,th.show-for-large-up,th.hide-for-medium,th.hide-for-medium-down{display:table-cell !important}}@media only screen and (min-width: 90em){.show-for-xlarge{display:inherit !important}.show-for-large,.show-for-large-down{display:none !important}.hide-for-large,.hide-for-large-down{display:inherit !important}.hide-for-xlarge{display:none !important}table.show-for-xlarge,table.hide-for-large,table.hide-for-large-down{display:table}thead.show-for-xlarge,thead.hide-for-large,thead.hide-for-large-down{display:table-header-group !important}tbody.show-for-xlarge,tbody.hide-for-large,tbody.hide-for-large-down{display:table-row-group !important}tr.show-for-xlarge,tr.hide-for-large,tr.hide-for-large-down{display:table-row !important}td.show-for-xlarge,td.hide-for-large,td.hide-for-large-down,th.show-for-xlarge,th.hide-for-large,th.hide-for-large-down{display:table-cell !important}}.show-for-landscape,.hide-for-portrait{display:inherit !important}.hide-for-landscape,.show-for-portrait{display:none !important}table.hide-for-landscape,table.show-for-portrait{display:table}thead.hide-for-landscape,thead.show-for-portrait{display:table-header-group !important}tbody.hide-for-landscape,tbody.show-for-portrait{display:table-row-group !important}tr.hide-for-landscape,tr.show-for-portrait{display:table-row !important}td.hide-for-landscape,td.show-for-portrait,th.hide-for-landscape,th.show-for-portrait{display:table-cell !important}@media only screen and (orientation: landscape){.show-for-landscape,.hide-for-portrait{display:inherit !important}.hide-for-landscape,.show-for-portrait{display:none !important}table.show-for-landscape,table.hide-for-portrait{display:table}thead.show-for-landscape,thead.hide-for-portrait{display:table-header-group !important}tbody.show-for-landscape,tbody.hide-for-portrait{display:table-row-group !important}tr.show-for-landscape,tr.hide-for-portrait{display:table-row !important}td.show-for-landscape,td.hide-for-portrait,th.show-for-landscape,th.hide-for-portrait{display:table-cell !important}}@media only screen and (orientation: portrait){.show-for-portrait,.hide-for-landscape{display:inherit !important}.hide-for-portrait,.show-for-landscape{display:none !important}table.show-for-portrait,table.hide-for-landscape{display:table}thead.show-for-portrait,thead.hide-for-landscape{display:table-header-group !important}tbody.show-for-portrait,tbody.hide-for-landscape{display:table-row-group !important}tr.show-for-portrait,tr.hide-for-landscape{display:table-row !important}td.show-for-portrait,td.hide-for-landscape,th.show-for-portrait,th.hide-for-landscape{display:table-cell !important}}.show-for-touch{display:none !important}.hide-for-touch{display:inherit !important}.touch .show-for-touch{display:inherit !important}.touch .hide-for-touch{display:none !important}table.hide-for-touch{display:table}.touch table.show-for-touch{display:table}thead.hide-for-touch{display:table-header-group !important}.touch thead.show-for-touch{display:table-header-group !important}tbody.hide-for-touch{display:table-row-group !important}.touch tbody.show-for-touch{display:table-row-group !important}tr.hide-for-touch{display:table-row !important}.touch tr.show-for-touch{display:table-row !important}td.hide-for-touch{display:table-cell !important}.touch td.show-for-touch{display:table-cell !important}th.hide-for-touch{display:table-cell !important}.touch th.show-for-touch{display:table-cell !important}@media only screen{[class*="block-grid-"]{display:block;padding:0;margin:0 -10px;*zoom:1}[class*="block-grid-"]:before,[class*="block-grid-"]:after{content:" ";display:table}[class*="block-grid-"]:after{clear:both}[class*="block-grid-"]>li{display:block;height:auto;float:left;padding:0 10px 10px}.small-block-grid-1>li{width:100%;padding:0 10px 10px}.small-block-grid-1>li:nth-of-type(1n+1){clear:both}.small-block-grid-2>li{width:50%;padding:0 10px 10px}.small-block-grid-2>li:nth-of-type(2n+1){clear:both}.small-block-grid-3>li{width:33.33333%;padding:0 10px 10px}.small-block-grid-3>li:nth-of-type(3n+1){clear:both}.small-block-grid-4>li{width:25%;padding:0 10px 10px}.small-block-grid-4>li:nth-of-type(4n+1){clear:both}.small-block-grid-5>li{width:20%;padding:0 10px 10px}.small-block-grid-5>li:nth-of-type(5n+1){clear:both}.small-block-grid-6>li{width:16.66667%;padding:0 10px 10px}.small-block-grid-6>li:nth-of-type(6n+1){clear:both}.small-block-grid-7>li{width:14.28571%;padding:0 10px 10px}.small-block-grid-7>li:nth-of-type(7n+1){clear:both}.small-block-grid-8>li{width:12.5%;padding:0 10px 10px}.small-block-grid-8>li:nth-of-type(8n+1){clear:both}.small-block-grid-9>li{width:11.11111%;padding:0 10px 10px}.small-block-grid-9>li:nth-of-type(9n+1){clear:both}.small-block-grid-10>li{width:10%;padding:0 10px 10px}.small-block-grid-10>li:nth-of-type(10n+1){clear:both}.small-block-grid-11>li{width:9.09091%;padding:0 10px 10px}.small-block-grid-11>li:nth-of-type(11n+1){clear:both}.small-block-grid-12>li{width:8.33333%;padding:0 10px 10px}.small-block-grid-12>li:nth-of-type(12n+1){clear:both}}@media only screen and (min-width: 48em){.large-block-grid-1>li{width:100%;padding:0 10px 10px}.large-block-grid-1>li:nth-of-type(1n+1){clear:both}.large-block-grid-2>li{width:50%;padding:0 10px 10px}.large-block-grid-2>li:nth-of-type(2n+1){clear:both}.large-block-grid-3>li{width:33.33333%;padding:0 10px 10px}.large-block-grid-3>li:nth-of-type(3n+1){clear:both}.large-block-grid-4>li{width:25%;padding:0 10px 10px}.large-block-grid-4>li:nth-of-type(4n+1){clear:both}.large-block-grid-5>li{width:20%;padding:0 10px 10px}.large-block-grid-5>li:nth-of-type(5n+1){clear:both}.large-block-grid-6>li{width:16.66667%;padding:0 10px 10px}.large-block-grid-6>li:nth-of-type(6n+1){clear:both}.large-block-grid-7>li{width:14.28571%;padding:0 10px 10px}.large-block-grid-7>li:nth-of-type(7n+1){clear:both}.large-block-grid-8>li{width:12.5%;padding:0 10px 10px}.large-block-grid-8>li:nth-of-type(8n+1){clear:both}.large-block-grid-9>li{width:11.11111%;padding:0 10px 10px}.large-block-grid-9>li:nth-of-type(9n+1){clear:both}.large-block-grid-10>li{width:10%;padding:0 10px 10px}.large-block-grid-10>li:nth-of-type(10n+1){clear:both}.large-block-grid-11>li{width:9.09091%;padding:0 10px 10px}.large-block-grid-11>li:nth-of-type(11n+1){clear:both}.large-block-grid-12>li{width:8.33333%;padding:0 10px 10px}.large-block-grid-12>li:nth-of-type(12n+1){clear:both}[class*="small-block-grid-"]>li{clear:none !important}}p.lead{font-size:1.21875em;line-height:1.6}.subheader{line-height:1.4;color:#6f6f6f;font-weight:300;margin-top:0.2em;margin-bottom:0.5em}div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}a{color:#2ba6cb;text-decoration:none;line-height:inherit}a:hover,a:focus{color:#2795b6}a img{border:none}p{font-family:inherit;font-weight:normal;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}p aside{font-size:0.875em;line-height:1.35;font-style:italic}h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;font-weight:bold;font-style:normal;color:#222;text-rendering:optimizeLegibility;margin-top:0.2em;margin-bottom:0.5em;line-height:1.2125em}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-size:60%;color:#6f6f6f;line-height:0}h1{font-size:2.125em}h2{font-size:1.6875em}h3{font-size:1.375em}h4{font-size:1.125em}h5{font-size:1.125em}h6{font-size:1em}hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}em,i{font-style:italic;line-height:inherit}strong,b{font-weight:bold;line-height:inherit}small{font-size:60%;line-height:inherit}code{font-family:Consolas,"Liberation Mono",Courier,monospace;font-weight:bold;color:#7f0a0c}ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}ul.square{list-style-type:square}ul.circle{list-style-type:circle}ul.disc{list-style-type:disc}ul.no-bullet{list-style:none}ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}dl dt{margin-bottom:0.3em;font-weight:bold}dl dd{margin-bottom:0.75em}abbr,acronym{text-transform:uppercase;font-size:90%;color:#222;border-bottom:1px dotted #ddd;cursor:help}abbr{text-transform:none}blockquote{margin:0 0 1.25em;padding:0.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}blockquote cite{display:block;font-size:0.8125em;color:#555}blockquote cite:before{content:"\2014 \0020"}blockquote cite a,blockquote cite a:visited{color:#555}blockquote,blockquote p{line-height:1.6;color:#6f6f6f}.vcard{display:inline-block;margin:0 0 1.25em 0;border:1px solid #ddd;padding:0.625em 0.75em}.vcard li{margin:0;display:block}.vcard .fn{font-weight:bold;font-size:0.9375em}.vevent .summary{font-weight:bold}.vevent abbr{cursor:default;text-decoration:none;font-weight:bold;border:none;padding:0 0.0625em}@media only screen and (min-width: 48em){h1,h2,h3,h4,h5,h6{line-height:1.4}h1{font-size:2.75em}h2{font-size:2.3125em}h3{font-size:1.6875em}h4{font-size:1.4375em}}.print-only{display:none !important}@media print{*{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100% !important}@page{margin:0.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}.hide-on-print{display:none !important}.print-only{display:block !important}.hide-for-print{display:none !important}.show-for-print{display:inherit !important}}button,.button{border-style:solid;border-width:1px;cursor:pointer;font-family:inherit;font-weight:bold;line-height:1;margin:0 0 1.25em;position:relative;text-decoration:none;text-align:center;display:inline-block;padding-top:0.75em;padding-right:1.5em;padding-bottom:0.8125em;padding-left:1.5em;font-size:1em;background-color:#2ba6cb;border-color:#2284a1;color:#fff}button:hover,button:focus,.button:hover,.button:focus{background-color:#2284a1}button:hover,button:focus,.button:hover,.button:focus{color:#fff}button.secondary,.button.secondary{background-color:#e9e9e9;border-color:#d0d0d0;color:#333}button.secondary:hover,button.secondary:focus,.button.secondary:hover,.button.secondary:focus{background-color:#d0d0d0}button.secondary:hover,button.secondary:focus,.button.secondary:hover,.button.secondary:focus{color:#333}button.success,.button.success{background-color:#5da423;border-color:#457a1a;color:#fff}button.success:hover,button.success:focus,.button.success:hover,.button.success:focus{background-color:#457a1a}button.success:hover,button.success:focus,.button.success:hover,.button.success:focus{color:#fff}button.alert,.button.alert{background-color:#c60f13;border-color:#970b0e;color:#fff}button.alert:hover,button.alert:focus,.button.alert:hover,.button.alert:focus{background-color:#970b0e}button.alert:hover,button.alert:focus,.button.alert:hover,.button.alert:focus{color:#fff}button.large,.button.large{padding-top:1em;padding-right:2em;padding-bottom:1.0625em;padding-left:2em;font-size:1.25em}button.small,.button.small{padding-top:0.5625em;padding-right:1.125em;padding-bottom:0.625em;padding-left:1.125em;font-size:0.8125em}button.tiny,.button.tiny{padding-top:0.4375em;padding-right:0.875em;padding-bottom:0.5em;padding-left:0.875em;font-size:0.6875em}button.expand,.button.expand{padding-top:false;padding-right:0px;padding-bottom:false0.0625em;padding-left:0px;width:100%}button.left-align,.button.left-align{text-align:left;text-indent:0.75em}button.right-align,.button.right-align{text-align:right;padding-right:0.75em}button.disabled,button[disabled],.button.disabled,.button[disabled]{background-color:#2ba6cb;border-color:#2284a1;color:#fff;cursor:default;opacity:0.6;-webkit-box-shadow:none;box-shadow:none}button.disabled:hover,button.disabled:focus,button[disabled]:hover,button[disabled]:focus,.button.disabled:hover,.button.disabled:focus,.button[disabled]:hover,.button[disabled]:focus{background-color:#2284a1}button.disabled:hover,button.disabled:focus,button[disabled]:hover,button[disabled]:focus,.button.disabled:hover,.button.disabled:focus,.button[disabled]:hover,.button[disabled]:focus{color:#fff}button.disabled:hover,button.disabled:focus,button[disabled]:hover,button[disabled]:focus,.button.disabled:hover,.button.disabled:focus,.button[disabled]:hover,.button[disabled]:focus{background-color:#2ba6cb}button.disabled.secondary,button[disabled].secondary,.button.disabled.secondary,.button[disabled].secondary{background-color:#e9e9e9;border-color:#d0d0d0;color:#333;cursor:default;opacity:0.6;-webkit-box-shadow:none;box-shadow:none}button.disabled.secondary:hover,button.disabled.secondary:focus,button[disabled].secondary:hover,button[disabled].secondary:focus,.button.disabled.secondary:hover,.button.disabled.secondary:focus,.button[disabled].secondary:hover,.button[disabled].secondary:focus{background-color:#d0d0d0}button.disabled.secondary:hover,button.disabled.secondary:focus,button[disabled].secondary:hover,button[disabled].secondary:focus,.button.disabled.secondary:hover,.button.disabled.secondary:focus,.button[disabled].secondary:hover,.button[disabled].secondary:focus{color:#333}button.disabled.secondary:hover,button.disabled.secondary:focus,button[disabled].secondary:hover,button[disabled].secondary:focus,.button.disabled.secondary:hover,.button.disabled.secondary:focus,.button[disabled].secondary:hover,.button[disabled].secondary:focus{background-color:#e9e9e9}button.disabled.success,button[disabled].success,.button.disabled.success,.button[disabled].success{background-color:#5da423;border-color:#457a1a;color:#fff;cursor:default;opacity:0.6;-webkit-box-shadow:none;box-shadow:none}button.disabled.success:hover,button.disabled.success:focus,button[disabled].success:hover,button[disabled].success:focus,.button.disabled.success:hover,.button.disabled.success:focus,.button[disabled].success:hover,.button[disabled].success:focus{background-color:#457a1a}button.disabled.success:hover,button.disabled.success:focus,button[disabled].success:hover,button[disabled].success:focus,.button.disabled.success:hover,.button.disabled.success:focus,.button[disabled].success:hover,.button[disabled].success:focus{color:#fff}button.disabled.success:hover,button.disabled.success:focus,button[disabled].success:hover,button[disabled].success:focus,.button.disabled.success:hover,.button.disabled.success:focus,.button[disabled].success:hover,.button[disabled].success:focus{background-color:#5da423}button.disabled.alert,button[disabled].alert,.button.disabled.alert,.button[disabled].alert{background-color:#c60f13;border-color:#970b0e;color:#fff;cursor:default;opacity:0.6;-webkit-box-shadow:none;box-shadow:none}button.disabled.alert:hover,button.disabled.alert:focus,button[disabled].alert:hover,button[disabled].alert:focus,.button.disabled.alert:hover,.button.disabled.alert:focus,.button[disabled].alert:hover,.button[disabled].alert:focus{background-color:#970b0e}button.disabled.alert:hover,button.disabled.alert:focus,button[disabled].alert:hover,button[disabled].alert:focus,.button.disabled.alert:hover,.button.disabled.alert:focus,.button[disabled].alert:hover,.button[disabled].alert:focus{color:#fff}button.disabled.alert:hover,button.disabled.alert:focus,button[disabled].alert:hover,button[disabled].alert:focus,.button.disabled.alert:hover,.button.disabled.alert:focus,.button[disabled].alert:hover,.button[disabled].alert:focus{background-color:#c60f13}input.button,button.button{padding-top:0.8125em;padding-bottom:0.75em}input.button.tiny,button.button.tiny{padding-top:0.5em;padding-bottom:0.4375em}input.button.small,button.button.small{padding-top:0.625em;padding-bottom:0.5625em}input.button.large,button.button.large{padding-top:1.03125em;padding-bottom:1.03125em}@media only screen{.button{-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;-webkit-transition:background-color 300ms ease-out;-moz-transition:background-color 300ms ease-out;transition:background-color 300ms ease-out}.button:active{-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2) inset;box-shadow:0 1px 0 rgba(0,0,0,0.2) inset}.button.radius{-webkit-border-radius:3px;border-radius:3px}.button.round{-webkit-border-radius:1000px;border-radius:1000px}}@media only screen and (min-width: 48em){.button{display:inline-block}}form{margin:0 0 1em}form .row .row{margin:-0.5em}form .row .row .column,form .row .row .columns{padding:0 0.5em}form .row .row.collapse{margin:0}form .row .row.collapse .column,form .row .row.collapse .columns{padding:0}form .row input.column,form .row input.columns{padding-left:0.5em}label{font-size:0.875em;color:#4d4d4d;cursor:pointer;display:block;font-weight:500;margin-bottom:0.1875em}label.right{float:none;text-align:right}label.inline{margin:0 0 1em 0;padding:0.625em 0}.prefix,.postfix{display:block;position:relative;z-index:2;text-align:center;width:100%;padding-top:0;padding-bottom:0;border-style:solid;border-width:1px;overflow:hidden;font-size:0.875em;height:2.3125em;line-height:2.3125em}.postfix.button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;text-align:center;line-height:2.125em}.prefix.button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;text-align:center;line-height:2.125em}.prefix.button.radius{-webkit-border-radius:0;border-radius:0;-moz-border-radius-bottomleft:3px;-moz-border-radius-topleft:3px;-webkit-border-bottom-left-radius:3px;-webkit-border-top-left-radius:3px;border-bottom-left-radius:3px;border-top-left-radius:3px}.postfix.button.radius{-webkit-border-radius:0;border-radius:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px}.prefix.button.round{-webkit-border-radius:0;border-radius:0;-moz-border-radius-bottomleft:1000px;-moz-border-radius-topleft:1000px;-webkit-border-bottom-left-radius:1000px;-webkit-border-top-left-radius:1000px;border-bottom-left-radius:1000px;border-top-left-radius:1000px}.postfix.button.round{-webkit-border-radius:0;border-radius:0;-moz-border-radius-topright:1000px;-moz-border-radius-bottomright:1000px;-webkit-border-top-right-radius:1000px;-webkit-border-bottom-right-radius:1000px;border-top-right-radius:1000px;border-bottom-right-radius:1000px}span.prefix{background:#f2f2f2;border-color:#d9d9d9;border-right:none;color:#333}span.prefix.radius{-webkit-border-radius:0;border-radius:0;-moz-border-radius-bottomleft:3px;-moz-border-radius-topleft:3px;-webkit-border-bottom-left-radius:3px;-webkit-border-top-left-radius:3px;border-bottom-left-radius:3px;border-top-left-radius:3px}span.postfix{background:#f2f2f2;border-color:#ccc;border-left:none;color:#333}span.postfix.radius{-webkit-border-radius:0;border-radius:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px}.input-group.radius>*:first-child,.input-group.radius>*:first-child *{-webkit-border-radius:0;border-radius:0;-moz-border-radius-bottomleft:3px;-moz-border-radius-topleft:3px;-webkit-border-bottom-left-radius:3px;-webkit-border-top-left-radius:3px;border-bottom-left-radius:3px;border-top-left-radius:3px}.input-group.radius>*:last-child,.input-group.radius>*:last-child *{-webkit-border-radius:0;border-radius:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px}.input-group.round>*:first-child,.input-group.round>*:first-child *{-webkit-border-radius:0;border-radius:0;-moz-border-radius-bottomleft:1000px;-moz-border-radius-topleft:1000px;-webkit-border-bottom-left-radius:1000px;-webkit-border-top-left-radius:1000px;border-bottom-left-radius:1000px;border-top-left-radius:1000px}.input-group.round>*:last-child,.input-group.round>*:last-child *{-webkit-border-radius:0;border-radius:0;-moz-border-radius-topright:1000px;-moz-border-radius-bottomright:1000px;-webkit-border-top-right-radius:1000px;-webkit-border-bottom-right-radius:1000px;border-top-right-radius:1000px;border-bottom-right-radius:1000px}input[type="text"],input[type="password"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="month"],input[type="week"],input[type="email"],input[type="number"],input[type="search"],input[type="tel"],input[type="time"],input[type="url"],textarea{background-color:#fff;font-family:inherit;border:1px solid #ccc;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);color:rgba(0,0,0,0.75);display:block;font-size:0.875em;margin:0 0 1em 0;padding:0.5em;height:2.3125em;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.15s linear;-moz-transition:all 0.15s linear;transition:all 0.15s linear}input[type="text"]:focus,input[type="password"]:focus,input[type="date"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="month"]:focus,input[type="week"]:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="time"]:focus,input[type="url"]:focus,textarea:focus{background:#fafafa;border-color:#999;outline:none}input[type="text"][disabled],input[type="password"][disabled],input[type="date"][disabled],input[type="datetime"][disabled],input[type="datetime-local"][disabled],input[type="month"][disabled],input[type="week"][disabled],input[type="email"][disabled],input[type="number"][disabled],input[type="search"][disabled],input[type="tel"][disabled],input[type="time"][disabled],input[type="url"][disabled],textarea[disabled]{background-color:#ddd}fieldset{border:solid 1px #ddd;padding:1.25em;margin:1.125em 0}fieldset legend{font-weight:bold;background:#fff;padding:0 0.1875em;margin:0;margin-left:-0.1875em}.error input,input.error,.error textarea,textarea.error{border-color:#c60f13;background-color:rgba(198,15,19,0.1)}.error input:focus,input.error:focus,.error textarea:focus,textarea.error:focus{background:#fafafa;border-color:#999}.error label,label.error{color:#c60f13}.error small,small.error{display:block;padding:0.375em 0.25em;margin-top:-1.3125em;margin-bottom:1em;font-size:0.75em;font-weight:bold;background:#c60f13;color:#fff}form.custom .custom{display:inline-block;width:16px;height:16px;position:relative;top:2px;border:solid 1px #ccc;background:#fff}form.custom .custom.radio{-webkit-border-radius:1000px;border-radius:1000px}form.custom .custom.checkbox:before{content:"";display:block;line-height:0.8;height:14px;width:14px;text-align:center;position:absolute;top:0;left:0;font-size:14px;color:#fff}form.custom .custom.radio.checked:before{content:"";display:block;width:8px;height:8px;-webkit-border-radius:1000px;border-radius:1000px;background:#222;position:relative;top:3px;left:3px}form.custom .custom.checkbox.checked:before{content:"\00d7";color:#222}form.custom .custom.dropdown{display:block;position:relative;top:0;height:2.3125em;margin-bottom:1.25em;margin-top:0px;padding:0px;width:100%;background:#fff;background:-moz-linear-gradient(top, #fff 0%, #f3f3f3 100%);background:-webkit-linear-gradient(top, #fff 0%, #f3f3f3 100%);background:linear-gradient(to bottom, #fff 0%, #f3f3f3 100%);-webkit-box-shadow:none;box-shadow:none;font-size:0.875em;vertical-align:top}form.custom .custom.dropdown ul{overflow-y:auto;max-height:200px}form.custom .custom.dropdown .current{cursor:default;white-space:nowrap;line-height:2.25em;color:rgba(0,0,0,0.75);text-decoration:none;overflow:hidden;display:block;margin-left:0.5em;margin-right:2.3125em}form.custom .custom.dropdown .selector{cursor:default;position:absolute;width:2.5em;height:2.3125em;display:block;right:0;top:0}form.custom .custom.dropdown .selector:after{content:"";display:block;content:"";display:block;width:0;height:0;border:solid 5px;border-color:#aaa transparent transparent transparent;position:absolute;left:0.9375em;top:50%;margin-top:-3px}form.custom .custom.dropdown:hover a.selector:after,form.custom .custom.dropdown.open a.selector:after{content:"";display:block;width:0;height:0;border:solid 5px;border-color:#222 transparent transparent transparent}form.custom .custom.dropdown .disabled{color:#888}form.custom .custom.dropdown .disabled:hover{background:transparent;color:#888}form.custom .custom.dropdown .disabled:hover:after{display:none}form.custom .custom.dropdown.open ul{display:block;z-index:10;min-width:100%;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}form.custom .custom.dropdown.small{max-width:134px}form.custom .custom.dropdown.medium{max-width:254px}form.custom .custom.dropdown.large{max-width:434px}form.custom .custom.dropdown.expand{width:100% !important}form.custom .custom.dropdown.open.small ul{min-width:134px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}form.custom .custom.dropdown.open.medium ul{min-width:254px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}form.custom .custom.dropdown.open.large ul{min-width:434px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}form.custom .custom.dropdown ul{position:absolute;width:auto;display:none;margin:0;left:-1px;top:auto;-webkit-box-shadow:0 2px 2px 0px rgba(0,0,0,0.1);box-shadow:0 2px 2px 0px rgba(0,0,0,0.1);margin:0;padding:0;background:#fff;border:solid 1px #ccc;font-size:16px}form.custom .custom.dropdown ul li{color:#555;font-size:0.875em;cursor:default;padding-top:0.25em;padding-bottom:0.25em;padding-left:0.375em;padding-right:2.375em;min-height:1.5em;line-height:1.5em;margin:0;white-space:nowrap;list-style:none}form.custom .custom.dropdown ul li.selected{background:#eee;color:#000}form.custom .custom.dropdown ul li:hover{background-color:#e4e4e4;color:#000}form.custom .custom.dropdown ul li.selected:hover{background:#eee;cursor:default;color:#000}form.custom .custom.dropdown ul.show{display:block}form.custom .custom.disabled{background-color:#ddd}.button-group{list-style:none;margin:0;*zoom:1}.button-group:before,.button-group:after{content:" ";display:table}.button-group:after{clear:both}.button-group>*{margin:0 0 0 -1px;float:left}.button-group>*:first-child{margin-left:0}.button-group.radius>*:first-child,.button-group.radius>*:first-child>a,.button-group.radius>*:first-child>button{-webkit-border-radius:0;border-radius:0;-moz-border-radius-bottomleft:3px;-moz-border-radius-topleft:3px;-webkit-border-bottom-left-radius:3px;-webkit-border-top-left-radius:3px;border-bottom-left-radius:3px;border-top-left-radius:3px}.button-group.radius>*:last-child,.button-group.radius>*:last-child>a,.button-group.radius>*:last-child>button{-webkit-border-radius:0;border-radius:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px}.button-group.round>*:first-child,.button-group.round>*:first-child>a,.button-group.round>*:first-child>button{-webkit-border-radius:0;border-radius:0;-moz-border-radius-bottomleft:1000px;-moz-border-radius-topleft:1000px;-webkit-border-bottom-left-radius:1000px;-webkit-border-top-left-radius:1000px;border-bottom-left-radius:1000px;border-top-left-radius:1000px}.button-group.round>*:last-child,.button-group.round>*:last-child>a,.button-group.round>*:last-child>button{-webkit-border-radius:0;border-radius:0;-moz-border-radius-topright:1000px;-moz-border-radius-bottomright:1000px;-webkit-border-top-right-radius:1000px;-webkit-border-bottom-right-radius:1000px;border-top-right-radius:1000px;border-bottom-right-radius:1000px}.button-group.even-2 li{width:50%}.button-group.even-2 li .button{width:100%}.button-group.even-3 li{width:33.33333%}.button-group.even-3 li .button{width:100%}.button-group.even-4 li{width:25%}.button-group.even-4 li .button{width:100%}.button-group.even-5 li{width:20%}.button-group.even-5 li .button{width:100%}.button-group.even-6 li{width:16.66667%}.button-group.even-6 li .button{width:100%}.button-group.even-7 li{width:14.28571%}.button-group.even-7 li .button{width:100%}.button-group.even-8 li{width:12.5%}.button-group.even-8 li .button{width:100%}.button-bar{*zoom:1}.button-bar:before,.button-bar:after{content:" ";display:table}.button-bar:after{clear:both}.button-bar .button-group{float:left;margin-right:0.625em}.button-bar .button-group div{overflow:hidden}.dropdown.button{position:relative;padding-right:3.1875em}.dropdown.button:before{position:absolute;content:"";width:0;height:0;display:block;border-style:solid;border-color:#fff transparent transparent transparent;top:50%}.dropdown.button:before{border-width:0.5625em;right:1.5em;margin-top:-0.25em}.dropdown.button:before{border-color:#fff transparent transparent transparent}.dropdown.button.tiny{padding-right:2.1875em}.dropdown.button.tiny:before{border-width:0.4375em;right:0.875em;margin-top:-0.15625em}.dropdown.button.tiny:before{border-color:#fff transparent transparent transparent}.dropdown.button.small{padding-right:2.8125em}.dropdown.button.small:before{border-width:0.5625em;right:1.125em;margin-top:-0.21875em}.dropdown.button.small:before{border-color:#fff transparent transparent transparent}.dropdown.button.large{padding-right:4em}.dropdown.button.large:before{border-width:0.625em;right:1.75em;margin-top:-0.3125em}.dropdown.button.large:before{border-color:#fff transparent transparent transparent}.dropdown.button.secondary:before{border-color:#333 transparent transparent transparent}.split.button{position:relative;padding-right:4.8em}.split.button span{display:block;height:100%;position:absolute;right:0;top:0;border-left:solid 1px}.split.button span:before{position:absolute;content:"";width:0;height:0;display:block;border-style:solid;left:50%}.split.button span:active{background-color:rgba(0,0,0,0.1)}.split.button span{border-left-color:#1e728c}.split.button span{width:3em}.split.button span:before{border-width:0.5625em;top:1.125em;margin-left:-0.5625em}.split.button span:before{border-color:#fff transparent transparent transparent}.split.button.secondary span{border-left-color:#c3c3c3}.split.button.secondary span:before{border-color:#fff transparent transparent transparent}.split.button.alert span{border-left-color:#7f0a0c}.split.button.success span{border-left-color:#396516}.split.button.tiny{padding-right:3.9375em}.split.button.tiny span{width:2.84375em}.split.button.tiny span:before{border-width:0.4375em;top:0.875em;margin-left:-0.3125em}.split.button.small{padding-right:3.9375em}.split.button.small span{width:2.8125em}.split.button.small span:before{border-width:0.5625em;top:0.84375em;margin-left:-0.5625em}.split.button.large{padding-right:6em}.split.button.large span{width:3.75em}.split.button.large span:before{border-width:0.625em;top:1.3125em;margin-left:-0.5625em}.split.button.secondary span:before{border-color:#333 transparent transparent transparent}.split.button.radius span{-webkit-border-radius:0;border-radius:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px}.split.button.round span{-webkit-border-radius:0;border-radius:0;-moz-border-radius-topright:1000px;-moz-border-radius-bottomright:1000px;-webkit-border-top-right-radius:1000px;-webkit-border-bottom-right-radius:1000px;border-top-right-radius:1000px;border-bottom-right-radius:1000px}.flex-video{position:relative;padding-top:1.5625em;padding-bottom:67.5%;height:0;margin-bottom:1em;overflow:hidden}.flex-video.widescreen{padding-bottom:57.25%}.flex-video.vimeo{padding-top:0}.flex-video iframe,.flex-video object,.flex-video embed,.flex-video video{position:absolute;top:0;left:0;width:100%;height:100%}.section-container{width:100%;display:block;margin-bottom:1.25em;border:1px solid #ccc;border-top:none}.section-container section,.section-container .section{border-top:1px solid #ccc;position:relative}.section-container section .title,.section-container .section .title{top:0;cursor:pointer;width:100%;margin:0;background-color:#efefef}.section-container section .title a,.section-container .section .title a{padding:0.9375em;display:inline-block;color:#333;font-size:0.875em;white-space:nowrap;width:100%}.section-container section .title:hover,.section-container .section .title:hover{background-color:#e2e2e2}.section-container section .content,.section-container .section .content{display:none;padding:0.9375em;background-color:#fff}.section-container section .content>*:last-child,.section-container .section .content>*:last-child{margin-bottom:0}.section-container section .content>*:first-child,.section-container .section .content>*:first-child{padding-top:0}.section-container section .content>*:last-child,.section-container .section .content>*:last-child{padding-bottom:0}.section-container section.active .content,.section-container .section.active .content{display:block}.section-container section.active .title,.section-container .section.active .title{background:#d5d5d5}.section-container.tabs{border:0;position:relative}.section-container.tabs section,.section-container.tabs .section{padding-top:0;border:0;position:static}.section-container.tabs section .title,.section-container.tabs .section .title{width:auto;border:1px solid #ccc;border-right:0;border-bottom:0;position:absolute;z-index:1}.section-container.tabs section .title a,.section-container.tabs .section .title a{width:100%}.section-container.tabs section:last-child .title,.section-container.tabs .section:last-child .title{border-right:1px solid #ccc}.section-container.tabs section .content,.section-container.tabs .section .content{border:1px solid #ccc;position:absolute;z-index:10;top:-1px}.section-container.tabs section.active .title,.section-container.tabs .section.active .title{background-color:#fff;z-index:11;border-bottom:0}.section-container.tabs section.active .content,.section-container.tabs .section.active .content{position:relative}@media only screen and (min-width: 48em){.section-container.accordion .section{padding-top:0 !important}.section-container.vertical-nav{border:1px solid #ccc;border-top:none}.section-container.vertical-nav section,.section-container.vertical-nav .section{padding-top:0 !important}.section-container.vertical-nav section .title a,.section-container.vertical-nav .section .title a{display:block;width:100%}.section-container.vertical-nav section .content,.section-container.vertical-nav .section .content{display:none}.section-container.vertical-nav section.active .content,.section-container.vertical-nav .section.active .content{display:block;position:absolute;left:100%;top:-1px;z-index:999;min-width:12.5em;border:1px solid #ccc}.section-container.horizontal-nav{position:relative;background:#efefef;border:1px solid #ccc}.section-container.horizontal-nav section,.section-container.horizontal-nav .section{padding-top:0;border:0;position:static}.section-container.horizontal-nav section .title,.section-container.horizontal-nav .section .title{width:auto;border:1px solid #ccc;border-left:0;top:-1px;position:absolute;z-index:1}.section-container.horizontal-nav section .title a,.section-container.horizontal-nav .section .title a{width:100%}.section-container.horizontal-nav section .content,.section-container.horizontal-nav .section .content{display:none}.section-container.horizontal-nav section.active .content,.section-container.horizontal-nav .section.active .content{display:block;position:absolute;z-index:999;left:0;top:-2px;min-width:12.5em;border:1px solid #ccc}}.contain-to-grid{width:100%;background:#111}.fixed{width:100%;left:0;position:fixed;top:0;z-index:99}.top-bar{overflow:hidden;height:45px;line-height:45px;position:relative;background:#111;margin-bottom:1.875em}.top-bar ul{margin-bottom:0;list-style:none}.top-bar .row{max-width:none}.top-bar form,.top-bar input{margin-bottom:0}.top-bar input{height:2.45em}.top-bar .button{padding-top:.5em;padding-bottom:.5em;margin-bottom:0}.top-bar .title-area{position:relative}.top-bar .name{height:45px;margin:0;font-size:16px}.top-bar .name h1{line-height:45px;font-size:1.0625em;margin:0}.top-bar .name h1 a{font-weight:bold;color:#fff;width:50%;display:block;padding:0 15px}.top-bar .toggle-topbar{position:absolute;right:0;top:0}.top-bar .toggle-topbar a{color:#fff;text-transform:uppercase;font-size:0.8125em;font-weight:bold;position:relative;display:block;padding:0 15px;height:45px;line-height:45px}.top-bar .toggle-topbar.menu-icon{right:15px;top:50%;margin-top:-16px;padding-left:40px}.top-bar .toggle-topbar.menu-icon a{text-indent:-48px;width:34px;height:34px;line-height:33px;padding:0;color:#fff}.top-bar .toggle-topbar.menu-icon a span{position:absolute;right:0;display:block;width:16px;height:0;-webkit-box-shadow:0 10px 0 1px #fff,0 16px 0 1px #fff,0 22px 0 1px #fff;box-shadow:0 10px 0 1px #fff,0 16px 0 1px #fff,0 22px 0 1px #fff}.top-bar.expanded{height:auto;background:transparent}.top-bar.expanded .title-area{background:#111}.top-bar.expanded .toggle-topbar a{color:#888}.top-bar.expanded .toggle-topbar a span{-webkit-box-shadow:0 10px 0 1px #888,0 16px 0 1px #888,0 22px 0 1px #888;box-shadow:0 10px 0 1px #888,0 16px 0 1px #888,0 22px 0 1px #888}.top-bar-section{left:0;position:relative;width:auto;-webkit-transition:left 300ms ease-out;-moz-transition:left 300ms ease-out;transition:left 300ms ease-out}.top-bar-section ul{width:100%;height:auto;display:block;background:#333;font-size:16px;margin:0}.top-bar-section .divider{border-bottom:solid 1px #4d4d4d;border-top:solid 1px #1a1a1a;clear:both;height:1px;width:100%}.top-bar-section ul li>a{display:block;width:100%;color:#fff;padding:12px 0 12px 0;padding-left:15px;font-size:0.8125em;font-weight:bold;background:#333}.top-bar-section ul li>a:hover{background:#2b2b2b}.top-bar-section ul li>a.button{background:#2ba6cb;font-size:0.8125em}.top-bar-section ul li>a.button:hover{background:#2284a1}.top-bar-section ul li>a.button.secondary{background:#e9e9e9}.top-bar-section ul li>a.button.secondary:hover{background:#d0d0d0}.top-bar-section ul li>a.button.success{background:#5da423}.top-bar-section ul li>a.button.success:hover{background:#457a1a}.top-bar-section ul li>a.button.alert{background:#c60f13}.top-bar-section ul li>a.button.alert:hover{background:#970b0e}.top-bar-section ul li.active a{background:#2b2b2b}.top-bar-section .has-form{padding:15px}.top-bar-section .has-dropdown{position:relative}.top-bar-section .has-dropdown>a:after{content:"";display:block;width:0;height:0;border:solid 5px;border-color:transparent transparent transparent rgba(255,255,255,0.5);margin-right:15px;margin-top:-4.5px;position:absolute;top:50%;right:0}.top-bar-section .has-dropdown.moved{position:static}.top-bar-section .has-dropdown.moved>.dropdown{visibility:visible}.top-bar-section .dropdown{position:absolute;left:100%;top:0;visibility:hidden;z-index:99}.top-bar-section .dropdown li{width:100%}.top-bar-section .dropdown li a{font-weight:normal;padding:8px 15px}.top-bar-section .dropdown li.title h5{margin-bottom:0}.top-bar-section .dropdown li.title h5 a{color:#fff;line-height:22.5px;display:block}.top-bar-section .dropdown label{padding:8px 15px 2px;margin-bottom:0;text-transform:uppercase;color:#555;font-weight:bold;font-size:0.625em}.top-bar-js-breakpoint{width:58.75em !important;visibility:hidden}.js-generated{display:block}@media only screen and (min-width: 58.75em){.top-bar{background:#111;*zoom:1;overflow:visible}.top-bar:before,.top-bar:after{content:" ";display:table}.top-bar:after{clear:both}.top-bar .toggle-topbar{display:none}.top-bar .title-area{float:left}.top-bar .name h1 a{width:auto}.top-bar input,.top-bar .button{line-height:2em;font-size:0.875em;height:2em;padding:0 10px;position:relative;top:8px}.top-bar.expanded{background:#111}.contain-to-grid .top-bar{max-width:62.5em;margin:0 auto}.top-bar-section{-webkit-transition:none 0 0;-moz-transition:none 0 0;transition:none 0 0;left:0 !important}.top-bar-section ul{width:auto;height:auto !important;display:inline}.top-bar-section ul li{float:left}.top-bar-section ul li .js-generated{display:none}.top-bar-section li a:not(.button){padding:0 15px;line-height:45px;background:#111}.top-bar-section li a:not(.button):hover{background:#000}.top-bar-section .has-dropdown>a{padding-right:35px !important}.top-bar-section .has-dropdown>a:after{content:"";display:block;width:0;height:0;border:solid 5px;border-color:rgba(255,255,255,0.5) transparent transparent transparent;margin-top:-2.5px}.top-bar-section .has-dropdown.moved{position:relative}.top-bar-section .has-dropdown.moved>.dropdown{visibility:hidden}.top-bar-section .has-dropdown:hover>.dropdown,.top-bar-section .has-dropdown:active>.dropdown{visibility:visible}.top-bar-section .has-dropdown .dropdown li.has-dropdown>a:after{border:none;content:"\00bb";margin-top:-7px;right:5px}.top-bar-section .dropdown{left:0;top:auto;background:transparent;min-width:100%}.top-bar-section .dropdown li a{color:#fff;line-height:1;white-space:nowrap;padding:7px 15px;background:#1e1e1e}.top-bar-section .dropdown li label{white-space:nowrap;background:#1e1e1e}.top-bar-section .dropdown li .dropdown{left:100%;top:0}.top-bar-section>ul>.divider{border-bottom:none;border-top:none;border-right:solid 1px #2b2b2b;border-left:solid 1px #000;clear:none;height:45px;width:0px}.top-bar-section .has-form{background:#111;padding:0 15px;height:45px}.top-bar-section ul.right li .dropdown{left:auto;right:0}.top-bar-section ul.right li .dropdown li .dropdown{right:100%}}.orbit-container{overflow:hidden;width:100%;position:relative;background:#f5f5f5}.orbit-container .orbit-slides-container{list-style:none;margin:0;padding:0;position:relative}.orbit-container .orbit-slides-container img{display:block}.orbit-container .orbit-slides-container>*{position:relative;float:left;height:100%}.orbit-container .orbit-slides-container>* .orbit-caption{position:absolute;bottom:0;background-color:#000;background-color:rgba(0,0,0,0.6);color:#fff;width:100%;padding:10px 14px;font-size:0.875em}.orbit-container .orbit-slides-container>* .orbit-caption *{color:#fff}.orbit-container .orbit-slide-number{position:absolute;top:10px;left:10px;font-size:12px}.orbit-container .orbit-slide-number span{font-weight:700}.orbit-container .orbit-timer{position:absolute;top:10px;right:10px;height:6px;width:100px}.orbit-container .orbit-timer .orbit-progress{height:100%;background-color:#000;background-color:rgba(0,0,0,0.6);display:block;width:0%}.orbit-container .orbit-timer>span{display:none;position:absolute;top:10px;right:0px;width:11px;height:14px;border:solid 4px #000;border-top:none;border-bottom:none}.orbit-container .orbit-timer.paused>span{right:-6px;top:9px;width:11px;height:14px;border:solid 8px;border-color:transparent transparent transparent #000}.orbit-container:hover .orbit-timer>span{display:block}.orbit-container .orbit-prev,.orbit-container .orbit-next{position:absolute;top:50%;margin-top:-25px;background-color:#000;background-color:rgba(0,0,0,0.6);width:50px;height:60px;line-height:50px;color:white;text-indent:-9999px !important}.orbit-container .orbit-prev>span,.orbit-container .orbit-next>span{position:absolute;top:50%;margin-top:-16px;display:block;width:0;height:0;border:solid 16px}.orbit-container .orbit-prev{left:0}.orbit-container .orbit-prev>span{border-color:transparent #fff transparent transparent}.orbit-container .orbit-prev:hover>span{border-color:transparent #ccc transparent transparent}.orbit-container .orbit-next{right:0}.orbit-container .orbit-next>span{border-color:transparent transparent transparent #fff;left:50%;margin-left:-8px}.orbit-container .orbit-next:hover>span{border-color:transparent transparent transparent #ccc}.orbit-bullets{margin:0 auto 30px auto;overflow:hidden;position:relative;top:10px}.orbit-bullets li{display:block;width:18px;height:18px;background:#fff;float:left;margin-right:6px;border:solid 2px #000;-webkit-border-radius:1000px;border-radius:1000px}.orbit-bullets li.active{background:#000}.orbit-bullets li:last-child{margin-right:0}.touch .orbit-container .orbit-prev,.touch .orbit-container .orbit-next{display:none}.touch .orbit-bullets{display:none}@media only screen and (min-width: 48em){.touch .orbit-container .orbit-prev,.touch .orbit-container .orbit-next{display:inherit}.touch .orbit-bullets{display:block}}.reveal-modal-bg{position:fixed;height:100%;width:100%;background:#000;background:rgba(0,0,0,0.45);z-index:98;display:none;top:0;left:0}.reveal-modal{visibility:hidden;display:none;position:absolute;left:50%;z-index:99;height:auto;background-color:#fff;margin-left:-40%;width:80%;background-color:#fff;padding:1.25em;border:solid 1px #666;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);box-shadow:0 0 10px rgba(0,0,0,0.4);top:50px}.reveal-modal .column,.reveal-modal .columns{min-width:0}.reveal-modal>:first-child{margin-top:0}.reveal-modal>:last-child{margin-bottom:0}.reveal-modal .close-reveal-modal{font-size:1.375em;line-height:1;position:absolute;top:0.5em;right:0.6875em;color:#aaa;font-weight:bold;cursor:pointer}@media only screen and (min-width: 48em){.reveal-modal{padding:1.875em;top:6.25em}.reveal-modal.small{margin-left:-15%;width:30%}.reveal-modal.medium{margin-left:-20%;width:40%}.reveal-modal.large{margin-left:-30%;width:60%}.reveal-modal.xlarge{margin-left:-35%;width:70%}.reveal-modal.expand{margin-left:-47.5%;width:95%}}@media print{div:not(.reveal-modal){display:none}}.joyride-list{display:none}.joyride-tip-guide{display:none;position:absolute;background:#000;color:#fff;z-index:101;top:0;left:2.5%;font-family:inherit;font-weight:normal;width:95%}.lt-ie9 .joyride-tip-guide{max-width:800px;left:50%;margin-left:-400px}.joyride-content-wrapper{width:100%;padding:1.125em 1.25em 1.5em}.joyride-content-wrapper .button{margin-bottom:0 !important}.joyride-tip-guide .joyride-nub{display:block;position:absolute;left:22px;width:0;height:0;border:solid 14px}.joyride-tip-guide .joyride-nub.top{border-color:#000;border-top-color:transparent !important;border-left-color:transparent !important;border-right-color:transparent !important;top:-28px;bottom:none}.joyride-tip-guide .joyride-nub.bottom{border-color:#000 !important;border-bottom-color:transparent !important;border-left-color:transparent !important;border-right-color:transparent !important;bottom:-28px;bottom:none}.joyride-tip-guide .joyride-nub.right{right:-28px}.joyride-tip-guide .joyride-nub.left{left:-28px}.joyride-tip-guide h1,.joyride-tip-guide h2,.joyride-tip-guide h3,.joyride-tip-guide h4,.joyride-tip-guide h5,.joyride-tip-guide h6{line-height:1.25;margin:0;font-weight:bold;color:#fff}.joyride-tip-guide p{margin:0 0 1.125em 0;font-size:0.875em;line-height:1.3}.joyride-timer-indicator-wrap{width:50px;height:3px;border:solid 1px #555;position:absolute;right:1.0625em;bottom:1em}.joyride-timer-indicator{display:block;width:0;height:inherit;background:#666}.joyride-close-tip{position:absolute;right:12px;top:10px;color:#777 !important;text-decoration:none;font-size:30px;font-weight:normal;line-height:0.5 !important}.joyride-close-tip:hover,.joyride-close-tip:focus{color:#eee !important}.joyride-modal-bg{position:fixed;height:100%;width:100%;background:transparent;background:rgba(0,0,0,0.5);z-index:100;display:none;top:0;left:0;cursor:pointer}@media only screen and (min-width: 48em){.joyride-tip-guide{width:300px;left:0}.joyride-tip-guide .joyride-nub.bottom{border-color:#000 !important;border-bottom-color:transparent !important;border-left-color:transparent !important;border-right-color:transparent !important;bottom:-28px;bottom:none}.joyride-tip-guide .joyride-nub.right{border-color:#000 !important;border-top-color:transparent !important;border-right-color:transparent !important;border-bottom-color:transparent !important;top:22px;bottom:none;left:auto;right:-28px}.joyride-tip-guide .joyride-nub.left{border-color:#000 !important;border-top-color:transparent !important;border-left-color:transparent !important;border-bottom-color:transparent !important;top:22px;left:-28px;right:auto;bottom:none}}[data-clearing]{*zoom:1;margin-bottom:0}[data-clearing]:before,[data-clearing]:after{content:" ";display:table}[data-clearing]:after{clear:both}.clearing-blackout{background:#111;position:fixed;width:100%;height:100%;top:0;left:0;z-index:998}.clearing-blackout .clearing-close{display:block}.clearing-container{position:relative;z-index:998;height:100%;overflow:hidden;margin:0}.visible-img{height:95%;position:relative}.visible-img img{position:absolute;left:50%;top:50%;margin-left:-50%;max-height:100%;max-width:100%}.clearing-caption{color:#fff;line-height:1.3;margin-bottom:0;text-align:center;bottom:0;background:#111;width:100%;padding:10px 30px;position:absolute;left:0}.clearing-close{z-index:999;padding-left:20px;padding-top:10px;font-size:40px;line-height:1;color:#fff;display:none}.clearing-close:hover,.clearing-close:focus{color:#ccc}.clearing-assembled .clearing-container{height:100%}.clearing-assembled .clearing-container .carousel>ul{display:none}@media only screen and (min-width: 48em){.clearing-main-left,.clearing-main-right{position:absolute;height:100%;width:40px;top:0}.clearing-main-left>span,.clearing-main-right>span{position:absolute;top:50%;display:block;width:0;height:0;border:solid 16px}.clearing-main-left{left:0}.clearing-main-left>span{left:5px;border-color:transparent #fff transparent transparent}.clearing-main-right{right:0}.clearing-main-right>span{border-color:transparent transparent transparent #fff}.clearing-main-left.disabled,.clearing-main-right.disabled{opacity:0.5}.clearing-feature ~ li{display:none}.clearing-assembled .clearing-container .carousel{background:#111;height:150px;margin-top:5px}.clearing-assembled .clearing-container .carousel>ul{display:block;z-index:999;width:200%;height:100%;margin-left:0;position:relative;left:0}.clearing-assembled .clearing-container .carousel>ul li{display:block;width:175px;height:inherit;padding:0;float:left;overflow:hidden;margin-right:1px;position:relative;cursor:pointer;opacity:0.4}.clearing-assembled .clearing-container .carousel>ul li.fix-height img{min-height:100%;height:100%;max-width:none}.clearing-assembled .clearing-container .carousel>ul li a.th{border:none;-webkit-box-shadow:none;box-shadow:none;display:block}.clearing-assembled .clearing-container .carousel>ul li img{cursor:pointer !important;min-width:100% !important}.clearing-assembled .clearing-container .carousel>ul li.visible{opacity:1}.clearing-assembled .clearing-container .visible-img{background:#111;overflow:hidden;height:75%}.clearing-close{position:absolute;top:10px;right:20px;padding-left:0;padding-top:0}}.alert-box{border-style:solid;border-width:1px;display:block;font-weight:bold;margin-bottom:1.25em;position:relative;padding:0.6875em 1.3125em 0.75em 0.6875em;font-size:0.875em;background-color:#2ba6cb;border-color:#2284a1;color:#fff}.alert-box .close{font-size:1.375em;padding:5px 4px 4px;line-height:0;position:absolute;top:0.4375em;right:0.3125em;color:#333;opacity:0.3}.alert-box .close:hover,.alert-box .close:focus{opacity:0.5}.alert-box.radius{-webkit-border-radius:3px;border-radius:3px}.alert-box.round{-webkit-border-radius:1000px;border-radius:1000px}.alert-box.success{background-color:#5da423;border-color:#457a1a;color:#fff}.alert-box.alert{background-color:#c60f13;border-color:#970b0e;color:#fff}.alert-box.secondary{background-color:#e9e9e9;border-color:#d0d0d0;color:#505050}.breadcrumbs{display:block;padding:0.375em 0.875em 0.5625em;overflow:hidden;margin-left:0;list-style:none;border-style:solid;border-width:1px;background-color:#f6f6f6;border-color:#dcdcdc;-webkit-border-radius:3px;border-radius:3px}.breadcrumbs li{margin:0;padding:0 0.75em 0 0;float:left}.breadcrumbs li:hover a,.breadcrumbs li:focus a{text-decoration:underline}.breadcrumbs li a,.breadcrumbs li span{font-size:0.6875em;padding-left:0.75em;text-transform:uppercase;color:#2ba6cb}.breadcrumbs li.current a{cursor:default;color:#333}.breadcrumbs li.current:hover a,.breadcrumbs li.current:focus a{text-decoration:none}.breadcrumbs li.unavailable a{color:#999}.breadcrumbs li.unavailable:hover a,.breadcrumbs li.unavailable a:focus{text-decoration:none;color:#999;cursor:default}.breadcrumbs li:before{content:"/";color:#aaa;position:relative;top:1px}.breadcrumbs li:first-child a,.breadcrumbs li:first-child span{padding-left:0}.breadcrumbs li:first-child:before{content:" "}.keystroke,kbd{background-color:#ededed;border-color:#dbdbdb;color:#222;border-style:solid;border-width:1px;margin:0;font-family:"Consolas","Menlo","Courier",monospace;font-size:0.9375em;padding:0.125em 0.25em 0em;-webkit-border-radius:3px;border-radius:3px}.label{font-weight:500;text-align:center;text-decoration:none;line-height:1;white-space:nowrap;display:inline-block;position:relative;padding:0.1875em 0.625em 0.25em;font-size:0.875em;background-color:#2ba6cb;color:#fff}.label.radius{-webkit-border-radius:3px;border-radius:3px}.label.round{-webkit-border-radius:1000px;border-radius:1000px}.label.alert{background-color:#c60f13;color:#fff}.label.success{background-color:#5da423;color:#fff}.label.secondary{background-color:#e9e9e9;color:#333}.inline-list{margin:0 0 1.0625em -1.375em;padding:0;list-style:none;overflow:hidden}.inline-list>li{list-style:none;float:left;margin-left:1.375em;display:block}.inline-list>li>*{display:block}.pagination{display:block;height:1.5em;margin-left:-0.3125em}.pagination li{display:block;float:left;height:1.5em;color:#222;font-size:0.875em;margin-left:0.3125em}.pagination li a{display:block;padding:0.0625em 0.4375em 0.0625em;color:#999}.pagination li:hover a,.pagination li a:focus{background:#e6e6e6}.pagination li.unavailable a{cursor:default;color:#999}.pagination li.unavailable:hover a,.pagination li.unavailable a:focus{background:transparent}.pagination li.current a{background:#2ba6cb;color:#fff;font-weight:bold;cursor:default}.pagination li.current a:hover,.pagination li.current a:focus{background:#2ba6cb}.pagination-centered{text-align:center}.pagination-centered ul>li{float:none;display:inline-block}.panel{border-style:solid;border-width:1px;border-color:#d9d9d9;margin-bottom:1.25em;padding:1.25em;background:#f2f2f2}.panel h1,.panel h2,.panel h3,.panel h4,.panel h5,.panel h6,.panel p{color:#333}.panel>:first-child{margin-top:0}.panel>:last-child{margin-bottom:0}.panel h1,.panel h2,.panel h3,.panel h4,.panel h5,.panel h6{line-height:1;margin-bottom:0.625em}.panel h1.subheader,.panel h2.subheader,.panel h3.subheader,.panel h4.subheader,.panel h5.subheader,.panel h6.subheader{line-height:1.4}.panel.callout{border-style:solid;border-width:1px;border-color:#2284a1;margin-bottom:1.25em;padding:1.25em;background:#2ba6cb;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;box-shadow:0 1px 0 rgba(255,255,255,0.5) inset}.panel.callout h1,.panel.callout h2,.panel.callout h3,.panel.callout h4,.panel.callout h5,.panel.callout h6,.panel.callout p{color:#fff}.panel.callout>:first-child{margin-top:0}.panel.callout>:last-child{margin-bottom:0}.panel.callout h1,.panel.callout h2,.panel.callout h3,.panel.callout h4,.panel.callout h5,.panel.callout h6{line-height:1;margin-bottom:0.625em}.panel.callout h1.subheader,.panel.callout h2.subheader,.panel.callout h3.subheader,.panel.callout h4.subheader,.panel.callout h5.subheader,.panel.callout h6.subheader{line-height:1.4}.panel.radius{-webkit-border-radius:3px;border-radius:3px}.pricing-table{border:solid 1px #ddd;margin-left:0;margin-bottom:1.25em}.pricing-table *{list-style:none;line-height:1}.pricing-table .title{background-color:#ddd;padding:0.9375em 1.25em;text-align:center;color:#333;font-weight:bold;font-size:1em}.pricing-table .price{background-color:#eee;padding:0.9375em 1.25em;text-align:center;color:#333;font-weight:normal;font-size:1.25em}.pricing-table .description{background-color:#fff;padding:0.9375em;text-align:center;color:#777;font-size:0.75em;font-weight:normal;line-height:1.4;border-bottom:dotted 1px #ddd}.pricing-table .bullet-item{background-color:#fff;padding:0.9375em;text-align:center;color:#333;font-size:0.875em;font-weight:normal;border-bottom:dotted 1px #ddd}.pricing-table .cta-button{background-color:#f5f5f5;text-align:center;padding:1.25em 1.25em 0}.progress{background-color:transparent;height:1.5625em;border:1px solid #ccc;padding:0.125em;margin-bottom:0.625em}.progress .meter{background:#2ba6cb;height:100%;display:block}.progress.secondary .meter{background:#e9e9e9;height:100%;display:block}.progress.success .meter{background:#5da423;height:100%;display:block}.progress.alert .meter{background:#c60f13;height:100%;display:block}.progress.radius{-webkit-border-radius:3px;border-radius:3px}.progress.radius .meter{-webkit-border-radius:2px;border-radius:2px}.progress.round{-webkit-border-radius:1000px;border-radius:1000px}.progress.round .meter{-webkit-border-radius:999px;border-radius:999px}.side-nav{display:block;margin:0;padding:0.875em 0;list-style-type:none;list-style-position:inside}.side-nav li{margin:0 0 0.4375em 0;font-size:0.875em}.side-nav li a{display:block;color:#2ba6cb}.side-nav li.active a{color:#4d4d4d;font-weight:bold}.side-nav li.divider{border-top:1px solid;height:0;padding:0;list-style:none;border-top-color:#e6e6e6}.sub-nav{display:block;width:auto;overflow:hidden;margin:-0.25em 0 1.125em;padding-top:0.25em;margin-right:0;margin-left:-0.5625em}.sub-nav dt,.sub-nav dd{float:left;display:inline;margin-left:0.5625em;margin-bottom:0.625em;font-weight:normal;font-size:0.875em}.sub-nav dt a,.sub-nav dd a{color:#999;text-decoration:none}.sub-nav dt.active a,.sub-nav dd.active a{-webkit-border-radius:1000px;border-radius:1000px;font-weight:bold;background:#2ba6cb;padding:0.1875em 0.5625em;cursor:default;color:#fff}@media only screen{div.switch{position:relative;width:100%;padding:0;display:block;overflow:hidden;border-style:solid;border-width:1px;margin-bottom:1.25em;-webkit-animation:webkitSiblingBugfix infinite 1s;height:36px;background:#fff;border-color:#ccc}div.switch label{position:relative;left:0;z-index:2;float:left;width:50%;height:100%;margin:0;text-align:right;font-weight:bold;text-align:left;-webkit-transition:all 0.1s ease-out;-moz-transition:all 0.1s ease-out;transition:all 0.1s ease-out}div.switch input{position:absolute;z-index:3;opacity:0;width:100%;height:100%}div.switch input:hover,div.switch input:focus{cursor:pointer}div.switch>span{position:absolute;top:-1px;left:-1px;z-index:1;display:block;padding:0;border-width:1px;border-style:solid;-webkit-transition:all 0.1s ease-out;-moz-transition:all 0.1s ease-out;transition:all 0.1s ease-out}div.switch input:not(:checked)+label{opacity:0}div.switch input:checked{display:none !important}div.switch input{left:0;display:block !important}div.switch input:first-of-type+label,div.switch input:first-of-type+span+label{left:-50%}div.switch input:first-of-type:checked+label,div.switch input:first-of-type:checked+span+label{left:0%}div.switch input:last-of-type+label,div.switch input:last-of-type+span+label{right:-50%;left:auto;text-align:right}div.switch input:last-of-type:checked+label,div.switch input:last-of-type:checked+span+label{right:0%;left:auto}div.switch span.custom{display:none !important}div.switch label{padding:0 0.375em;line-height:2.3em;font-size:0.875em}div.switch input:first-of-type:checked ~ span{left:100%;margin-left:-2.1875em}div.switch>span{width:2.25em;height:2.25em}div.switch>span{border-color:#b3b3b3;background:#fff;background:-moz-linear-gradient(top, #fff 0%, #f2f2f2 100%);background:-webkit-linear-gradient(top, #fff 0%, #f2f2f2 100%);background:linear-gradient(to bottom, #fff 0%, #f2f2f2 100%);-webkit-box-shadow:2px 0 10px 0 rgba(0,0,0,0.07),1000px 0 0 1000px #e1f5d1,-2px 0 10px 0 rgba(0,0,0,0.07),-1000px 0 0 1000px #f5f5f5;box-shadow:2px 0 10px 0 rgba(0,0,0,0.07),1000px 0 0 980px #e1f5d1,-2px 0 10px 0 rgba(0,0,0,0.07),-1000px 0 0 1000px #f5f5f5}div.switch:hover>span,div.switch:focus>span{background:#fff;background:-moz-linear-gradient(top, #fff 0%, #e6e6e6 100%);background:-webkit-linear-gradient(top, #fff 0%, #e6e6e6 100%);background:linear-gradient(to bottom, #fff 0%, #e6e6e6 100%)}div.switch:active{background:transparent}div.switch.large{height:44px}div.switch.large label{padding:0 0.375em;line-height:2.3em;font-size:1.0625em}div.switch.large input:first-of-type:checked ~ span{left:100%;margin-left:-2.6875em}div.switch.large>span{width:2.75em;height:2.75em}div.switch.small{height:28px}div.switch.small label{padding:0 0.375em;line-height:2.1em;font-size:0.75em}div.switch.small input:first-of-type:checked ~ span{left:100%;margin-left:-1.6875em}div.switch.small>span{width:1.75em;height:1.75em}div.switch.tiny{height:22px}div.switch.tiny label{padding:0 0.375em;line-height:1.9em;font-size:0.6875em}div.switch.tiny input:first-of-type:checked ~ span{left:100%;margin-left:-1.3125em}div.switch.tiny>span{width:1.375em;height:1.375em}div.switch.radius{-webkit-border-radius:4px;border-radius:4px}div.switch.radius>span{-webkit-border-radius:3px;border-radius:3px}div.switch.round{-webkit-border-radius:1000px;border-radius:1000px}div.switch.round>span{-webkit-border-radius:999px;border-radius:999px}div.switch.round label{padding:0 0.5625em}@-webkit-keyframes webkitSiblingBugfix{from{position:relative}to{position:relative}}}[data-magellan-expedition]{background:#fff;z-index:997;min-width:100%;padding:10px}[data-magellan-expedition] .sub-nav{margin-bottom:0}[data-magellan-expedition] .sub-nav dd{margin-bottom:0}table{background:#fff;margin-bottom:1.25em;border:solid 1px #ddd}table thead,table tfoot{background:#f5f5f5;font-weight:bold}table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:0.5em 0.625em 0.625em;font-size:0.875em;color:#222;text-align:left}table tr th,table tr td{padding:0.5625em 0.625em;font-size:0.875em;color:#222}table tr.even,table tr.alt,table tr:nth-of-type(even){background:#f9f9f9}table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.125em}.th{display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.2);box-shadow:0 0 0 1px rgba(0,0,0,0.2);-webkit-transition:all 200ms ease-out;-moz-transition:all 200ms ease-out;transition:all 200ms ease-out}.th:hover,.th:focus{-webkit-box-shadow:0 0 6px 1px rgba(43,166,203,0.5);box-shadow:0 0 6px 1px rgba(43,166,203,0.5)}.th.radius{-webkit-border-radius:3px;border-radius:3px}.has-tip{border-bottom:dotted 1px #ccc;cursor:help;font-weight:bold;color:#333}.has-tip:hover,.has-tip:focus{border-bottom:dotted 1px #196177;color:#2ba6cb}.has-tip.tip-left,.has-tip.tip-right{float:none !important}.tooltip{display:none;position:absolute;z-index:999;font-weight:bold;font-size:0.9375em;line-height:1.3;padding:0.5em;max-width:85%;left:50%;width:100%;color:#fff;background:#000;-webkit-border-radius:3px;border-radius:3px}.tooltip>.nub{display:block;position:absolute;width:0;height:0;border:solid 5px;border-color:transparent transparent #000 transparent;top:-10px}.tooltip.opened{color:#2ba6cb !important;border-bottom:dotted 1px #196177 !important}.tap-to-close{display:block;font-size:0.625em;color:#888;font-weight:normal}@media only screen and (min-width: 48em){.tooltip>.nub{border-color:transparent transparent #000 transparent;top:-10px}.tooltip.tip-top>.nub{border-color:#000 transparent transparent transparent;top:auto;bottom:-10px}.tooltip.tip-left,.tooltip.tip-right{float:none !important}.tooltip.tip-left>.nub{border-color:transparent transparent transparent #000;right:-10px;left:auto;top:50%;margin-top:-5px}.tooltip.tip-right>.nub{border-color:transparent #000 transparent transparent;right:auto;left:-10px;top:50%;margin-top:-5px}}@media only screen and (max-width: 767px){.f-dropdown{max-width:100%;left:0}}.f-dropdown{position:absolute;left:-9999px;top:-9999px;list-style:none;width:100%;max-height:none;height:auto;background:#fff;border:solid 1px #ccc;font-size:16px;z-index:99;margin-top:2px;max-width:200px}.f-dropdown *:first-child{margin-top:0}.f-dropdown *:last-child{margin-bottom:0}.f-dropdown:before{content:"";display:block;width:0;height:0;border:solid 6px;border-color:transparent transparent #fff transparent;position:absolute;top:-12px;left:10px;z-index:99}.f-dropdown:after{content:"";display:block;width:0;height:0;border:solid 7px;border-color:transparent transparent #ccc transparent;position:absolute;top:-14px;left:9px;z-index:98}.f-dropdown li{font-size:0.875em;cursor:pointer;padding:0.3125em 0.625em;line-height:1.125em;margin:0}.f-dropdown li:hover,.f-dropdown li:focus{background:#eee}.f-dropdown li a{color:#555}.f-dropdown.content{position:absolute;left:-9999px;top:-9999px;list-style:none;padding:1.25em;width:100%;height:auto;max-height:none;background:#fff;border:solid 1px #ccc;font-size:16px;z-index:99;max-width:200px}.f-dropdown.content *:first-child{margin-top:0}.f-dropdown.content *:last-child{margin-bottom:0}.f-dropdown.tiny{max-width:200px}.f-dropdown.small{max-width:300px}.f-dropdown.medium{max-width:500px}.f-dropdown.large{max-width:800px}
View
BIN demo/common/font/FontAwesome.otf
Binary file not shown.
View
BIN demo/common/font/fontawesome-webfont.eot
Binary file not shown.
View
284 demo/common/font/fontawesome-webfont.svg
284 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
BIN demo/common/font/fontawesome-webfont.ttf
Binary file not shown.
View
BIN demo/common/font/fontawesome-webfont.woff
Binary file not shown.
View
120 demo/editable.html
@@ -1,120 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <link rel="shortcut icon" href="http://embed.ly/static/favicon.ico">
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" ></script>
- <script src="../lib/underscore.js" type="text/javascript"></script>
- <script src="../lib/mustache.js" type="text/javascript"></script>
- <script src="../jquery.preview.js" type="text/javascript"></script>
- <link rel="stylesheet" href="common/css/bootstrap.min.css">
- <link rel="stylesheet" href="../css/preview.css" />
- <title>jQuery Preview - Editable</title>
- <style>
- body {
- background:#fff url(common/img/grid-18px-masked.png) repeat-x top left;
- }
- .navbar{
- position:relative;
- }
- </style>
- </head>
- <body>
- <div class="navbar navbar-fixed-top">
- <div class="navbar-inner">
- <div class="container">
- <a class="brand" href="index.html">jQuery Preview</a>
- <ul class="nav">
- <li><a href="status.html">Status</a></li>
- <li><a href="link.html">Link</a></li>
- <li><a href="large.html">Large Link</a></li>
- <li><a href="rich.html">Rich Link</a></li>
- <li><a href="multi.html">Multiple Inputs</a></li>
- <li class="active"><a href="editable.html">Editable</a></li>
- </ul>
- </div>
- </div>
- </div>
- <div class="container">
- <div class="row">
- <div class="span10 columns offset3">
- <h3>Share a link</h3>
- <p>
- This demo makes the title and description instantly editable
- instead of click to edit.
- </p>
- <form id="preview_form" class="form-vertical" method="post" action=".">
- <fieldset>
- <input type="text" class="xlarge" name="url" id="id_url" />
- <input id="id_submit" type="submit" class="btn btn-primary" value="Share"/>
- <span class="help-block">Enter a url.</span>
-
- </fieldset>
- <!-- Placeholder that tells Preview where to put the loading icon-->
- <div class="loading">
- <img src='../images/loading-rectangle.gif'>
- </div>
- <!-- Placeholder that tells Preview where to put the selector-->
- <div class="selector"></div>
- </form>
- </div>
- </div>
- <div class="row">
- <div id="feed" class="span10 columns offset3">
-
- </div>
- </div>
- <div class="clear"></div>
- </div>
- <script>
- var preview = {
- submit : function(e, data){
- e.preventDefault();
- this.display.create(data);
- }
- }
- var selector = {
- template : ['<div class="selector small">',
- '{{>images_small}}',
- '<div class="attributes">',
- '<input class="title" value="{{title}}" />',
- '<textarea class="description">{{description}}</textarea>',
- '<span class="meta">',
- '{{>favicon}}',
- '<a class="provider" href="{{provider_url}}">{{provider_display}}</a>',
- '</span>',
- '</div>',
- '<div class="action"><a href="#" class="close">&#10005;</a></div>',
- '</div>'].join(''),
- bind : function () {
- // Thumbnail Controls
- this.elem.find('.left').bind('click', _.bind(this.scroll, {}, 'left'));
- this.elem.find('.right').bind('click', _.bind(this.scroll, {}, 'right'));
- this.elem.find('.nothumb').bind('click', this.nothumb);
-
- // Binds the close button.
- this.elem.find('.action .close').bind('click', this.clear);
- this.elem.bind('mouseenter mouseleave', function () {
- $(this).find('.action').toggle();
- });
-
- //Show hide the controls.
- this.elem.find('.thumbnail').one('mouseenter', function () {
- $(this).bind('mouseenter mouseleave', function () {
- $(this).find('.controls').toggle();
- });
- });
-
- //Edit Title and Description handlers.
- this.elem.find('.title').bind('blur', function(e){
- $(e.target).parents('form').find('#id_title').val($(e.target).val());
- });
- this.elem.find('.description').bind('blur', function(e){
- $(e.target).parents('form').find('#id_description').val($(e.target).val());
- });
- }
- }
- $('#id_url').preview({key:'c31f5208f04511e0b79e4040d3dc5c07', // Sign up for a key: http://embed.ly/pricing
- preview:preview, selector:selector});
- </script>
- </body>
-</html>
View
718 demo/index.html
@@ -2,101 +2,40 @@
<html>
<head>
<link rel="shortcut icon" href="http://embed.ly/static/favicon.ico">
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" ></script>
- <script src="../jquery.preview.full.js" type="text/javascript"></script>
- <link rel="stylesheet" href="common/css/bootstrap.min.css">
+ <script src="../lib/jquery.min.js" type="text/javascript" ></script>
+ <script src="../lib/jquery.embedly.js" type="text/javascript"></script>
+ <script src="../lib/mustache.js" type="text/javascript"></script>
+ <script src="../dist/jquery.preview.js" type="text/javascript"></script>
+ <link rel="stylesheet" href="common/css/foundation.min.css">
+ <link rel="stylesheet" href="common/css/font-awesome.min.css">
+ <link rel="stylesheet" href="common/css/demo.css" />
<link rel="stylesheet" href="../css/preview.css" />
- <title>jQuery Preview</title>
- <style>
- body {
- background:#fff url(common/img/grid-18px-masked.png) repeat-x top left;
- }
- .navbar{
- position:relative;
- }
- .selector {
- width: 620px;
- margin: 10px 0;
- background-color: white;
- padding: 10px;
- border: 1px solid #BBB;
- }
- .selector p {
- font-size: 14px;
- line-height: 20px;
- }
- #feed {
- margin:0 100px 0 120px;
- }
-
- #doc {
- display: block;
- width: 90px;
- margin: 20px 20px 0 0;
- float: right;
- }
-
- #preview_form {
- position: relative;
- margin: 0 0 0 100px;
- padding-top:35px;
- }
-
- .arrow {
- width:200px;
- position: absolute;
- top: 0;
- right: 46px;
- }
- .arrow p {
- position: absolute;
- top: 0;
- display:block;
- right:75px;
- line-height: 20px;
- }
- .arrow img {
- position: absolute;
- display:block;
- top: 0;
- right:45px;
- }
- .item .attributes {
- padding: 0 0 0 120px;
- }
- .section { padding-top:60px; }
- #id_attach { position:relative; top:-4px;}
- fieldset .help-block { clear:both; display:block;}
- </style>
+ <title>jQuery Preview - Link</title>
</head>
<body>
- <div class="navbar navbar-fixed-top">
- <div class="navbar-inner">
- <div class="container">
- <a class="brand" href="index.html">jQuery Preview</a>
- <ul class="nav">
- <li><a href="status.html">Status</a></li>
- <li><a href="link.html">Link</a></li>
- <li><a href="large.html">Large Link</a></li>
- <li><a href="rich.html">Rich Link</a></li>
- <li><a href="multi.html">Multiple Inputs</a></li>
- <li><a href="editable.html">Editable</a></li>
- </ul>
- </div>
- </div>
- </div>
- <div class="container">
- <div class="row">
- <div class="hero-unit">
- <h1> jQuery Preview <a id="doc" href="https://github.com/embedly/jquery-preview" class="btn btn-primary">Get the Code &raquo;</a></h1>
+ <nav class="top-bar">
+ <ul class="title-area">
+ <li class="name">
+ <h1><a href="index.html">jQuery Preview</a></h1>
+ </li>
+ </ul>
+ <section class="top-bar-section">
+ <ul class="right">
+ <li><a href="status.html">Status</a></li>
+ <li><a href="link.html">Link</a></li>
+ <li><a href="multi.html">Multiple Inputs</a></li>
+ </ul>
+ </section>
+ </nav>
+ <div class="row">
+ <div class="large-12 columns">
+ <div class="panel">
+ <h1> jQuery Preview <a id="doc" href="https://github.com/embedly/jquery-preview" class="button">Get the Code &raquo;</a></h1>
<p>
<a href="https://github.com/embedly/jquery-preview">jQuery Preview</a>
is a plugin that allows users to preview URLs before
submitting them to be saved by an application. Facebook, Google+
and Yammer are all examples of tools with this functionality.
-
-
- <div class="clearfix"></div>
</p>
<form id="preview_form" class="form-vertical" method="post" action=".">
@@ -104,32 +43,33 @@
<p>Try it out.</p>
<img src='../images/arrow.png'>
</div>
- <fieldset>
- <div class="clearfix"></div>
- <input type="text" class="input-xxlarge" name="url" id="id_url" value="http://vimeo.com/18150336" />
- <button id="id_attach" class="btn btn-primary">Attach</button>
- <span class="help-block">Enter your own url or select attach.</span>
- </fieldset>
- <!-- Placeholder that tells Preview where to put the loading icon-->
- <div class="loading">
- <img src='../images/loading-rectangle.gif'>
+ <div class="row collapse">
+ <div class="large-8 columns">
+ <input type="text" class="input-xxlarge" name="url" id="id_url" value="http://vimeo.com/18150336" />
+ </div>
+ <div class="large-3 end columns">
+ <a id="id_attach" class="button postfix">Attach</a>
+ </div>
</div>
+ <!-- Placeholder that tells Preview where to put the loading icon-->
+
<!-- Placeholder that tells Preview where to put the selector-->
- <div class="selector"></div>
+ <div class="row">
+ <div class="large-11 columns end">
+ <div class="selector-wrapper"></div>
+ </div>
+ </div>
</form>
<div id="feed"></div>
-
-
-
-
</div>
- <div class="span12 columns">
+ <div class="row">
+ <div class="large-11 large-centered columns">
<!--
Generated from the README.rest.
run python watch.py --html
-->
-<p>jQuery Preview is a plugin by <a class="reference external" href="http://embed.ly">Embedly</a> that allows
+p>jQuery Preview is a plugin by <a class="reference external" href="http://embed.ly">Embedly</a> that allows
developers to create tools that enable users to share links with rich previews
attached. This method of letting users select thumbnails, edit title and
description has been adopted as the norm across the web. This plugin allows
@@ -144,8 +84,6 @@
<ul class="simple">
<li><a class="reference external" href="http://embedly.github.com/jquery-preview/demo/link.html">Link</a></li>
<li><a class="reference external" href="http://embedly.github.com/jquery-preview/demo/status.html">Status</a></li>
-<li><a class="reference external" href="http://embedly.github.com/jquery-preview/demo/large.html">Large Embeds</a></li>
-<li><a class="reference external" href="http://embedly.github.com/jquery-preview/demo/rich.html">Rich Embeds</a></li>
<li><a class="reference external" href="http://embedly.github.com/jquery-preview/demo/multi.html">Multipe Inputs</a></li>
</ul>
<div class="section" id="basic-setup">
@@ -177,12 +115,22 @@
<pre class="literal-block">
&lt;form action=&quot;/update&quot; method=&quot;POST&quot;&gt;
&lt;input id=&quot;url&quot; type=&quot;text&quot; name=&quot;url&quot;/&gt;
+
+ &lt;!-- Placeholder that tells Preview where to put the selector--&gt;
+ &lt;div class=&quot;selector-wrapper&quot;&gt;&lt;/div&gt;
&lt;/form&gt;
</pre>
<p>You then need to tell preview what field to listen to:</p>
<pre class="literal-block">
&lt;script&gt;
+ // Set up preview.
$('#url').preview({key:'your_embedly_key'})
+
+ // On submit add hidden inputs to the form.
+ $('form').on('submit', function(){
+ $(this).addInputs($('#url').data('preview'));
+ return true;
+ });
&lt;/script&gt;
</pre>
<p>And you are done setting up the front end solution for jQuery Preview. The
@@ -193,61 +141,41 @@
</div>
<div class="section" id="how-it-works">
<h1>How it Works</h1>
-<p>The plugin works by listening to the field on <tt class="docutils literal">paste</tt>, <tt class="docutils literal">keyup</tt>, <tt class="docutils literal">attach</tt>
-and <tt class="docutils literal">blur</tt>. If a URL is entered a call is made to Embedly's <a class="reference external" href="http://embed.ly/docs/endpoints/1/preview">Preview</a> endpoint and the result is then
-passed to the Selector object and all the elements are added to the form as
-hidden inputs. The Selector is then rendered using a Mustache template. The
-user can use the selector to pick a thumbnail associated with the URL.</p>
-<p>When the form is submitted each attribute it passed back to the action URL.
-The server then saves the information and either echos or augments the object
-and passes it back to the fronted. The Display object then renders the obj into
-the feed.</p>
-<p>Each object is infinitely customizable, but the flow is the same. We will go
-over each object and how to customize them.</p>
+<p>The plugin works by listening to the field on <tt class="docutils literal">paste</tt>, <tt class="docutils literal">keyup</tt>, <tt class="docutils literal">preview</tt>
+and <tt class="docutils literal">blur</tt>. If a URL is entered a call is made to Embedly's <a class="reference external" href="http://embed.ly/docs/extract/api/endpoints/1/extract">Extract</a> endpoint and the
+result is then passed to the <tt class="docutils literal">render</tt> function. <tt class="docutils literal">render</tt> uses <tt class="docutils literal">sprintf</tt>
+to create a selector, so the user can pick a thumbnail associated with the
+URL.</p>
+<p>jQuery Preview just saves all the data and changes associated with the URL on
+the input using jQuery's data. It's up to the developer to choose how they want
+to deal with that data on submit. jQuery Preview comes with a helper function
+<tt class="docutils literal">addInputs</tt> so all the data can be added to the form. This is the code to
+enable it:</p>
+<pre class="literal-block">
+// On submit add hidden inputs to the form.
+$('form').on('submit', function(){
+ $(this).addInputs($('#url').data('preview'));
+ return true;
+});
+</pre>
+<p>The developer can then choose how they wish to display the preview in the feed.
+We will show some simple examples for handling this in the documentation.</p>
</div>
-<div class="section" id="objects">
-<h1>Objects</h1>
-<p>There are 3 basic objects that you should get familiar with in order to
-customize the selector.</p>
-<div class="section" id="id2">
-<h2>Preview</h2>
-<p>Preview holds all the logic for calls to Embedly. You shouldn't have to do a
-ton of customizations here.</p>
-<div class="section" id="functions">
-<h3>Functions</h3>
+<div class="section" id="id1">
+<h1>Preview</h1>
+<p>Preview holds all the logic for calls to Embedly and rendering the selector.</p>
+<div class="section" id="options">
+<h2>Options</h2>
<dl class="docutils">
-<dt><tt class="docutils literal">submit</tt></dt>
-<dd><p class="first">Called when the form is submitted and all the attributes are passed in as
-an object. If you want to do something other than a POST to the action you
-can overwrite the method like so:</p>
-<pre class="last literal-block">
-var preview = {
- // Instead of posting to the server, send the object to display for
- // rendering to the feed.
- submit : function(e, data){
- e.preventDefault();
- this.display.create(data);
- }
-}
-$('#url').preview({preview:preview});
-</pre>
-</dd>
<dt><tt class="docutils literal">bind</tt></dt>
-<dd><p class="first">Called when the preview is set up to bind all the listeners to the file and
-the form. If you want to listen on custom events you can call it like so:</p>
+<dd><p class="first">By default preview will bind to <tt class="docutils literal">keyup</tt>, <tt class="docutils literal">blur</tt> and <tt class="docutils literal">paste</tt> if you
+wish to define your own bindings you can set this attribute to false:</p>
<pre class="last literal-block">
-var preview = {
- bind : function(){
- // Instead of listening to the field, wait for the user to click
- // 'Attach Link'.
- $('a.attach').bind('click', this.fetch);
+// Don't bind the listeners
+$('#url').preview({bind:false});
- // Still bind the form to ``_submit`` that cleans up the data
- // before calling ``submit``
- $(this.form).bind('submit', this._submit);
- }
-}
-$('#url').preview({preview:preview});
+// When a use hits Attach, trigger a preview of the link.
+$('a.attach').on('click', function(){$('#url').trigger('preview')});
</pre>
</dd>
<dt><tt class="docutils literal">error</tt></dt>
@@ -256,299 +184,171 @@
from them. The default behavior is to not notify the user. To notify them
you can use:</p>
<pre class="last literal-block">
-var preview = {
- error : function(){
+$('#url').preview({
+ error: function(obj){
alert('The URL you entered was not processed.');
- }
-}
-$('#url').preview({preview:preview});
+ }});
</pre>
</dd>
-<dt><tt class="docutils literal">callback</tt></dt>
+<dt><tt class="docutils literal">success</tt></dt>
<dd><p class="first">Called after a URL has been successfully rendered by the selector. Useful
if you want to change state after the URL has been successfully processed.
-For example if you want to change a button from 'Share' to 'Attach' you can
+For example if you want to change a button from 'Share' to 'Submit' you can
do it like so:</p>
<pre class="last literal-block">
-var preview = {
- callback : function(){
- $('button').text('Attach');
+$('#url').preview({
+ success : function(obj){
+ $('button').text('Submit');
}
-}
-$('#url').preview({preview:preview});
-</pre>
-</dd>
-</dl>
-</div>
-<div class="section" id="using-attach">
-<h3>Using Attach</h3>
-<p>If you missed it jQuery Preview listens to a special event <tt class="docutils literal">attach</tt> on the
-field. If you wish to have a two step process of attaching the link to the
-status and then sharing the link you can set something up like this:</p>
-<pre class="literal-block">
-&lt;form id=&quot;preview_form&quot; class=&quot;form-vertical&quot; method=&quot;post&quot; action=&quot;.&quot;&gt;
- &lt;input type=&quot;text&quot; name=&quot;url&quot; id=&quot;id_url&quot; value=&quot;http://vimeo.com/18150336&quot; /&gt;
- &lt;button id=&quot;id_attach&quot;&gt;Attach&lt;/button&gt;
-&lt;/form&gt;
-&lt;script&gt;
-$('#id_attach').bind('click', function(e){
- e.preventDefault();
- $('#id_url').trigger('attach');
-
- $('#id_attach').replaceWith($('&lt;input/&gt;').attr({
- 'id' : 'id_submit',
- 'value' : 'Share',
- 'type' : 'submit'
- }));
});
-&lt;/script&gt;
</pre>
-<p>This triggers the <tt class="docutils literal">attach</tt> event on the field and that tells Preview to go
-fetch the url and show it in the Selector.</p>
-</div>
-</div>
-<div class="section" id="selector">
-<h2>Selector</h2>
-<p>Builds the selector that allows users to pick out a thumbnail.</p>
-<div class="section" id="attributes">
-<h3>Attributes</h3>
-<dl class="docutils">
-<dt><tt class="docutils literal">type</tt></dt>
-<dd><p class="first">There are 3 different built-in types that a developer can choose from</p>
-<ul class="simple">
-<li><a class="reference external" href="http://embedly.github.com/jquery-preview/demo/link.html">small</a></li>
-<li><a class="reference external" href="http://embedly.github.com/jquery-preview/demo/large.html">large</a></li>
-<li><a class="reference external" href="http://embedly.github.com/jquery-preview/demo/rich.html">rich</a></li>
-</ul>
-<p class="last">Each allows for a different type of feel. We suggest using one of them to
-get started and customizing from there.</p>
</dd>
-<dt><tt class="docutils literal">template</tt></dt>
-<dd><p class="first">If you would like to use your own Mustache template to render the selector
-you can add it here. The default looks like:</p>
-<pre class="literal-block">
-&lt;div id=&quot;selector&quot; class=&quot;small&quot;&gt;
- &lt;div class=&quot;thumbnail&quot;&gt;
- &lt;div class=&quot;controls&quot;&gt;
- &lt;a class=&quot;left&quot; href=&quot;#&quot;&gt;&amp;#9664;&lt;/a&gt;
- &lt;a class=&quot;right&quot; href=&quot;#&quot;&gt;&amp;#9654;&lt;/a&gt;
- &lt;a class=&quot;nothumb&quot; href=&quot;#&quot;&gt;&amp;#10005;&lt;/a&gt;
- &lt;/div&gt;
- &lt;div class=&quot;items&quot;&gt;
- &lt;ul class=&quot;images&quot;&gt;
- {{#images}}
- &lt;li&gt;&lt;img src=&quot;{{url}}&quot;/&gt;&lt;/li&gt;
- {{/images}}
- &lt;/ul&gt;
- &lt;/div&gt;
- &lt;/div&gt;
- &lt;div class=&quot;attributes&quot;&gt;
- &lt;a class=&quot;title&quot; href=&quot;#&quot;&gt;{{title}}&lt;/a&gt;
- &lt;p&gt;&lt;a class=&quot;description&quot; href=&quot;#&quot;&gt;{{description}}&lt;/a&gt;&lt;/p&gt;
- &lt;span class=&quot;meta&quot;&gt;
- &lt;img class=&quot;favicon&quot; src=&quot;{{favicon_url}}&quot;&gt;
- &lt;a class=&quot;provider&quot; href=&quot;{{provider_url}}&quot;&gt;{{provider_display}}&lt;/a&gt;
- &lt;/span&gt;
- &lt;/div&gt;
- &lt;div class=&quot;action&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;close&quot;&gt;&amp;#10005;&lt;/a&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-<p>By default Preview passes the following attributes to the template</p>
-<ul class="simple">
-<li><tt class="docutils literal">type</tt></li>
-<li><tt class="docutils literal">original_url</tt></li>
-<li><tt class="docutils literal">url</tt></li>
-<li><tt class="docutils literal">title</tt></li>
-<li><tt class="docutils literal">description</tt></li>
-<li><tt class="docutils literal">favicon_url</tt></li>
-<li><tt class="docutils literal">provider_url</tt></li>
-<li><tt class="docutils literal">provider_display</tt></li>
-<li><tt class="docutils literal">safe</tt></li>
-<li><tt class="docutils literal">html</tt></li>
-<li><tt class="docutils literal">thumbnail_url</tt></li>
-<li><tt class="docutils literal">object_type</tt></li>
-<li><tt class="docutils literal">image_url</tt></li>
-</ul>
-<p>All these responses are defined <a class="reference external" href="http://embed.ly/docs/endpoints/1/preview#response">here</a> except for the
-following:</p>
+</dl>
+<p><tt class="docutils literal">render</tt></p>
+<blockquote>
+<p>If you would like to create your own selector, overwrite <tt class="docutils literal">render</tt> with
+your own function. We will go in more detail, in the writing your own
+selector function, but here is the simplest example I could think of.</p>
+<blockquote>
<dl class="docutils">
-<dt><tt class="docutils literal">object_type</tt></dt>
-<dd>The oEmbed of the preview response. Will be either <tt class="docutils literal">video</tt>,
-<tt class="docutils literal">rich</tt>, <tt class="docutils literal">photo</tt> or <tt class="docutils literal">link</tt>. We use this to decide weather to
-embed the <tt class="docutils literal">html</tt> attribute.</dd>
-<dt><tt class="docutils literal">image_url</tt></dt>
-<dd>If the <tt class="docutils literal">type</tt> is <tt class="docutils literal">image</tt> or the <tt class="docutils literal">object_type</tt> is <tt class="docutils literal">photo</tt> an
-<tt class="docutils literal">image_url</tt> will be the full sized image URL.</dd>
-<dt><tt class="docutils literal">thumbnail_url</tt></dt>
-<dd>The URL that the user selected as the thumbnail for the embed.</dd>
+<dt>$('#url').preview({</dt>
+<dd><dl class="first docutils">
+<dt>render: function(obj, options){</dt>
+<dd>// Put the title after the input.
+$(this).after(obj.title);</dd>
</dl>
-<p><tt class="docutils literal">template</tt> can also be a dictionary if you want to use different
-templates for different <a href="#id3"><span class="problematic" id="id4">``</span></a>object_type``s. For instance:</p>
-<div class="system-message" id="id3">
-<p class="system-message-title">System Message: WARNING/2 (<tt class="docutils">&lt;string&gt;</tt>, line 265); <em><a href="#id4">backlink</a></em></p>
-Inline literal start-string without end-string.</div>
-<pre class="last literal-block">
-template : {
- 'video' : 'Video Template',
- 'rich' : 'Rich Template',
- 'photo' : 'Photo Template',
- 'link' : 'Link Template'
-}
-</pre>
+<div class="system-message">
+<p class="system-message-title">System Message: WARNING/2 (<tt class="docutils">&lt;string&gt;</tt>, line 153)</p>
+Definition list ends without a blank line; unexpected unindent.</div>
+<p class="last">}});</p>
</dd>
</dl>
+</blockquote>
+</blockquote>
</div>
-<div class="section" id="id5">
-<h3>Functions</h3>
+<div class="section" id="events">
+<h2>Events</h2>
<dl class="docutils">
-<dt><tt class="docutils literal">title</tt></dt>
-<dd><p class="first">Allows users to click on the title in the selector and edit the text. It is
-set up like this in the <tt class="docutils literal">bind</tt> function:</p>
+<dt><tt class="docutils literal">preview</tt></dt>
+<dd><p class="first">Manually trigger the input to fetch the URL. This is generally only needed
+if <tt class="docutils literal">bind</tt> is set to false:</p>
<pre class="last literal-block">
-$('.selector .title').bind('click', this.title);
+$('a.attach').on('click', function(){$('#url').trigger('preview')});
</pre>
</dd>
-<dt><tt class="docutils literal">description</tt></dt>
-<dd><p class="first">Allows users to click on the description in the selector and edit the text.
-It is set up like this in the <tt class="docutils literal">bind</tt> function:</p>
+<dt><tt class="docutils literal">loading</tt></dt>
+<dd><p class="first">Triggered when the request is being made to the API endpoint:</p>
<pre class="last literal-block">
-$('.selector .description').bind('click', this.description);
+$('#url').on('loading', function(){$('.loading').show()});
</pre>
</dd>
-<dt><tt class="docutils literal">scroll</tt></dt>
-<dd><p class="first">Simple logic that scrolls the image left and right in selector. It takes a
-direction (<tt class="docutils literal">left</tt> or <tt class="docutils literal">right</tt>) and an event. We set it up like so:</p>
+<dt><tt class="docutils literal">loaded</tt></dt>
+<dd><p class="first">Triggered when a response has been returned from the API endpoint:</p>
<pre class="last literal-block">
-$('.selector .left').bind('click', _.bind(this.scroll, {}, 'left'));
-$('.selector .right').bind('click', _.bind(this.scroll, {}, 'right'));
+$('#url').on('loaded', function(){$('.loading').hide()});
</pre>
</dd>
-<dt><tt class="docutils literal">nothumb</tt></dt>
-<dd><p class="first">Logic that tells the form NOT to use a thumbnail when rendering a preview.
-<tt class="docutils literal">bind</tt> calls it like so:</p>
-<pre class="last literal-block">
-$('.selector .nothumb').bind('click', this.nothumb);
-</pre>
+<dt><tt class="docutils literal">close</tt></dt>
+<dd><p class="first">Triggered when the selector should be closed. If you are implementing a
+custom selector, you must listen for this event.</p>
+<blockquote class="last">
+<dl class="docutils">
+<dt>var render = function(data, options){</dt>
+<dd><p class="first">// Insert selector
+$(this).on('close', function(){</p>
+<div class="system-message">
+<p class="system-message-title">System Message: ERROR/3 (<tt class="docutils">&lt;string&gt;</tt>, line 181)</p>
+Unexpected indentation.</div>
+<blockquote>
+//Remove selector.</blockquote>
+<div class="system-message">
+<p class="system-message-title">System Message: WARNING/2 (<tt class="docutils">&lt;string&gt;</tt>, line 182)</p>
+Block quote ends without a blank line; unexpected unindent.</div>
+<p class="last">});</p>
</dd>
-<dt><tt class="docutils literal">clear</tt></dt>
-<dd>Clears the selector, hides it and all the hidden inputs.</dd>
-<dt><tt class="docutils literal">update</tt></dt>
-<dd><p class="first">Update can be set to an input field to also update the value in the
-selector. This is useful if you want to have a different input field for
-title and selector. We use this from the Preview object like so:</p>
-<pre class="literal-block">
-$('#id_title').bind('keyup', function(e){
- $.preview.selector.update(e);
-});
-</pre>
-<p class="last">The element must have a <tt class="docutils literal">name</tt> attribute of the <tt class="docutils literal">title</tt> or
-<tt class="docutils literal">description</tt>.</p>
+</dl>
+<div class="system-message">
+<p class="system-message-title">System Message: WARNING/2 (<tt class="docutils">&lt;string&gt;</tt>, line 183)</p>
+Definition list ends without a blank line; unexpected unindent.</div>
+<p>}</p>
+</blockquote>
</dd>
-<dt><tt class="docutils literal">bind</tt></dt>
-<dd>Sets the listeners for the above functions. Don't overwrite this function
-unless you know what you are doing.</dd>
-<dt><tt class="docutils literal">render</tt></dt>
-<dd>Uses Mustache to render the template chosen by the developer. Don't
-overwrite this function unless you know what you are doing.</dd>
</dl>
</div>
</div>
-<div class="section" id="display">
-<h2>Display</h2>
-<p>Create's a Feed item for a given object.</p>
-<div class="section" id="id6">
-<h3>Attributes</h3>
-<dl class="docutils">
-<dt><tt class="docutils literal">type</tt></dt>
-<dd><p class="first">There are 3 different built-in types that a developer can choose from</p>
-<ul class="simple">
-<li><a class="reference external" href="http://embedly.github.com/jquery-preview/demo/link.html">small</a></li>
-<li><a class="reference external" href="http://embedly.github.com/jquery-preview/demo/status.html">status</a></li>
-<li><a class="reference external" href="http://embedly.github.com/jquery-preview/demo/rich.html">rich</a></li>
-</ul>
-<p class="last">Each allows for a different type of feel. We suggest using one of them to
-get started and customizing from there. The <tt class="docutils literal">status</tt> type is the same as
-<tt class="docutils literal">small</tt>, but takes an additional field <tt class="docutils literal">status</tt> and displays that in
-the item as well.</p>
-</dd>
-<dt><tt class="docutils literal">template</tt></dt>
-<dd><p class="first">The Mustache template that you would like to use to render the obj. The
-default one looks like this:</p>
+<div class="section" id="custom-selector">
+<h1>Custom Selector</h1>
+<p>It's actually recommended that you build a custom selector. While the default
+one is pretty good, you are going to want to customize it more than just the
+default styles. Here's how you can create your own.</p>
+<div class="section" id="render">
+<h2>Render</h2>
+<p>To create our own selector you just need to pass in a function into the
+<tt class="docutils literal">render</tt> option when calling preview:</p>
<pre class="literal-block">
-&lt;div class=&quot;item&quot;&gt;
- &lt;div class=&quot;thumbnail&quot;&gt;
- &lt;a href=&quot;{{original_url}}&quot;&gt;
- &lt;img title=&quot;{{title}}&quot; src=&quot;{{thumbnail_url}}&quot;/&gt;
- &lt;span class=&quot;overlay&quot;&gt;&lt;/span&gt;
- &lt;/a&gt;
- &lt;/div&gt;
- &lt;div class=&quot;attributes&quot;&gt;
- &lt;a class=&quot;title&quot; href=&quot;{{original_url}}&quot;&gt;{{title}}&lt;/a&gt;
- &lt;p class=&quot;description&quot;&gt;{{description}}&lt;/p&gt;
- &lt;span class=&quot;meta&quot;&gt;
- &lt;img class=&quot;favicon&quot; src=&quot;{{favicon_url}}&quot;/&gt;
- &lt;a class=&quot;provider&quot; href=&quot;{{provider_url}}&quot;&gt;{{provider_display}}&lt;/a&gt;
- &lt;/span&gt;
- &lt;div&gt;
-&lt;/div&gt;
+var render = function(data, options){
+ // custom render
+};
+$('#url').preview({render:render});
</pre>
-<p>By default Preview passes the following attributes to the template</p>
-<ul class="simple">
-<li><tt class="docutils literal">type</tt></li>
-<li><tt class="docutils literal">original_url</tt></li>
-<li><tt class="docutils literal">url</tt></li>
-<li><tt class="docutils literal">title</tt></li>
-<li><tt class="docutils literal">description</tt></li>
-<li><tt class="docutils literal">favicon_url</tt></li>
-<li><tt class="docutils literal">provider_url</tt></li>
-<li><tt class="docutils literal">provider_display</tt></li>
-<li><tt class="docutils literal">safe</tt></li>
-<li><tt class="docutils literal">html</tt></li>
-<li><tt class="docutils literal">thumbnail_url</tt></li>
-<li><tt class="docutils literal">object_type</tt></li>
-<li><tt class="docutils literal">image_url</tt></li>
-</ul>
-<p>All these responses are defined <a class="reference external" href="http://embed.ly/docs/endpoints/1/preview#response">here</a> except for the
-following:</p>
-<dl class="docutils">
-<dt><tt class="docutils literal">object_type</tt></dt>
-<dd>The oEmbed of the preview response. Will be either <tt class="docutils literal">video</tt>,
-<tt class="docutils literal">rich</tt>, <tt class="docutils literal">photo</tt> or <tt class="docutils literal">link</tt>. We use this to decide weather to
-embed the <tt class="docutils literal">html</tt> attribute.</dd>
-<dt><tt class="docutils literal">image_url</tt></dt>
-<dd>If the <tt class="docutils literal">type</tt> is <tt class="docutils literal">image</tt> or the <tt class="docutils literal">object_type</tt> is <tt class="docutils literal">photo</tt> an
-<tt class="docutils literal">image_url</tt> will be the full sized image URL.</dd>
-<dt><tt class="docutils literal">thumbnail_url</tt></dt>
-<dd>The URL that the user selected as the thumbnail for the embed.</dd>
-</dl>
-<p><tt class="docutils literal">template</tt> can also be a dictionary if you want to use different
-templates for different <a href="#id11"><span class="problematic" id="id12">``</span></a>object_type``s. For instance:</p>
-<div class="system-message" id="id11">
-<p class="system-message-title">System Message: WARNING/2 (<tt class="docutils">&lt;string&gt;</tt>, line 400); <em><a href="#id12">backlink</a></em></p>
-Inline literal start-string without end-string.</div>
-<pre class="last literal-block">
-template : {
- 'video' : 'Video Template',
- 'rich' : 'Rich Template',
- 'photo' : 'Photo Template',
- 'link' : 'Link Template'
-}
+<p>The render function should accept a <tt class="docutils literal">data</tt> argument that is the response from
+the <tt class="docutils literal">extract</tt> endpoint. <tt class="docutils literal">options</tt> is also passed in if you would like to
+set custom options in preview. <tt class="docutils literal">this</tt> is the HTMLElement of the input. This
+will let you listen for events or trigger events on the input.</p>
+<p>The simplest version of a custom selector looks like so:</p>
+<pre class="literal-block">
+var render = function(data, options){
+ // Add the title after the input.
+ $(this).after('&lt;span&gt;'+data.title+'&lt;/span&gt;');
+
+ // remove the selector
+ $(this).on('close', function(){
+ $(this).siblings('span').remove();
+ });
+};
</pre>
-</dd>
-<dt><tt class="docutils literal">selector</tt></dt>
-<dd>Tells create where to prepend the Feed item html to. The default value is
-<tt class="docutils literal">#feed</tt>.</dd>
-</dl>
-</div>
-<div class="section" id="id13">
-<h3>Functions</h3>
-<dl class="docutils">
-<dt><tt class="docutils literal">create</tt></dt>
-<dd>Uses Mustache to render the template chosen by the developer. Don't
-overwrite this function unless you know what you are doing.</dd>
-</dl>
</div>
</div>
+<div class="section" id="display">
+<h1>Display</h1>
+<p>jQuery Preview has no concept of displaying the item in a feed. This should be
+handled by the developer. This is a simple example from one of the demos:</p>
+<pre class="literal-block">
+$('#preview_form').on('submit', function(){
+ // Preview data.
+ var preview = $('#id_url').data('preview');
+
+ // Close the selector
+ $('#id_url').trigger('close');
+ $('#id_url').val('');
+
+ // Create a post using mustache, i.e. the nice way.
+ var template = ['&lt;div class=&quot;row&quot;&gt;',
+ '&lt;div class=&quot;large-3 columns&quot;&gt;',
+ '&lt;img class=&quot;thumb&quot; src=&quot;{{thumbnail_url}}&quot;&gt;&lt;/img&gt;',
+ '&lt;/div&gt;',
+ '&lt;div class=&quot;large-9 column&quot;&gt;',
+ '&lt;a href=&quot;{{original_url}}&quot;&gt;{{title}}&lt;/a&gt;',
+ '&lt;p&gt;{{description}}&lt;/p&gt;',
+ '&lt;/div&gt;',
+ '&lt;/div&gt;'].join('');
+
+ html = $(Mustache.to_html(template, preview));
+ html.data('preview', preview);
+ html.on('click', function(){
+ var data = $(this).data('preview');
+ // Insert the video or rich object.
+ if (data.media.type === 'video' || data.media.type === 'rich'){
+ $(this).html(data.media.html);
+ return false;
+ }
+ return true;
+ });
+ // Display the item in the feed.
+ $('#feed').append(html);
+ return false;
+});
+</pre>
</div>
<div class="section" id="server-side">
<h1>Server Side</h1>
@@ -591,29 +391,29 @@
<p>To get you going even faster, Embedly hosts all the files you need on
scripts.embed.ly. The latest version is available here:</p>
<pre class="literal-block">
-http://scripts.embed.ly/p/0.2/jquery.preview.min.js
-http://scripts.embed.ly/p/0.2/jquery.preview.full.min.js
-http://scripts.embed.ly/p/0.2/css/preview.css
-</pre>
-<p>The most current version of jQuery Preview will be available here:</p>
-<pre class="literal-block">
-http://scripts.embed.ly/p/jquery.preview.min.js
-http://scripts.embed.ly/p/jquery.preview.full.min.js
-http://scripts.embed.ly/p/css/preview.css
+http://scripts.embed.ly/p/0.3/jquery.preview.min.js
+http://scripts.embed.ly/p/0.3/jquery.preview.full.min.js
+http://scripts.embed.ly/p/0.3/css/preview.css
</pre>
</div>
<div class="section" id="development">
<h1>Development</h1>
<p>The code is broken down into modules in the <tt class="docutils literal">src</tt> folder and built by
-<tt class="docutils literal">watch.py</tt>. If you want to modify anything in <tt class="docutils literal">preview.jquery.js</tt> please
-find the code in the module and run <tt class="docutils literal">python watch.py</tt> to build
+<tt class="docutils literal">grunt</tt>. If you want to modify anything in <tt class="docutils literal">preview.jquery.js</tt> please
+find the code in the module and run <tt class="docutils literal">grunt run</tt> to build
<tt class="docutils literal">preview.jquery.js</tt>. <tt class="docutils literal">preview.css</tt> is a <a class="reference external" href="http://sass-lang.com/">sass</a>
generated file. Please modify <tt class="docutils literal">preview.scss</tt> by running <tt class="docutils literal">sass <span class="pre">--watch</span>
preview.scss:preview.css</tt></p>
</div>
<div class="section" id="changelog">
<h1>Changelog</h1>
-<div class="section" id="id14">
+<div class="section" id="id2">
+<h2>0.3</h2>
+<ul class="simple">
+<li>Full rewrite to simplify adding jQuery to a site.</li>
+</ul>
+</div>
+<div class="section" id="id3">
<h2>0.2</h2>
<ul class="simple">
<li>Added the $.preview so it can be used before the a form is initialized.</li>
@@ -623,43 +423,65 @@
</div>
<!-- End Generated -->
+ </div>
</div>
</div>
- <div class="clear"></div>
</div>
<script>
$(document).ready(function(){
- var preview = {
- submit : function(e, data){
- e.preventDefault();
- this.display.create(data);
- }
- }
- $('#id_url').preview({key:'c31f5208f04511e0b79e4040d3dc5c07', // Sign up for a key: http://embed.ly/pricing
- preview:preview,
- autoplay : 1,
- maxwidth: 600});
+
+ $('#id_url').preview({key: 'c31f5208f04511e0b79e4040d3dc5c07', // Sign up for a key: http://embed.ly/pricing
+ bind: false,
+ query : {
+ autoplay : 1,
+ maxwidth: 600
+ }})
+ .on('loading', function(){
+ $(this).prop('disabled', true);
+ $('form .button').html('<i class="icon-spinner icon-spin"></i>');
+ }).on('loaded', function(){
+ $(this).prop('disabled', false);
+ $('form .button').text('Share');
+ $('.arrow p').text('Now Share it!');
+ })
$('#id_attach').bind('click', function(e){
- e.preventDefault();
- $('#id_url').trigger('attach');
+ if ($(this).text() == 'Attach'){
+ $('#id_url').trigger('preview');
+ } else {
- $('.arrow p').text('Now Share it!')
+ var preview = $('#id_url').data('preview');
+ $('#id_url').trigger('close');
+ $('#id_url').val('');
- $('#id_attach').replaceWith($('<input/>').attr({
- 'id' : 'id_submit',
- 'class' : 'btn btn-primary',
- 'value' : 'Share',
- 'type' : 'submit'
- }));
- });
+ // Create a post using mustache, i.e. the nice way.
+ var template = ['<div class="row">',
+ '<div class="large-3 columns">',
+ '<img class="thumb" src="{{thumbnail_url}}"></img>',
+ '</div>',
+ '<div class="large-9 column">',
+ '<a href="{{original_url}}">{{title}}</a>',
+ '<p>{{description}}</p>',
+ '</div>',
+ '</div>'].join('');
+ html = $(Mustache.to_html(template, preview));
+ html.data('preview', preview);
+ html.on('click', function(){
+ var data = $(this).data('preview');
+ // Insert the video or rich object.
+ if (data.media.type === 'video' || data.media.type === 'rich'){
+ $(this).html(data.media.html);
+ return false;
+ }
+ return true;
+ })
+ $('#feed').append(html);
+ }
+ });
});
-
-
-
</script>
</body>
View
101 demo/link.html
@@ -6,77 +6,61 @@
<script src="../lib/jquery.embedly.js" type="text/javascript"></script>
<script src="../lib/mustache.js" type="text/javascript"></script>
<script src="../dist/jquery.preview.js" type="text/javascript"></script>
- <link rel="stylesheet" href="common/css/bootstrap.min.css">
+ <link rel="stylesheet" href="common/css/foundation.min.css">
+ <link rel="stylesheet" href="common/css/font-awesome.min.css">
+ <link rel="stylesheet" href="common/css/demo.css" />
<link rel="stylesheet" href="../css/preview.css" />
<title>jQuery Preview - Link</title>
- <style>
- body {
- background:#fff url(common/img/grid-18px-masked.png) repeat-x top left;
- }
- .navbar{
- position:relative;
- }
- </style>
</head>
<body>
- <div class="navbar navbar-fixed-top">
- <div class="navbar-inner">
- <div class="container">
- <a class="brand" href="index.html">jQuery Preview</a>
- <ul class="nav">
- <li><a href="status.html">Status</a></li>
- <li class="active"><a href="link.html">Link</a></li>
- <li><a href="rich.html">Rich Link</a></li>
- <li><a href="multi.html">Multiple Inputs</a></li>
- <li><a href="editable.html">Editable</a></li>
- </ul>
- </div>
- </div>
- </div>
- <div class="container">
- <div class="row">
- <div class="span10 columns offset3">
- <h3>Share a link</h3>
- <form id="preview_form" class="form-vertical" method="post" action=".">
- <fieldset>
- <input type="text" class="xlarge" name="url" id="id_url" />
- <input id="id_submit" type="submit" class="btn btn-primary" value="Share"/>
- <span class="help-block">Enter a url.</span>
+ <nav class="top-bar">
+ <ul class="title-area">
+ <li class="name">
+ <h1><a href="index.html">jQuery Preview</a></h1>
+ </li>
+ </ul>
+ <section class="top-bar-section">
+ <ul class="right">
+
+ <li><a href="status.html">Status</a></li>
+ <li class="active"><a href="link.html">Link</a></li>
+ <li><a href="multi.html">Multiple Inputs</a></li>
+ </ul>
+ </section>
+ </nav>
- </fieldset>
- <!-- Placeholder that tells Preview where to put the loading icon-->
- <div class="loading">
- <img src='../images/loading-rectangle.gif'>
+ <div class="row">
+ <div class="large-8 large-centered columns">
+ <h3>Share a link</h3>
+ <form id="preview_form" class="form-vertical" method="post" action=".">
+ <div class="row collapse">
+ <div class="large-9 small-9 columns">
+ <input type="text" class="xlarge" name="url" id="id_url" placeholder="Enter a URL"/>
</div>
- <!-- Placeholder that tells Preview where to put the selector-->
- <div class="selector-wrapper"></div>
- </form>
- </div>
- </div>
- <div class="row">
- <div id="feed" class="span8 columns offset3">
+ <div class="large-3 small-3 columns">
+ <a class="button postfix">Share</a>
+ </div>
+ </div>
+ <!-- Placeholder that tells Preview where to put the selector-->
+ <div class="selector-wrapper"></div>
+ </form>
+ <div id="feed">
</div>
</div>
- <div class="clear"></div>
</div>
<script>
- $('#id_url').preview({key: 'internal'})//'c31f5208f04511e0b79e4040d3dc5c07'}) // Sign up for a key: http://embed.ly/pricing
+ $('#id_url').preview({key: 'c31f5208f04511e0b79e4040d3dc5c07'}) // Sign up for a key: http://embed.ly/pricing
.on('loading', function(){