Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Update

Just cleaned the HTML, update LESS to 1.2.2 and some other fixes,
testing the grid as plugin from semantic.gs
  • Loading branch information...
commit e65581baeb60e5ac3fde0f92672acb72f9a16870 1 parent fa5efe5
@carloselias authored
Showing with 912 additions and 2,707 deletions.
  1. 0  .gitignore
  2. 0  LICENSE
  3. 0  README.md
  4. +0 −1,085 examples/index.html
  5. +0 −9 examples/javascripts/less-1.2.1.min.js
  6. +0 −373 examples/stylesheets/darkblue.less
  7. +0 −6 examples/stylesheets/demo.less
  8. +0 −638 examples/stylesheets/demo.temp.css
  9. BIN  examples/stylesheets/mnmliconsv22-perkins.eot
  10. +0 −171 examples/stylesheets/mnmliconsv22-perkins.svg
  11. BIN  examples/stylesheets/mnmliconsv22-perkins.ttf
  12. BIN  examples/stylesheets/mnmliconsv22-perkins.woff
  13. +0 −371 examples/ui.html
  14. 0  package.json
  15. 0  src/apple-touch-icon-114x114-precomposed.png
  16. 0  src/apple-touch-icon-57x57-precomposed.png
  17. 0  src/apple-touch-icon-72x72-precomposed.png
  18. 0  src/apple-touch-icon-precomposed.png
  19. 0  src/apple-touch-icon.png
  20. 0  src/examples/demo.less
  21. 0  src/examples/index.html
  22. 0  src/humans.txt
  23. 0  src/images/2dots.png
  24. 0  src/images/cross.png
  25. 0  src/images/perkins-logo.png
  26. 0  src/images/tcloth.png
  27. 0  src/images/tnoise.png
  28. 0  src/images/vr.gif
  29. +8 −16 src/index.html
  30. +0 −9 src/javascripts/less-1.2.1.min.js
  31. +9 −0 src/javascripts/less-1.2.2.min.js
  32. 0  src/javascripts/media-query.js
  33. 0  src/robots.txt
  34. +4 −28 src/stylesheets/app.less
  35. +1 −1  src/stylesheets/perkins.less
  36. 0  src/stylesheets/perkins/colors.less
  37. 0  src/stylesheets/perkins/feedback.less
  38. 0  src/stylesheets/perkins/form.less
  39. 0  src/stylesheets/perkins/grid.less
  40. 0  src/stylesheets/perkins/mixins.less
  41. 0  src/stylesheets/perkins/reset.less
  42. 0  src/stylesheets/perkins/shapes.less
  43. 0  src/stylesheets/perkins/structure.less
  44. 0  src/stylesheets/perkins/table.less
  45. 0  src/stylesheets/perkins/ui.less
  46. 0  src/stylesheets/plugins/perkins-compat/1.0.less
  47. +2 −0  src/stylesheets/plugins/semantic/.gitignore
  48. +178 −0 src/stylesheets/plugins/semantic/LICENSE.txt
  49. +13 −0 src/stylesheets/plugins/semantic/README.md
  50. +19 −0 src/stylesheets/plugins/semantic/changelog.md
  51. +36 −0 src/stylesheets/plugins/semantic/examples/fixed/fixed.html
  52. +41 −0 src/stylesheets/plugins/semantic/examples/fixed/fixed.less
  53. +34 −0 src/stylesheets/plugins/semantic/examples/fluid/fluid.html
  54. +33 −0 src/stylesheets/plugins/semantic/examples/fluid/fluid.less
  55. +36 −0 src/stylesheets/plugins/semantic/examples/maxwidth/maxwidth.html
  56. +41 −0 src/stylesheets/plugins/semantic/examples/maxwidth/maxwidth.less
  57. +41 −0 src/stylesheets/plugins/semantic/examples/maxwidth/maxwidth.scss
  58. +47 −0 src/stylesheets/plugins/semantic/examples/nested/nested.html
  59. +51 −0 src/stylesheets/plugins/semantic/examples/nested/nested.less
  60. +51 −0 src/stylesheets/plugins/semantic/examples/nested/nested.scss
  61. +37 −0 src/stylesheets/plugins/semantic/examples/pushpull/pushpull.html
  62. +47 −0 src/stylesheets/plugins/semantic/examples/pushpull/pushpull.less
  63. +34 −0 src/stylesheets/plugins/semantic/examples/responsive/responsive.html
  64. +42 −0 src/stylesheets/plugins/semantic/examples/responsive/responsive.less
  65. +42 −0 src/stylesheets/plugins/semantic/examples/responsive/responsive.scss
  66. +65 −0 src/stylesheets/plugins/semantic/grid.less
  67. 0  src/stylesheets/plugins/uikit/blue.dark.less
  68. 0  src/stylesheets/plugins/uikit/default.less
  69. 0  src/stylesheets/plugins/uikit/holo.dark.less
  70. 0  src/stylesheets/plugins/uikit/uitest.html
  71. 0  src/stylesheets/plugins/uikit/uitest.less
View
0  .gitignore 100644 → 100755
File mode changed
View
0  LICENSE 100644 → 100755
File mode changed
View
0  README.md 100644 → 100755
File mode changed
View
1,085 examples/index.html
@@ -1,1085 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>perkins</title>
-
- <!--
- Why do not you try changing the old mythical web-safe fonts for a
- more innovative set? I show you an example on how to do it!
- -->
- <link href='http://fonts.googleapis.com/css?family=Signika+Negative:300,700|Cabin+Condensed:700' rel='stylesheet' type='text/css'>
-
- <!--
- The {app.less} file is magic. It loads the perkins configurations,
- establishes your preferences and calls me. You will write all your
- code (or most of it) here, all the time.
- -->
- <link href="stylesheets/demo.less" media="all" rel="stylesheet/less" />
-
- <!--
- I am based in LESS.js to render stylesheets. More information can
- be found at {http://www.lesscss.org/}.
- -->
- <script src="../src/javascripts/less-1.2.1.min.js"></script>
-
- <!--
- Under development, this section allows you to preview your changes
- immediately after saving them on the {app.less} file. However, you
- must remove it once it enters the production stage or it will open
- a bunch of requests to your server to retrieve new changes.
- -->
- <script charset="utf-8">
- //less.env = "development";
- //less.watch();
- </script>
-
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- <!--[if lt IE 7 ]>
- <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
- <script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
- <![endif]-->
-
-</head>
-<body>
-
-
- <!--
- Did you call, sir? I am your new website. This page is an example
- of everything that I can do for you.
-
- I want to share some tricks with you, and I will be talking about
- these if I find an opportunity.
-
- The first one is Sparkup. Basically it's a CSS-like HTML expander
- that you can use together with vim, Textmate and others. The deal
- is that you write CSS selectors, press a keystroke and voilá, you
- have a new section with little or no effort.
-
- You can get it from {https://github.com/rstacruz/sparkup}. Follow
- the code and see how your mockup can become a beautiful layout.
-
- How to write HTML with Sparkup? Easy, just read the snippets that
- are shown before each block; try doing it by yourself.
- -->
-
-
- <!-- Sparkup: header > h1.logo -->
- <header>
- <h1 class="logo">perkins</h1>
- </header>
-
-
- <!--
- See? it was cool! Declare the {header}, add a {div} with a {.row}
- class as a child and then add another child having two classes...
- and so on. Basically you use CSS 3 selectors instead of writing a
- bunch of tedious tags. Once you get used to it, you can have time
- to help others and spread the word about it!
-
- The dimensions of the elements with {.row} class are defined in a
- file named {perkins.config.less}. Changing the page width becomes
- easy with this method: just change the {@width} value.
-
- How does that work? Probably you have heard of "960 grid system",
- or the 1kb CSS grid by Taylor Tate. Well, this is the second tip:
- designing with a grid is much like designing with tables, relying
- on {float: left} to organize it.
-
- Most web designs are defined in columns; sometimes it is just one
- column with content, sometimes a sidebar with links... There is a
- large number of ways to layout your site. Grids are like columns,
- but you define a high number of columns (let us say, 16, which is
- what I have by default) and define the width of your divs using a
- number of columns.
-
- In the previous HTML block, you have a div with classes {.column}
- and {.grid-16}, meaning that that div width equals to 16 columns,
- or 960px.
-
- The grid has a width of 960px, 16 columns and 10 pixels of margin
- by default, but you can adjust these values to anything you want.
- There is one limitation: it is defined that a grid cannot have 37
- columns or more. It is a ridiculously large value, though! Nobody
- uses more than 24 columns, even in complex designs.
- -->
-
- <!-- Sparkup: #content > #headings + #typography + #paragraph + #helpers + #frameworkCoreFeatures -->
- <div id="content">
- <div id="headings">
-
- <!-- Sparkup: .row -->
- <div class="row">
-
- <!-- Sparkup: .column.grid-12 > h4.f-h4 + h1 + h2 + h3 + h4 + h5 + h6 -->
- <div class="column grid-12">
- <h4 class="f-h4">Headings</h4>
- <h1>h1: Lorem ipsum dolor sit amet</h1>
- <h2>h2: Lorem ipsum dolor sit amet</h2>
- <h3>h3: Lorem ipsum dolor sit amet</h3>
- <h4>h4: Lorem ipsum dolor sit amet</h4>
- <h5>h5: Lorem ipsum dolor sit amet</h5>
- <h6>h6: Lorem ipsum dolor sit amet</h6>
- <h4 class="f-h4">Paragraph</h4>
- <p>p: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </div>
-
-
- <!--
- No, this part is not written with Sparkup. The next trick to show
- is not really a trick but a bunch of useful elements, part of the
- HTML5 specification.
-
- It is not unknown that HTML5 came to scene to rule the world, but
- for this to happen you must take advantage of HTML5 tags. Not all
- of these are described here: some are deprecated and possibly new
- ones will be added to this list.
- -->
-
-
- <div class="column grid-4">
- <h4 class="f-h4">Elements</h4>
- <a href="javascript:void(0);">&lt;a&gt;</a><br />
- <abbr title="Abbreviation">&lt;abbr&gt;</abbr><br />
- <address>&lt;address&gt;</address>
- <code>&lt;code&gt;</code><br />
- <del>&lt;del&gt;</del><br />
- <dfn title="Text Definition">&lt;dfn&gt;</dfn><br />
- <em>&lt;em&gt;</em><br />
- <ins>&lt;ins&gt;</ins><br />
- <kbd>&lt;kbd&gt;</kbd><br />
- <mark>&lt;mark&gt;</mark><br />
- <meter>&lt;meter&gt;</meter><br />
- <output>&lt;output&gt;</output><br />
- <progress value="50" max="100">Progress: 50</progress><br />
- <q>&lt;q&gt;</q><br />
- <s>&lt;s&gt;</s><br />
- <samp>&lt;sample&gt;</samp><br />
- <small>&lt;small&gt;</small><br />
- <span>&lt;span&gt;</span><br />
- <strong>&lt;strong&gt;</strong><br />
- <span>This is <sub>&lt;sub&gt;</sub></span><br />
- <span>This is <sup>&lt;sup&gt;</sup></span><br />
- <var>&lt;var&gt;</var><br />
- <p>This is a super<wbr />cali<wbr />fragi<wbr />listic<wbr />espi<wbr />halidous word separated by &lt;wbr&gt; tags</p>
- </div>
-
- </div>
- </div>
- <div id="typography">
-
- <!-- Sparkup: .row > .column.grid-6 > h4.f-h4 + ul > li*3 + li > ul > li*4 < < li < < .column.grid-5 + .column.grid-5 -->
- <div class="row">
- <div class="column grid-6">
- <h4 class="f-h4">List</h4>
- <ul>
- <li>One lorem ipsum element</li>
- <li>Another dolor sit amet element</li>
- <li>A longer text to demonstrate how do long text elements look, consectetuer adipiscing elit</li>
- <li>
- <ul>
- <li>One lorem ipsum element</li>
- <li>Another dolor sit amet element</li>
- <li>A longer text to demonstrate how do long text elements look, consectetuer adipiscing elit</li>
- <li>This is the last item</li>
- </ul>
- </li>
- <li>This is the last item</li>
- </ul>
- </div>
- <div class="column grid-5">
- <h4 class="f-h4">Ordered List</h4>
- <ol>
- <li>One lorem ipsum element</li>
- <li>Another dolor sit amet element</li>
- <li>A longer text to demonstrate how do long text elements look, consectetuer adipiscing elit</li>
- <li>
- <ol>
- <li>One lorem ipsum element</li>
- <li>Another dolor sit amet element</li>
- <li>A longer text to demonstrate how do long text elements look, consectetuer adipiscing elit</li>
- <li>This is the last item</li>
- </ol>
- </li>
- <li>This is the last item</li>
- </ol>
- </div>
- <div class="column grid-5">
- <h4 class="f-h4">Definition Lists</h4>
- <dl>
- <dt>Element to describe</dt>
- <dd>A complete description on this element</dd>
- <dt>Another element to describe</dt>
- <dd>A complete description for this element, but using a longer text area, to show how it looks</dd>
- <dt>Element to describe</dt>
- <dd>Less text</dd>
- <dt>An element to describe</dt>
- <dd>There is a lot of text here describing an element inside the Perkins design framework. I must remind you all that the Perkins design framework is an excellent way to design the web faster.</dd>
- </dl>
- </div>
- </div>
- </div>
-
-
- <!--
- Creating a demonstration page including all the features included
- in Perkins is very challenging. We will stop writing Sparkup, but
- you should give it a try. Draw a mockup in a piece of paper, take
- note on the elements to be used and try to write it with Sparkup.
-
- Copy the {head} section from this page to your prototype, and the
- mockup created by you will have an ugly but functional format. It
- is much better if you write {.column .grid-X .demogrid}; your div
- structure will be painted with a light blue color.
-
- Was it worth? Congratulations! You created a mockup of a page and
- it did not take more than 5 minutes!
-
- The following is blah blah blah... blockquotes, paragraphs, code,
- tables... There is not much to comment here, other than encourage
- you to check how these elements are styled. The real fun on these
- can be found in my {stylesheets/perkins} directory.
-
- Do not worry, I know that this is being very productive, and that
- you want this HTML code to be larger and have more tips on pretty
- HTML design. I also know that I am sometimes too optimistic about
- what I do. Anyway, there are more comments below, the tour is not
- finished.
- -->
-
-
- <div id="paragraph">
- <div class="row">
- <div class="column grid-8">
- <h4 class="f-h4">A block of code</h4>
-<pre>
-#include &lt;stdio.h&gt;
-
-int main(int argc, char * argv)
-{
- print "Hello World\n";
- return 0;
-}
-</pre>
- </div>
- <div class="column grid-8">
- <h4 class="f-h4">A Blockquote</h4>
- <blockquote>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- </blockquote>
- </div>
- <div class="column grid-16">
- <h4 class="f-h4">A Paragraph</h4>
- <article class="f-articleTest">
- <h1>Sed do eiusmod tempor incididunt</h1>
- <figure class="right">
- <img src="http://lorempixum.com/200/200/technics/1" />
- <figcaption>Random Tech Image</figcaption>
- </figure>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore <strong>et dolore magna aliqua</strong>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <mark>Duis aute irure dolor in reprehenderit</mark> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</p>
- <blockquote class="left">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote>
- <p>Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit <em>esse cillum dolore eu fugiat nulla</em> pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p class="text3Col">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </article>
- </div>
- </div>
- </div>
- <div id="helpers">
- <div class="row">
- <div class="column grid-16">
- <h4 class="f-h4">Simple Data Tabulation</h4>
- <table>
- <tr>
- <td>Ultra</td>
- <td>Simple</td>
- <td>Table</td>
- </tr>
- <tr>
- <td>No th elements</td>
- <td>Some more demonstration texts</td>
- <td>Lorem ipsum dolor sit amet</td>
- </tr>
- </table>
- </div>
- <div class="column grid-16">
- <h4 class="f-h4">Table with design</h4>
- <table class="table" summary="This is the summary">
- <caption>Legend</caption>
- <thead>
- <tr>
- <th scope="col">Author</th>
- <th scope="col">Code</th>
- <th scope="col">City</th>
- <th scope="col">Comment</th>
- <th scope="col">Action</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th>Diego Wolf</th>
- <td>#989238</td>
- <td>Concepcion, Chile</td>
- <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
- <td>
- <a class="btn sbtn" href="javascript:void(0);">Edit</a>
- </td>
- </tr>
- <tr>
- <th>Alberto Catetas</th>
- <td>#989238</td>
- <td>Santiago, Chile</td>
- <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
- <td>
- <a class="btn sbtn" href="javascript:void(0);">Edit</a>
- </td>
- </tr>
- <tr>
- <th>Jhonny Melaslavo</th>
- <td>#989238</td>
- <td>Buenos Aires, Argentina</td>
- <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
- <td>
- <a class="btn sbtn" href="javascript:void(0);">Edit</a>
- </td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <th scope="row">Total</th>
- <td colspan="4">3 Examples</td>
- </tr>
- </tfoot>
- </table>
- </div>
-
-
- <!--
- Back to the amazing stuff. If you are like the ones who wrote me,
- you have been writing HTML since late 90's. For some, the idea of
- including style="text-align:center;" in each tag carries nostalgy
- to their minds. For others, it was a lot of tedious work. For the
- ones who wrote me, it was the latter, hence they taught me how to
- assign trivial styles to classes.
-
- We have:
-
- - .tac for Text Align Center
- - .tal for Text Align Left
- - .tar for Text Align Right
-
- We also have .taj (yes, Justified), but it creates blank areas in
- the resulting design, due to the lack of hyphenation in browsers.
-
- Editor's note: try to understand an explanation given by a lawyer
- about astronomy. The same happens here: a developer tried to give
- an explanation on interface design. Good time for commercials:
-
- If you have questions or suggestions about Perkins, you can write
- the ones who made me to the mailing list located at:
-
- http://groups.google.com/group/perkins-less-devel/
- -->
-
-
- <div class="column grid-16">
- <h4 class="f-h4">Text Alignment</h4>
- <p class="tal">Text to the left</p>
- <p class="tac">Text to the center</p>
- <p class="tar">Text to the right</p>
- <br />
-
-
- <!--
- After a short commercial pause, we are back.
-
- Where did we leave? Ah yes, common styles. Are these amazing? No?
- Well, these were trivial, but the same strategy can be applied to
- unordered lists to create vertical, horizontal and tabbed menues.
-
- And, as you can figure out, we named these conveniently:
-
- - .v-menu is vertical menu.
- - .t-menu is tabbed menu.
- - .h-menu is horizontal menu.
-
- Do you remember your mockup? You can place these elements too, to
- complete your structure. I would recommend not to worry about the
- details of colour, images or other stuff. In rapid development, a
- view is the first priority, but that does not mean the first task
- to do. However, navigation can provide a guide for you on what is
- the first thing that need to be done.
- -->
-
-
- <h4 class="f-h4">Basic Vertical Menu (.v-menu)</h4>
- <ul class="v-menu">
- <li>
- <a href="javascript:void(0);">First link</a>
- </li>
- <li>
- <a href="javascript:void(0);">Second link</a>
- </li>
- <li>
- <a href="javascript:void(0);">Third link</a>
- </li>
- </ul>
- <hr />
-
- <h4 class="f-h4">Basic Horizontal Menu (.h-menu)</h4>
- <ul class="h-menu">
- <li>
- <a href="javascript:void(0);">First link</a>
- </li>
- <li>
- <a href="javascript:void(0);">Second link</a>
- </li>
- <li>
- <a href="javascript:void(0);">Third link</a>
- </li>
- </ul>
- <hr />
- <h4 class="f-h4">Basic Tab Menu (.t-menu)</h4>
- <ul class="t-menu">
- <li>
- <a href="javascript:void(0);">First link</a>
- </li>
- <li>
- <a href="javascript:void(0);">Second link</a>
- </li>
- <li>
- <a href="javascript:void(0);">Third link</a>
- </li>
- </ul>
- </div>
- <br />
- </div>
- </div>
- <div class="row">
- <div class="column grid-10">
- <!--
- We are near to the end of our demonstration. Take a break, grab a
- cup of coffee and think of what you have learnt:
-
- - What is LESS and how it is used to create smarter CSS.
- - How to configure Perkins and be ready to go in a few minutes.
- - How to refresh the changes you make to your stylesheets.
- - How to prototype a Perkins mockup with Sparkup.
- - How to use the Perkins configurable grid.
- - How to use the Perkins classes to avoid common inline styles.
-
- You also have some snippets for:
-
- - Including fonts from the Google Font Repository
- - Supporting HTML5 on older browsers thanks to html5shiv.
- - Common HTML5 elements.
- - Some styles for paragraphs and other block-level elements.
-
- If you decided to play with Perkins, you did also go from 0 to 60
- with a small mockup which can be a beginning for your project, an
- overview on rapid application design.
-
- These things may look nice, but if you take a look on the wayback
- machine {http://www.archive.org/}, you have tools for designing a
- site from 1995: static pages. The most important thing on dynamic
- website building is the design of forms. The following blocks are
- a demonstration of the nice styles that I include on forms. There
- is a lack of advanced attributes such as placeholders. It is your
- mission to implement these as needed.
- -->
-
-
- <h4 class="f-h4">Forms</h4>
- <p class="notice">This is the very first attempt to adapt some flexible Forms into Perkins</p>
- <p>Default Form</p>
- <ul class="form">
- <li><label>Label</label><input type="text"><span class="leftNote">This is a <strong>left</strong> note</span></li>
- <li><label>Label</label><input type="text"><span class="bottomNote">This is a <strong>buttom</strong> note</span></li>
- <li><label>Label</label><select><option></option></select></li>
- <li><label>Label</label><input type="radio"></li>
- <li><label>Label</label><input type="checkbox"></li>
- <li><label>This is a label that is long enough to go onto three lines</label><textarea cols="40" rows="5"></textarea></li>
- </ul>
- </div>
- <div class="column grid-6">
- <!--
- Forms are important but they are nothing without "call to action"
- buttons, that are anchors styled like form buttons.
-
- There are two types of call to action buttons:
-
- - btn for buttons
- - sbtn for small buttons
-
- You can wrap the {btn} class inside other tags like {h1}. It will
- result in a big button due to property inheritance.
- -->
-
- <h4 class="f-h4">Call to action buttons</h4>
- <h1><a class="btn" href="javascript:void(0);">H1 Button</a></h1>
- <h2><a class="btn" href="javascript:void(0);">H2 Button</a></h2>
- <h3><a class="btn" href="javascript:void(0);">H3 Button</a></h3>
- <a class="btn" href="javascript:void(0);">Link Button</a>
- <br />
- <a class="btn sbtn" href="javascript:void(0);">Link Button Modifier</a>
- <br />
- <input type="submit" name="" value="Submit">
- <br />
- <button class="btn" type="button">Button</button>
- </div>
- </div>
- <div class="row">
- <div class="column grid-16">
-
- <!--
- Once the user provides information through forms it is a courtesy
- to provide feedback; the following elements are styled especially
- to achieve this objective.
- -->
-
- <h4 class="f-h4">Feedback</h4>
- <p class="information">Duis aute irure dolor in reprehenderit <a href="javascript:void(0);">in voluptate velit esse cillum</a> dolore eu fugiat nulla pariatur.</p>
- <p class="error">Duis aute irure dolor in reprehenderit <a href="javascript:void(0);">in voluptate velit esse cillum</a> dolore eu fugiat nulla pariatur.</p>
- <p class="notice">Duis aute irure dolor in reprehenderit <a href="javascript:void(0);">in voluptate velit esse cillum</a> dolore eu fugiat nulla pariatur.</p>
- <p class="success">Duis aute irure dolor in reprehenderit <a href="javascript:void(0);">in voluptate velit esse cillum</a> dolore eu fugiat nulla pariatur.</p>
- </div>
- </div>
- </div>
-
-
- <!--
- There are a bunch of undocumented mixins. All that you have to do
- is to read the {stylesheets/perkins/} directory, look at the code
- and read the comments.
-
- The next thing that I have is the mnml icon set. What is so nice?
- It is not really a set of PNG icons but a typography containing a
- bunch of the most used icons. What are the advantages? Of course,
- typographies are resizable just like normal fonts, and you do not
- have to worry about SVG support. The most noticeable disadvantage
- is that you cannot force a typography to have two or more colors.
-
- Anyway, I hope you like it.
- -->
-
-
- <div class="row">
- <div class="column grid-16">
- <h4 class="f-h4">mnml Icons version 2.2</h4>
- <p>A set of minimal icons to help you iconify that feature ;) powered by @font-face</p>
- <p class="notice">In order to use this font you must use the class <em>i</em> eg. <code>&lt;span class="i"&gt;M&lt;/span&gt;</code> this will show a Star <span class="i">M</span></p>
- </div>
- <div class="column grid-2">
- <h1>1: <span class="i">1</span></h1>
- <h1>2: <span class="i">2</span></h1>
- <h1>3: <span class="i">3</span></h1>
- <h1>4: <span class="i">4</span></h1>
- <h1>5: <span class="i">5</span></h1>
- <h1>6: <span class="i">6</span></h1>
- <h1>7: <span class="i">7</span></h1>
- <h1>8: <span class="i">8</span></h1>
- <h1>9: <span class="i">9</span></h1>
- <h1>0: <span class="i">0</span></h1>
- <h1>:: <span class="i">:</span></h1>
- <h1>?: <span class="i">?</span></h1>
- <h1>]: <span class="i">]</span></h1>
- </div>
- <div class="column grid-2">
- <h1>q: <span class="i">q</span></h1>
- <h1>w: <span class="i">w</span></h1>
- <h1>e: <span class="i">e</span></h1>
- <h1>r: <span class="i">r</span></h1>
- <h1>t: <span class="i">t</span></h1>
- <h1>y: <span class="i">y</span></h1>
- <h1>u: <span class="i">u</span></h1>
- <h1>i: <span class="i">i</span></h1>
- <h1>o: <span class="i">o</span></h1>
- <h1>p: <span class="i">p</span></h1>
- <h1>+: <span class="i">+</span></h1>
- <h1>-: <span class="i">-</span></h1>
- <h1>\: <span class="i">\</span></h1>
- </div>
- <div class="column grid-2">
- <h1>a: <span class="i">a</span></h1>
- <h1>s: <span class="i">s</span></h1>
- <h1>d: <span class="i">d</span></h1>
- <h1>f: <span class="i">f</span></h1>
- <h1>g: <span class="i">g</span></h1>
- <h1>h: <span class="i">h</span></h1>
- <h1>j: <span class="i">j</span></h1>
- <h1>k: <span class="i">k</span></h1>
- <h1>l: <span class="i">l</span></h1>
- <h1>ñ: <span class="i">ñ</span></h1>
- <h1>!: <span class="i">!</span></h1>
- <h1>{: <span class="i">{</span></h1>
- <h1>[: <span class="i">[</span></h1>
- </div>
- <div class="column grid-2">
- <h1>z: <span class="i">z</span></h1>
- <h1>x: <span class="i">x</span></h1>
- <h1>c: <span class="i">c</span></h1>
- <h1>v: <span class="i">v</span></h1>
- <h1>b: <span class="i">b</span></h1>
- <h1>n: <span class="i">n</span></h1>
- <h1>m: <span class="i">m</span></h1>
- <h1>,: <span class="i">,</span></h1>
- <h1>.: <span class="i">.</span></h1>
- <h1>;: <span class="i">;</span></h1>
- <h1>&lt;: <span class="i">&lt;</span></h1>
- <h1>&gt;: <span class="i">&gt;</span></h1>
- <h1>^: <span class="i">^</span></h1>
- </div>
- <div class="column grid-2">
- <h1>#: <span class="i">#</span></h1>
- <h1>": <span class="i">"</span></h1>
- <h1>~: <span class="i">~</span></h1>
- <h1>$: <span class="i">$</span></h1>
- <h1>%: <span class="i">%</span></h1>
- <h1>/: <span class="i">/</span></h1>
- <h1>(: <span class="i">(</span></h1>
- <h1>): <span class="i">)</span></h1>
- <h1>=: <span class="i">=</span></h1>
- <h1>*: <span class="i">*</span></h1>
- <h1>|: <span class="i">|</span></h1>
- <h1>}: <span class="i">}</span></h1>
- <h1>_: <span class="i">_</span></h1>
- </div>
- <div class="column grid-2">
- <h1>Q: <span class="i">Q</span></h1>
- <h1>W: <span class="i">W</span></h1>
- <h1>E: <span class="i">E</span></h1>
- <h1>R: <span class="i">R</span></h1>
- <h1>T: <span class="i">T</span></h1>
- <h1>Y: <span class="i">Y</span></h1>
- <h1>U: <span class="i">U</span></h1>
- <h1>I: <span class="i">I</span></h1>
- <h1>O: <span class="i">O</span></h1>
- <h1>P: <span class="i">P</span></h1>
- <h1>A: <span class="i">A</span></h1>
- <h1>S: <span class="i">S</span></h1>
- <h1>Ñ: <span class="i">Ñ</span></h1>
- </div>
- <div class="column grid-2">
- <h1>D: <span class="i">D</span></h1>
- <h1>F: <span class="i">F</span></h1>
- <h1>G: <span class="i">G</span></h1>
- <h1>H: <span class="i">H</span></h1>
- <h1>J: <span class="i">J</span></h1>
- <h1>V: <span class="i">V</span></h1>
- <h1>K: <span class="i">K</span></h1>
- <h1>L: <span class="i">L</span></h1>
- <h1>B: <span class="i">B</span></h1>
- <h1>Z: <span class="i">Z</span></h1>
- <h1>X: <span class="i">X</span></h1>
- <h1>C: <span class="i">C</span></h1>
- <h1>ú: <span class="i">ú</span></h1>
- </div>
- <div class="column grid-2">
- <h1>N: <span class="i">N</span></h1>
- <h1>M: <span class="i">M</span></h1>
- <h1>É: <span class="i">É</span></h1>
- <h1>á: <span class="i">á</span></h1>
- <h1>é: <span class="i">é</span></h1>
- <h1>í: <span class="i">í</span></h1>
- <h1>ó: <span class="i">ó</span></h1>
- <h1>ö: <span class="i">ö</span></h1>
- </div>
- </div>
- </div>
-
-
- <!--
- Did you like the grid? This is a more complete version on how the
- divs are aligned to the left. It provides an easy wireframe tool,
- and a good starting point for your design.
-
- To make things clear, that is the workflow for a good design as I
- understand it:
-
- - Have your wireframe.
- - Review usability.
- - Share it with your customers so they can give you content.
- - Create the page style according to your target audience.
- - Advanced layout design.
- - Review usability again.
- - Polish what you need and you are done!
- -->
-
- <div id="demogrid">
- <div class="row">
- <div class="column grid-16">
- <h4 class="f-h4">Configurable Grid System</h4>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-2 demogrid">
- <p>2 col</p>
- </div>
- <div class="column grid-2 demogrid">
- <p>2 col</p>
- </div>
- <div class="column grid-2 demogrid">
- <p>2 col</p>
- </div>
- <div class="column grid-2 demogrid">
- <p>2 col</p>
- </div>
- <div class="column grid-2 demogrid">
- <p>2 col</p>
- </div>
- <div class="column grid-2 demogrid">
- <p>2 col</p>
- </div>
- <div class="column grid-2 demogrid">
- <p>2 col</p>
- </div>
- <div class="column grid-2 demogrid">
- <p>2 col</p>
- </div>
- <div class="column grid-3 demogrid">
- <p>3 col</p>
- </div>
- <div class="column grid-3 demogrid">
- <p>3 col</p>
- </div>
- <div class="column grid-4 demogrid">
- <p>4 col</p>
- </div>
- <div class="column grid-3 demogrid">
- <p>3 col</p>
- </div>
- <div class="column grid-3 demogrid">
- <p>3 col</p>
- </div>
- <div class="column grid-4 demogrid">
- <p>4 col</p>
- </div>
- <div class="column grid-4 demogrid">
- <p>4 col</p>
- </div>
- <div class="column grid-4 demogrid">
- <p>4 col</p>
- </div>
- <div class="column grid-4 demogrid">
- <p>4 col</p>
- </div>
- <div class="column grid-5 demogrid">
- <p>5 col</p>
- </div>
- <div class="column grid-6 demogrid">
- <p>6 col</p>
- </div>
- <div class="column grid-5 demogrid">
- <p>5 col</p>
- </div>
- <div class="column grid-6 demogrid">
- <p>6 col</p>
- </div>
- <div class="column grid-4 demogrid">
- <p>4 col</p>
- </div>
- <div class="column grid-6 demogrid">
- <p>6 col</p>
- </div>
- <div class="column grid-7 demogrid">
- <p>7 col</p>
- </div>
- <div class="column grid-2 demogrid">
- <p>2 col</p>
- </div>
- <div class="column grid-7 demogrid">
- <p>7 col</p>
- </div>
- <div class="column grid-8 demogrid">
- <p>8 col</p>
- </div>
- <div class="column grid-8 demogrid">
- <p>8 col</p>
- </div>
- <div class="column grid-9 demogrid">
- <p>9 col</p>
- </div>
- <div class="column grid-7 demogrid">
- <p>7 col</p>
- </div>
- <div class="column grid-10 demogrid">
- <p>10 col</p>
- </div>
- <div class="column grid-6 demogrid">
- <p>6 col</p>
- </div>
- <div class="column grid-11 demogrid">
- <p>11 col</p>
- </div>
- <div class="column grid-5 demogrid">
- <p>5 col</p>
- </div>
- <div class="column grid-12 demogrid">
- <p>12 col</p>
- </div>
- <div class="column grid-4 demogrid">
- <p>4 col</p>
- </div>
- <div class="column grid-13 demogrid">
- <p>13 col</p>
- </div>
- <div class="column grid-3 demogrid">
- <p>3 col</p>
- </div>
- <div class="column grid-14 demogrid">
- <p>14 col</p>
- </div>
- <div class="column grid-2 demogrid">
- <p>2 col</p>
- </div>
- <div class="column grid-15 demogrid">
- <p>15 col</p>
- </div>
- <div class="column grid-1 demogrid">
- <p>1 col</p>
- </div>
- <div class="column grid-16 demogrid">
- <p>16 col</p>
- </div>
- </div>
- </div>
-
- <!--
- Was it too boring? Did it remind your online bank or applications
- at your office? It does not have to be that way.
-
- The following section is full of stunning new features; cool ones
- that are not part of what I include for CSS3 handling. Almost all
- the contents that you are watching there are styled using mixins.
-
- What are mixins?
-
- These are CSS3 functions (not really part of CSS3 but are related
- to LESS). Mixins take parameters, perform some operations and the
- returned value is a CSS style applied to an element. Basically, a
- mixin can provide cross-browser functionality. Instead of using a
- collection of browser-specific attributes, a mixing encloses them
- and provide an unique interface to access them directly.
-
- Take the .radius() mixin as an example:
-
- Internally, to implement border-radius across browsers, there are
- a bunch of CSS3 properties. These are:
-
- -moz-border-radius
- -webkit-border-radius
- -o-border-radius
- -ms-border-radius
- border-radius
-
- Ugly thing to have in a CSS stylesheet. I grouped these to ensure
- that every browser supporting border-radius will render pages the
- way we want. If tomorrow Apple releases Safari for iPad, and have
- support for -ios5-border-radius instead of -webkit-border-radius,
- we just modify the mixin and the support is complete. It is easy,
- as easy as multiplying by one.
- -->
-
-
- <div id="frameworkCoreFeatures">
- <div class="row">
- <div class="column grid-16">
- <h4 class="f-h4">Some of the mixins that are included</h4>
- <h5>Font Mixin: <code>.font();</code></h5>
- <pre>
- // expects: <span>@weight</span>, <span>@size</span>, <span>@lineheight</span>, <span>@fontfamily</span>
- // defaults: normal, 16px, 20px, @sans
- // note that the variable @sans can be changed in perkins.config.less
-
- // DEMO:
- .p-fontmixin {
- <span>.font(bold, 28px, 32px, "Georgia", Times New Roman, serif);</span>
- text-align: center;
- }
- </pre>
- <div class="result">
- <h5>Demo Output:</h5>
- <p class="p-fontmixin">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </div>
- <h5>Radius Mixin: <code>.radius();</code></h5>
- <pre>
- // expect: <span>@radius</span>
- // default: 5px
- // note that you can get fancy with it and selectively apply rounding to certain corners
-
- // DEMO:
- .p-radius {
- <span>.radius(0 10px 5px 40px);</span>
- border: 1px solid darken(@orange, 20%);
- background: @orange;
- padding: 10px;
- text-align: center;
- color: @white;
- }
- </pre>
- <div class="result">
- <h5>Demo Output:</h5>
- <p class="p-radius">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </div>
- <h5>Rotate Mixin: <code>.rotate();</code></h5>
- <pre>
- // expect: <span>@deg</span>
- // default: -45deg
-
- // DEMO:
- .p-rotate {
- <span>.rotate();</span>
- position: absolute;
- top: -135px;
- left: 200px;
- background: @red;
- padding: 10px;
- color: @white;
- .bs();
- }
- </pre>
- <div class="result">
- <h5>Demo Output:</h5>
- <p class="p-rotate">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </div>
- <h5>Box Shadow Mixin: <code>.bs();</code></h5>
- <pre>
- // expects: <span>@bsval</span>, <span>@due</span>
- // default: 0px 0px 0.83em #333, 0 0 0 transparent
-
- // DEMO:
- .p-bs {
- <span>.bs(0 2px 5px #222, inset 0 1px 3px #fff);</span>
- width: 200px;
- margin: -20px auto 10px;
- padding: 10px;
- .radius();
- #gradient > .v();
- color: @gray-light;
- .ts(0 -1px 1px @black);
- }
- </pre>
- <div class="result">
- <h5>Demo Output:</h5>
- <p class="p-bs">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </div>
- <h5>Gradient Mixin: <code>#gradient > .v();</code> <span class="i">+</span> <code>#gradient > .h();</code> <span class="i">+</span> <code>#gradient > .hline();</code></h5>
- <pre>
- // .v() expects: <span>@startColor</span>, <span>@endColor</span>, <span>@img</span>
- // default: #555, #333, none
- // .h() expects: <span>@startColor</span>, <span>@endColor</span>, <span>@img</span>
- // default: #555, #333, none
- // .hline() expects: <span>@startColor</span>, <span>@midColor1</span>, <span>@midColor2</span>, <span>@endColor</span>, <span>@img</span>
- // default: #B0BAC5, #9DA7B2, #919CA8, #7E8A98, none
-
- // DEMO:
- .p-gradientV {
- <span>#gradient > .v();</span>
- width: 400px;
- margin: -20px auto 10px;
- padding: 10px;
- .radius();
- color: @white;
- }
- .p-gradientH {
- <span>#gradient > .h(#69B9DA, #007BAD, url(../images/cross.png));</span>
- width: 400px;
- margin: 10px auto 10px;
- padding: 10px;
- .radius();
- color: @white;
- }
- .p-gradientHline {
- <span>#gradient > .hline();</span>
- width: 400px;
- margin: 10px auto 10px;
- padding: 10px;
- .radius();
- color: @white;
- .ts(0 -1px 2px #333);
- }
- </pre>
- <div class="result">
- <h5>Demo Output:</h5>
- <p class="p-gradientV">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p class="p-gradientH">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p class="p-gradientHline">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </div>
- </div>
- <div class="column grid-16">
- <p class="tac information">The framework has more mixins that you can use. See <code>p-mixins.less</code> to view the rest of them</p>
- </div>
- </div>
- </div>
- <!--
- That is all. A footer element contains information on the company
- and the page designer. For me, it is the end of the tutorial. But
- there are more things to read and understand. Some resources are:
-
- - p.erkins.com/ (My website)
- - groups.google.com/group/perkins-less-devel (Mailing list)
- - code.google.com/p/perkins-less (SVN repository)
- - @carloselias, @alvaroveliz and @hagarelvikingo at Twitter.
-
- See you on the next release!
- -->
-
- <footer>
- <div class="row">
- <div class="column grid-16">
- <p class="tac"><strong>perkins</strong> is under MIT License</p>
- <p class="tac"><small>Copyleft 2011 - <a href="http://carloselias.cl">Carlos El&iacute;as</a> and the <strong>perkins</strong> crew</small></p>
- </div>
- </div>
- </footer>
-</body>
-</html>
-
View
9 examples/javascripts/less-1.2.1.min.js
@@ -1,9 +0,0 @@
-//
-// LESS - Leaner CSS v1.2.1
-// http://lesscss.org
-//
-// Copyright (c) 2009-2011, Alexis Sellier
-// Licensed under the Apache 2.0 License.
-//
-(function(a,b){function c(b){return a.less[b.split("/")[1]]}function m(){var a=document.getElementsByTagName("style");for(var b=0;b<a.length;b++)a[b].type.match(k)&&(new d.Parser).parse(a[b].innerHTML||"",function(c,d){var e=d.toCSS(),f=a[b];f.type="text/css",f.styleSheet?f.styleSheet.cssText=e:f.innerHTML=e})}function n(a,b){for(var c=0;c<d.sheets.length;c++)o(d.sheets[c],a,b,d.sheets.length-(c+1))}function o(b,c,e,f){var g=a.location.href.replace(/[#?].*$/,""),i=b.href.replace(/\?.*$/,""),j=h&&h.getItem(i),k=h&&h.getItem(i+":timestamp"),l={css:j,timestamp:k};/^(https?|file):/.test(i)||(i.charAt(0)=="/"?i=a.location.protocol+"//"+a.location.host+i:i=g.slice(0,g.lastIndexOf("/")+1)+i);var m=i.match(/([^\/]+)$/)[1];s(b.href,b.type,function(a,g){if(!e&&l&&g&&(new Date(g)).valueOf()===(new Date(l.timestamp)).valueOf())r(l.css,b),c(null,b,{local:!0,remaining:f});else try{(new d.Parser({optimization:d.optimization,paths:[i.replace(/[\w\.-]+$/,"")],mime:b.type,filename:m})).parse(a,function(d,e){if(d)return w(d,i);try{c(d,e,a,b,{local:!1,lastModified:g,remaining:f}),u(document.getElementById("less-error-message:"+q(i)))}catch(d){w(d,i)}})}catch(h){w(h,i)}},function(a,b){throw new Error("Couldn't load "+b+" ("+a+")")})}function q(a){return a.replace(/^[a-z]+:\/\/?[^\/]+/,"").replace(/^\//,"").replace(/\?.*$/,"").replace(/\.[^\.\/]+$/,"").replace(/[^\.\w-]+/g,"-").replace(/\./g,":")}function r(a,b,c){var d,e=b.href?b.href.replace(/\?.*$/,""):"",f="less:"+(b.title||q(e));(d=document.getElementById(f))===null&&(d=document.createElement("style"),d.type="text/css",d.media=b.media||"screen",d.id=f,document.getElementsByTagName("head")[0].appendChild(d));if(d.styleSheet)try{d.styleSheet.cssText=a}catch(g){throw new Error("Couldn't reassign styleSheet.cssText.")}else(function(a){d.childNodes.length>0?d.firstChild.nodeValue!==a.nodeValue&&d.replaceChild(a,d.firstChild):d.appendChild(a)})(document.createTextNode(a));c&&h&&(v("saving "+e+" to cache."),h.setItem(e,a),h.setItem(e+":timestamp",c))}function s(a,b,c,e){function i(b,c,d){b.status>=200&&b.status<300?c(b.responseText,b.getResponseHeader("Last-Modified")):typeof d=="function"&&d(b.status,a)}var f=t(),h=g?!1:d.async;typeof f.overrideMimeType=="function"&&f.overrideMimeType("text/css"),f.open("GET",a,h),f.setRequestHeader("Accept",b||"text/x-less, text/css; q=0.9, */*; q=0.5"),f.send(null),g?f.status===0||f.status>=200&&f.status<300?c(f.responseText):e(f.status,a):h?f.onreadystatechange=function(){f.readyState==4&&i(f,c,e)}:i(f,c,e)}function t(){if(a.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(b){return v("browser doesn't support AJAX."),null}}function u(a){return a&&a.parentNode.removeChild(a)}function v(a){d.env=="development"&&typeof console!="undefined"&&console.log("less: "+a)}function w(a,b){var c="less-error-message:"+q(b),e='<li><label>{line}</label><pre class="{class}">{content}</pre></li>',f=document.createElement("div"),g,h,i=[],j=a.filename||b;f.id=c,f.className="less-error-message",h="<h3>"+(a.message||"There is an error in your .less file")+"</h3>"+'<p>in <a href="'+j+'">'+j+"</a> ";var k=function(a,b,c){a.extract[b]&&i.push(e.replace(/\{line\}/,parseInt(a.line)+(b-1)).replace(/\{class\}/,c).replace(/\{content\}/,a.extract[b]))};a.stack?h+="<br/>"+a.stack.split("\n").slice(1).join("<br/>"):a.extract&&(k(a,0,""),k(a,1,"line"),k(a,2,""),h+="on line "+a.line+", column "+(a.column+1)+":</p>"+"<ul>"+i.join("")+"</ul>"),f.innerHTML=h,r([".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #dd6666;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.line {","color: #ff0000;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),f.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),d.env=="development"&&(g=setInterval(function(){document.body&&(document.getElementById(c)?document.body.replaceChild(f,document.getElementById(c)):document.body.insertBefore(f,document.body.firstChild),clearInterval(g))},10))}Array.isArray||(Array.isArray=function(a){return Object.prototype.toString.call(a)==="[object Array]"||a instanceof Array}),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c=this.length>>>0;for(var d=0;d<c;d++)d in this&&a.call(b,this[d],d,this)}),Array.prototype.map||(Array.prototype.map=function(a){var b=this.length>>>0,c=new Array(b),d=arguments[1];for(var e=0;e<b;e++)e in this&&(c[e]=a.call(d,this[e],e,this));return c}),Array.prototype.filter||(Array.prototype.filter=function(a){var b=[],c=arguments[1];for(var d=0;d<this.length;d++)a.call(c,this[d])&&b.push(this[d]);return b}),Array.prototype.reduce||(Array.prototype.reduce=function(a){var b=this.length>>>0,c=0;if(b===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var d=arguments[1];else do{if(c in this){d=this[c++];break}if(++c>=b)throw new TypeError}while(!0);for(;c<b;c++)c in this&&(d=a.call(null,d,this[c],c,this));return d}),Array.prototype.indexOf||(Array.prototype.indexOf=function(a){var b=this.length,c=arguments[1]||0;if(!b)return-1;if(c>=b)return-1;c<0&&(c+=b);for(;c<b;c++){if(!Object.prototype.hasOwnProperty.call(this,c))continue;if(a===this[c])return c}return-1}),Object.keys||(Object.keys=function(a){var b=[];for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&b.push(c);return b}),String.prototype.trim||(String.prototype.trim=function(){return String(this).replace(/^\s\s*/,"").replace(/\s\s*$/,"")});var d,f;typeof environment=="object"&&{}.toString.call(environment)==="[object Environment]"?(typeof a=="undefined"?d={}:d=a.less={},f=d.tree={},d.mode="rhino"):typeof a=="undefined"?(d=exports,f=c("./tree"),d.mode="node"):(typeof a.less=="undefined"&&(a.less={}),d=a.less,f=a.less.tree={},d.mode="browser"),d.Parser=function(b){function t(){j=m[i],k=h,n=h}function u(){m[i]=j,h=k,n=h}function v(){h>n&&(m[i]=m[i].slice(h-n),n=h)}function w(a){var b,c,d,e,f,j,k,l;if(a instanceof Function)return a.call(o.parsers);if(typeof a=="string")b=g.charAt(h)===a?a:null,d=1,v();else{v();if(!(b=a.exec(m[i])))return null;d=b[0].length}if(b){l=h+=d,j=h+m[i].length-d;while(h<j){e=g.charCodeAt(h);if(e!==32&&e!==10&&e!==9)break;h++}return m[i]=m[i].slice(d+(h-l)),n=h,m[i].length===0&&i<m.length-1&&i++,typeof b=="string"?b:b.length===1?b[0]:b}}function x(a,b){var c=w(a);if(!!c)return c;y(b||(typeof a=="string"?"expected '"+a+"' got '"+g.charAt(h)+"'":"unexpected token"))}function y(a,b){throw{index:h,type:b||"Syntax",message:a}}function z(a){return typeof a=="string"?g.charAt(h)===a:a.test(m[i])?!0:!1}function A(a,b){return a.filename&&b.filename&&a.filename!==b.filename?o.imports.contents[a.filename]:g}function B(a,b){for(var c=a,d=-1;c>=0&&b.charAt(c)!=="\n";c--)d++;return{line:typeof a=="number"?(b.slice(0,a).match(/\n/g)||"").length:null,column:d}}function C(a,b){var c=A(a,b),d=B(a.index,c),e=d.line,f=d.column,g=c.split("\n");this.type=a.type||"Syntax",this.message=a.message,this.filename=a.filename||b.filename,this.index=a.index,this.line=typeof e=="number"?e+1:null,this.callLine=a.call&&B(a.call,c)+1,this.callExtract=g[B(a.call,c)],this.stack=a.stack,this.column=f,this.extract=[g[e-1],g[e],g[e+1]]}var g,h,i,j,k,l,m,n,o,q=this,r=function(){},s=this.imports={paths:b&&b.paths||[],queue:[],files:{},contents:{},mime:b&&b.mime,error:null,push:function(a,c){var e=this;this.queue.push(a),d.Parser.importer(a,this.paths,function(b,d,f){e.queue.splice(e.queue.indexOf(a),1),e.files[a]=d,e.contents[a]=f,b&&!e.error&&(e.error=b),c(b,d),e.queue.length===0&&r()},b)}};return this.env=b=b||{},this.optimization="optimization"in this.env?this.env.optimization:1,this.env.filename=this.env.filename||null,o={imports:s,parse:function(a,e){var j,k,p,q,s,t,u=[],v,x=null;h=i=n=l=0,m=[],g=a.replace(/\r\n/g,"\n"),m=function(a){var c=0,d=/[^"'`\{\}\/\(\)]+/g,e=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,f=0,h,i=a[0],j,k;for(var l=0,m,n;l<g.length;l++){d.lastIndex=l,(h=d.exec(g))&&h.index===l&&(l+=h[0].length,i.push(h[0])),m=g.charAt(l),e.lastIndex=l,!k&&!j&&m==="/"&&(n=g.charAt(l+1),(n==="/"||n==="*")&&(h=e.exec(g))&&h.index===l&&(l+=h[0].length,i.push(h[0]),m=g.charAt(l)));if(m==="{"&&!k&&!j)f++,i.push(m);else if(m==="}"&&!k&&!j)f--,i.push(m),a[++c]=i=[];else if(m==="("&&!k&&!j)i.push(m),j=!0;else if(m===")"&&!k&&j)i.push(m),j=!1;else{if(m==='"'||m==="'"||m==="`")k?k=k===m?!1:k:k=m;i.push(m)}}if(f>0)throw{type:"Syntax",message:"Missing closing `}`",filename:b.filename};return a.map(function(a){return a.join("")})}([[]]);try{j=new f.Ruleset([],w(this.parsers.primary)),j.root=!0}catch(y){return e(new C(y,b))}j.toCSS=function(a){var e,g,h;return function(e,g){var h=[],i;e=e||{},typeof g=="object"&&!Array.isArray(g)&&(g=Object.keys(g).map(function(a){var b=g[a];return b instanceof f.Value||(b instanceof f.Expression||(b=new f.Expression([b])),b=new f.Value([b])),new f.Rule("@"+a,b,!1,0)}),h=[new f.Ruleset(null,g)]);try{var j=a.call(this,{frames:h}).toCSS([],{compress:e.compress||!1})}catch(k){throw new C(k,b)}if(i=o.imports.error)throw i instanceof C?i:new C(i,b);return e.yuicompress&&d.mode==="node"?c("./cssmin").compressor.cssmin(j):e.compress?j.replace(/(\s)+/g,"$1"):j}}(j.eval);if(h<g.length-1){h=l,t=g.split("\n"),s=(g.slice(0,h).match(/\n/g)||"").length+1;for(var z=h,A=-1;z>=0&&g.charAt(z)!=="\n";z--)A++;x={type:"Parse",message:"Syntax Error on line "+s,index:h,filename:b.filename,line:s,column:A,extract:[t[s-2],t[s-1],t[s]]}}this.imports.queue.length>0?r=function(){e(x,j)}:e(x,j)},parsers:{primary:function(){var a,b=[];while((a=w(this.mixin.definition)||w(this.rule)||w(this.ruleset)||w(this.mixin.call)||w(this.comment)||w(this.directive))||w(/^[\s\n]+/))a&&b.push(a);return b},comment:function(){var a;if(g.charAt(h)!=="/")return;if(g.charAt(h+1)==="/")return new f.Comment(w(/^\/\/.*/),!0);if(a=w(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new f.Comment(a)},entities:{quoted:function(){var a,b=h,c;g.charAt(b)==="~"&&(b++,c=!0);if(g.charAt(b)!=='"'&&g.charAt(b)!=="'")return;c&&w("~");if(a=w(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new f.Quoted(a[0],a[1]||a[2],c)},keyword:function(){var a;if(a=w(/^[_A-Za-z-][_A-Za-z0-9-]*/))return f.colors.hasOwnProperty(a)?new f.Color(f.colors[a].slice(1)):new f.Keyword(a)},call:function(){var a,c,d=h;if(!(a=/^([\w-]+|%|progid:[\w\.]+)\(/.exec(m[i])))return;a=a[1].toLowerCase();if(a==="url")return null;h+=a.length;if(a==="alpha")return w(this.alpha);w("("),c=w(this.entities.arguments);if(!w(")"))return;if(a)return new f.Call(a,c,d,b.filename)},arguments:function(){var a=[],b;while(b=w(this.entities.assignment)||w(this.expression)){a.push(b);if(!w(","))break}return a},literal:function(){return w(this.entities.dimension)||w(this.entities.color)||w(this.entities.quoted)},assignment:function(){var a,b;if((a=w(/^\w+(?=\s?=)/i))&&w("=")&&(b=w(this.entity)))return new f.Assignment(a,b)},url:function(){var a;if(g.charAt(h)!=="u"||!w(/^url\(/))return;return a=w(this.entities.quoted)||w(this.entities.variable)||w(this.entities.dataURI)||w(/^[-\w%@$\/.&=:;#+?~]+/)||"",x(")"),new f.URL(a.value||a.data||a instanceof f.Variable?a:new f.Anonymous(a),s.paths)},dataURI:function(){var a;if(w(/^data:/)){a={},a.mime=w(/^[^\/]+\/[^,;)]+/)||"",a.charset=w(/^;\s*charset=[^,;)]+/)||"",a.base64=w(/^;\s*base64/)||"",a.data=w(/^,\s*[^)]+/);if(a.data)return a}},variable:function(){var a,c=h;if(g.charAt(h)==="@"&&(a=w(/^@@?[\w-]+/)))return new f.Variable(a,c,b.filename)},color:function(){var a;if(g.charAt(h)==="#"&&(a=w(/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/)))return new f.Color(a[1])},dimension:function(){var a,b=g.charCodeAt(h);if(b>57||b<45||b===47)return;if(a=w(/^(-?\d*\.?\d+)(px|%|em|rem|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn)?/))return new f.Dimension(a[1],a[2])},javascript:function(){var a,b=h,c;g.charAt(b)==="~"&&(b++,c=!0);if(g.charAt(b)!=="`")return;c&&w("~");if(a=w(/^`([^`]*)`/))return new f.JavaScript(a[1],h,c)}},variable:function(){var a;if(g.charAt(h)==="@"&&(a=w(/^(@[\w-]+)\s*:/)))return a[1]},shorthand:function(){var a,b;if(!z(/^[@\w.%-]+\/[@\w.-]+/))return;if((a=w(this.entity))&&w("/")&&(b=w(this.entity)))return new f.Shorthand(a,b)},mixin:{call:function(){var a=[],c,d,e,i=h,j=g.charAt(h),k=!1;if(j!=="."&&j!=="#")return;while(c=w(/^[#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/))a.push(new f.Element(d,c,h)),d=w(">");w("(")&&(e=w(this.entities.arguments))&&w(")"),w(this.important)&&(k=!0);if(a.length>0&&(w(";")||z("}")))return new f.mixin.Call(a,e,i,b.filename,k)},definition:function(){var a,b=[],c,d,e,i,j;if(g.charAt(h)!=="."&&g.charAt(h)!=="#"||z(/^[^{]*(;|})/))return;t();if(c=w(/^([#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+)\s*\(/)){a=c[1];while(e=w(this.entities.variable)||w(this.entities.literal)||w(this.entities.keyword)){e instanceof f.Variable?w(":")?(i=x(this.expression,"expected expression"),b.push({name:e.name,value:i})):b.push({name:e.name}):b.push({value:e});if(!w(","))break}x(")"),w(/^when/)&&(j=x(this.conditions,"expected condition")),d=w(this.block);if(d)return new f.mixin.Definition(a,b,d,j);u()}}},entity:function(){return w(this.entities.literal)||w(this.entities.variable)||w(this.entities.url)||w(this.entities.call)||w(this.entities.keyword)||w(this.entities.javascript)||w(this.comment)},end:function(){return w(";")||z("}")},alpha:function(){var a;if(!w(/^\(opacity=/i))return;if(a=w(/^\d+/)||w(this.entities.variable))return x(")"),new f.Alpha(a)},element:function(){var a,b,c,d;c=w(this.combinator),a=w(/^(?:\d+\.\d+|\d+)%/)||w(/^(?:[.#]?|:*)(?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/)||w("*")||w(this.attribute)||w(/^\([^)@]+\)/),a||w("(")&&(d=w(this.entities.variable))&&w(")")&&(a=new f.Paren(d));if(a)return new f.Element(c,a,h);if(c.value&&c.value.charAt(0)==="&")return new f.Element(c,null,h)},combinator:function(){var a,b=g.charAt(h);if(b===">"||b==="+"||b==="~"){h++;while(g.charAt(h)===" ")h++;return new f.Combinator(b)}if(b==="&"){a="&",h++,g.charAt(h)===" "&&(a="& ");while(g.charAt(h)===" ")h++;return new f.Combinator(a)}if(b===":"&&g.charAt(h+1)===":"){h+=2;while(g.charAt(h)===" ")h++;return new f.Combinator("::")}return g.charAt(h-1)===" "?new f.Combinator(" "):new f.Combinator(null)},selector:function(){var a,b,c=[],d,e;while(b=w(this.element)){d=g.charAt(h),c.push(b);if(d==="{"||d==="}"||d===";"||d===",")break}if(c.length>0)return new f.Selector(c)},tag:function(){return w(/^[a-zA-Z][a-zA-Z-]*[0-9]?/)||w("*")},attribute:function(){var a="",b,c,d;if(!w("["))return;if(b=w(/^[a-zA-Z-]+/)||w(this.entities.quoted))(d=w(/^[|~*$^]?=/))&&(c=w(this.entities.quoted)||w(/^[\w-]+/))?a=[b,d,c.toCSS?c.toCSS():c].join(""):a=b;if(!w("]"))return;if(a)return"["+a+"]"},block:function(){var a;if(w("{")&&(a=w(this.primary))&&w("}"))return a},ruleset:function(){var a=[],b,c,d;t();while(b=w(this.selector)){a.push(b),w(this.comment);if(!w(","))break;w(this.comment)}if(a.length>0&&(c=w(this.block)))return new f.Ruleset(a,c);l=h,u()},rule:function(){var a,b,c=g.charAt(h),d,e;t();if(c==="."||c==="#"||c==="&")return;if(a=w(this.variable)||w(this.property)){a.charAt(0)!="@"&&(e=/^([^@+\/'"*`(;{}-]*);/.exec(m[i]))?(h+=e[0].length-1,b=new f.Anonymous(e[1])):a==="font"?b=w(this.font):b=w(this.value),d=w(this.important);if(b&&w(this.end))return new f.Rule(a,b,d,k);l=h,u()}},"import":function(){var a,b,c=h;if(w(/^@import\s+/)&&(a=w(this.entities.quoted)||w(this.entities.url))){b=w(this.mediaFeatures);if(w(";"))return new f.Import(a,s,b,c)}},mediaFeature:function(){var a=[];do if(e=w(this.entities.keyword))a.push(e);else if(w("(")){p=w(this.property),e=w(this.entity);if(!w(")"))return null;if(p&&e)a.push(new f.Paren(new f.Rule(p,e,null,h,!0)));else{if(!e)return null;a.push(new f.Paren(e))}}while(e);if(a.length>0)return new f.Expression(a)},mediaFeatures:function(){var a,b=[];while(a=w(this.mediaFeature)){b.push(a);if(!w(","))break}return b.length>0?b:null},media:function(){var a;if(w(/^@media/)){a=w(this.mediaFeatures);if(rules=w(this.block))return new f.Directive("@media",rules,a)}},directive:function(){var a,b,c,d,e,i;if(g.charAt(h)!=="@")return;if(b=w(this["import"])||w(this.media))return b;if(a=w(/^@page|@keyframes/)||w(/^@(?:-webkit-|-moz-|-o-|-ms-)[a-z0-9-]+/)){d=(w(/^[^{]+/)||"").trim();if(c=w(this.block))return new f.Directive(a+" "+d,c)}else if(a=w(/^@[-a-z]+/))if(a==="@font-face"){if(c=w(this.block))return new f.Directive(a,c)}else if((b=w(this.entity))&&w(";"))return new f.Directive(a,b)},font:function(){var a=[],b=[],c,d,e,g;while(g=w(this.shorthand)||w(this.entity))b.push(g);a.push(new f.Expression(b));if(w(","))while(g=w(this.expression)){a.push(g);if(!w(","))break}return new f.Value(a)},value:function(){var a,b=[],c;while(a=w(this.expression)){b.push(a);if(!w(","))break}if(b.length>0)return new f.Value(b)},important:function(){if(g.charAt(h)==="!")return w(/^! *important/)},sub:function(){var a;if(w("(")&&(a=w(this.expression))&&w(")"))return a},multiplication:function(){var a,b,c,d;if(a=w(this.operand)){while(!z(/^\/\*/)&&(c=w("/")||w("*"))&&(b=w(this.operand)))d=new f.Operation(c,[d||a,b]);return d||a}},addition:function(){var a,b,c,d;if(a=w(this.multiplication)){while((c=w(/^[-+]\s+/)||g.charAt(h-1)!=" "&&(w("+")||w("-")))&&(b=w(this.multiplication)))d=new f.Operation(c,[d||a,b]);return d||a}},conditions:function(){var a,b,c=h,d;if(a=w(this.condition)){while(w(",")&&(b=w(this.condition)))d=new f.Condition("or",d||a,b,c);return d||a}},condition:function(){var a,b,c,d,e=h,g=!1;w(/^not/)&&(g=!0),x("(");if(a=w(this.addition)||w(this.entities.keyword)||w(this.entities.quoted))return(d=w(/^(?:>=|=<|[<=>])/))?(b=w(this.addition)||w(this.entities.keyword)||w(this.entities.quoted))?c=new f.Condition(d,a,b,e,g):y("expected expression"):c=new f.Condition("=",a,new f.Keyword("true"),e,g),x(")"),w(/^and/)?new f.Condition("and",c,w(this.condition)):c},operand:function(){var a,b=g.charAt(h+1);g.charAt(h)==="-"&&(b==="@"||b==="(")&&(a=w("-"));var c=w(this.sub)||w(this.entities.dimension)||w(this.entities.color)||w(this.entities.variable)||w(this.entities.call);return a?new f.Operation("*",[new f.Dimension(-1),c]):c},expression:function(){var a,b,c=[],d;while(a=w(this.addition)||w(this.entity))c.push(a);if(c.length>0)return new f.Expression(c)},property:function(){var a;if(a=w(/^(\*?-?[-a-z_0-9]+)\s*:/))return a[1]}}}};if(d.mode==="browser"||d.mode==="rhino")d.Parser.importer=function(a,b,c,d){a.charAt(0)!=="/"&&b.length>0&&(a=b[0]+a),o({href:a,title:a,type:d.mime},c,!0)};(function(a){function b(b){return a.functions.hsla(b.h,b.s,b.l,b.a)}function c(b){if(b instanceof a.Dimension)return parseFloat(b.unit=="%"?b.value/100:b.value);if(typeof b=="number")return b;throw{error:"RuntimeError",message:"color functions take numbers as parameters"}}function d(a){return Math.min(1,Math.max(0,a))}a.functions={rgb:function(a,b,c){return this.rgba(a,b,c,1)},rgba:function(b,d,e,f){var g=[b,d,e].map(function(a){return c(a)}),f=c(f);return new a.Color(g,f)},hsl:function(a,b,c){return this.hsla(a,b,c,1)},hsla:function(a,b,d,e){function h(a){return a=a<0?a+1:a>1?a-1:a,a*6<1?g+(f-g)*a*6:a*2<1?f:a*3<2?g+(f-g)*(2/3-a)*6:g}a=c(a)%360/360,b=c(b),d=c(d),e=c(e);var f=d<=.5?d*(b+1):d+b-d*b,g=d*2-f;return this.rgba(h(a+1/3)*255,h(a)*255,h(a-1/3)*255,e)},hue:function(b){return new a.Dimension(Math.round(b.toHSL().h))},saturation:function(b){return new a.Dimension(Math.round(b.toHSL().s*100),"%")},lightness:function(b){return new a.Dimension(Math.round(b.toHSL().l*100),"%")},alpha:function(b){return new a.Dimension(b.toHSL().a)},saturate:function(a,c){var e=a.toHSL();return e.s+=c.value/100,e.s=d(e.s),b(e)},desaturate:function(a,c){var e=a.toHSL();return e.s-=c.value/100,e.s=d(e.s),b(e)},lighten:function(a,c){var e=a.toHSL();return e.l+=c.value/100,e.l=d(e.l),b(e)},darken:function(a,c){var e=a.toHSL();return e.l-=c.value/100,e.l=d(e.l),b(e)},fadein:function(a,c){var e=a.toHSL();return e.a+=c.value/100,e.a=d(e.a),b(e)},fadeout:function(a,c){var e=a.toHSL();return e.a-=c.value/100,e.a=d(e.a),b(e)},fade:function(a,c){var e=a.toHSL();return e.a=c.value/100,e.a=d(e.a),b(e)},spin:function(a,c){var d=a.toHSL(),e=(d.h+c.value)%360;return d.h=e<0?360+e:e,b(d)},mix:function(b,c,d){var e=d.value/100,f=e*2-1,g=b.toHSL().a-c.toHSL().a,h=((f*g==-1?f:(f+g)/(1+f*g))+1)/2,i=1-h,j=[b.rgb[0]*h+c.rgb[0]*i,b.rgb[1]*h+c.rgb[1]*i,b.rgb[2]*h+c.rgb[2]*i],k=b.alpha*e+c.alpha*(1-e);return new a.Color(j,k)},greyscale:function(b){return this.desaturate(b,new a.Dimension(100))},e:function(b){return new a.Anonymous(b instanceof a.JavaScript?b.evaluated:b)},escape:function(b){return new a.Anonymous(encodeURI(b.value).replace(/=/g,"%3D").replace(/:/g,"%3A").replace(/#/g,"%23").replace(/;/g,"%3B").replace(/\(/g,"%28").replace(/\)/g,"%29"))},"%":function(b){var c=Array.prototype.slice.call(arguments,1),d=b.value;for(var e=0;e<c.length;e++)d=d.replace(/%[sda]/i,function(a){var b=a.match(/s/i)?c[e].value:c[e].toCSS();return a.match(/[A-Z]$/)?encodeURIComponent(b):b});return d=d.replace(/%%/g,"%"),new a.Quoted('"'+d+'"',d)},round:function(a){return this._math("round",a)},ceil:function(a){return this._math("ceil",a)},floor:function(a){return this._math("floor",a)},_math:function(b,d){if(d instanceof a.Dimension)return new a.Dimension(Math[b](c(d)),d.unit);if(typeof d=="number")return Math[b](d);throw{type:"Argument",message:"argument must be a number"}},argb:function(b){return new a.Anonymous(b.toARGB())},percentage:function(b){return new a.Dimension(b.value*100,"%")},color:function(b){if(b instanceof a.Quoted)return new a.Color(b.value.slice(1));throw{type:"Argument",message:"argument must be a string"}},iscolor:function(b){return this._isa(b,a.Color)},isnumber:function(b){return this._isa(b,a.Dimension)},isstring:function(b){return this._isa(b,a.Quoted)},iskeyword:function(b){return this._isa(b,a.Keyword)},isurl:function(b){return this._isa(b,a.URL)},ispixel:function(b){return b instanceof a.Dimension&&b.unit==="px"?a.True:a.False},ispercentage:function(b){return b instanceof a.Dimension&&b.unit==="%"?a.True:a.False},isem:function(b){return b instanceof a.Dimension&&b.unit==="em"?a.True:a.False},_isa:function(b,c){return b instanceof c?a.True:a.False}}})(c("./tree")),function(a){a.colors={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgrey:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",grey:"#808080",green:"#008000",greenyellow:"#adff2f",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgrey:"#d3d3d3",lightgreen:"#90ee90",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370d8",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#d87093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"}}(c("./tree")),function(a){a.Alpha=function(a){this.value=a},a.Alpha.prototype={toCSS:function(){return"alpha(opacity="+(this.value.toCSS?this.value.toCSS():this.value)+")"},eval:function(a){return this.value.eval&&(this.value=this.value.eval(a)),this}}}(c("../tree")),function(a){a.Anonymous=function(a){this.value=a.value||a},a.Anonymous.prototype={toCSS:function(){return this.value},eval:function(){return this}}}(c("../tree")),function(a){a.Assignment=function(a,b){this.key=a,this.value=b},a.Assignment.prototype={toCSS:function(){return this.key+"="+(this.value.toCSS?this.value.toCSS():this.value)},eval:function(a){return this.value.eval&&(this.value=this.value.eval(a)),this}}}(c("../tree")),function(a){a.Call=function(a,b,c,d){this.name=a,this.args=b,this.index=c,this.filename=d},a.Call.prototype={eval:function(b){var c=this.args.map(function(a){return a.eval(b)});if(!(this.name in a.functions))return new a.Anonymous(this.name+"("+c.map(function(a){return a.toCSS()}).join(", ")+")");try{return a.functions[this.name].apply(a.functions,c)}catch(d){throw{type:d.type||"Runtime",message:"error evaluating function `"+this.name+"`"+(d.message?": "+d.message:""),index:this.index,filename:this.filename}}},toCSS:function(a){return this.eval(a).toCSS()}}}(c("../tree")),function(a){a.Color=function(a,b){Array.isArray(a)?this.rgb=a:a.length==6?this.rgb=a.match(/.{2}/g).map(function(a){return parseInt(a,16)}):this.rgb=a.split("").map(function(a){return parseInt(a+a,16)}),this.alpha=typeof b=="number"?b:1},a.Color.prototype={eval:function(){return this},toCSS:function(){return this.alpha<1?"rgba("+this.rgb.map(function(a){return Math.round(a)}).concat(this.alpha).join(", ")+")":"#"+this.rgb.map(function(a){return a=Math.round(a),a=(a>255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")},operate:function(b,c){var d=[];c instanceof a.Color||(c=c.toColor());for(var e=0;e<3;e++)d[e]=a.operate(b,this.rgb[e],c.rgb[e]);return new a.Color(d,this.alpha+c.alpha)},toHSL:function(){var a=this.rgb[0]/255,b=this.rgb[1]/255,c=this.rgb[2]/255,d=this.alpha,e=Math.max(a,b,c),f=Math.min(a,b,c),g,h,i=(e+f)/2,j=e-f;if(e===f)g=h=0;else{h=i>.5?j/(2-e-f):j/(e+f);switch(e){case a:g=(b-c)/j+(b<c?6:0);break;case b:g=(c-a)/j+2;break;case c:g=(a-b)/j+4}g/=6}return{h:g*360,s:h,l:i,a:d}},toARGB:function(){var a=[Math.round(this.alpha*255)].concat(this.rgb);return"#"+a.map(function(a){return a=Math.round(a),a=(a>255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")}}}(c("../tree")),function(a){a.Comment=function(a,b){this.value=a,this.silent=!!b},a.Comment.prototype={toCSS:function(a){return a.compress?"":this.value},eval:function(){return this}}}(c("../tree")),function(a){a.Condition=function(a,b,c,d,e){this.op=a.trim(),this.lvalue=b,this.rvalue=c,this.index=d,this.negate=e},a.Condition.prototype.eval=function(a){var b=this.lvalue.eval(a),c=this.rvalue.eval(a),d=this.index,e,e=function(a){switch(a){case"and":return b&&c;case"or":return b||c;default:if(b.compare)e=b.compare(c);else{if(!c.compare)throw{type:"Type",message:"Unable to perform comparison",index:d};e=c.compare(b)}switch(e){case-1:return a==="<"||a==="=<";case 0:return a==="="||a===">="||a==="=<";case 1:return a===">"||a===">="}}}(this.op);return this.negate?!e:e}}(c("../tree")),function(a){a.Dimension=function(a,b){this.value=parseFloat(a),this.unit=b||null},a.Dimension.prototype={eval:function(){return this},toColor:function(){return new a.Color([this.value,this.value,this.value])},toCSS:function(){var a=this.value+this.unit;return a},operate:function(b,c){return new a.Dimension(a.operate(b,this.value,c.value),this.unit||c.unit)},compare:function(b){return b instanceof a.Dimension?b.value>this.value?-1:b.value<this.value?1:0:-1}}}(c("../tree")),function(a){a.Directive=function(b,c,d){this.name=b,this.features=d&&new a.Value(d),Array.isArray(c)?(this.ruleset=new a.Ruleset([],c),this.ruleset.allowImports=!0):this.value=c},a.Directive.prototype={toCSS:function(a,b){var c=this.features?" "+this.features.toCSS(b):"";return this.ruleset?(this.ruleset.root=!0,this.name+c+(b.compress?"{":" {\n ")+this.ruleset.toCSS(a,b).trim().replace(/\n/g,"\n ")+(b.compress?"}":"\n}\n")):this.name+" "+this.value.toCSS()+";\n"},eval:function(a){return this.features=this.features&&this.features.eval(a),a.frames.unshift(this),this.ruleset=this.ruleset&&this.ruleset.eval(a),a.frames.shift(),this},variable:function(b){return a.Ruleset.prototype.variable.call(this.ruleset,b)},find:function(){return a.Ruleset.prototype.find.apply(this.ruleset,arguments)},rulesets:function(){return a.Ruleset.prototype.rulesets.apply(this.ruleset)}}}(c("../tree")),function(a){a.Element=function(b,c,d){this.combinator=b instanceof a.Combinator?b:new a.Combinator(b),typeof c=="string"?this.value=c.trim():c?this.value=c:this.value="",this.index=d},a.Element.prototype.eval=function(b){return new a.Element(this.combinator,this.value.eval?this.value.eval(b):this.value,this.index)},a.Element.prototype.toCSS=function(a){return this.combinator.toCSS(a||{})+(this.value.toCSS?this.value.toCSS(a):this.value)},a.Combinator=function(a){a===" "?this.value=" ":a==="& "?this.value="& ":this.value=a?a.trim():""},a.Combinator.prototype.toCSS=function(a){return{"":""," ":" ","&":"","& ":" ",":":" :","::":"::","+":a.compress?"+":" + ","~":a.compress?"~":" ~ ",">":a.compress?">":" > "}[this.value]}}(c("../tree")),function(a){a.Expression=function(a){this.value=a},a.Expression.prototype={eval:function(b){return this.value.length>1?new a.Expression(this.value.map(function(a){return a.eval(b)})):this.value.length===1?this.value[0].eval(b):this},toCSS:function(a){return this.value.map(function(b){return b.toCSS?b.toCSS(a):""}).join(" ")}}}(c("../tree")),function(a){a.Import=function(b,c,d,e){var f=this;this.index=e,this._path=b,this.features=d&&new a.Value(d),b instanceof a.Quoted?this.path=/\.(le?|c)ss(\?.*)?$/.test(b.value)?b.value:b.value+".less":this.path=b.value.value||b.value,this.css=/css(\?.*)?$/.test(this.path),this.css||c.push(this.path,function(b,c){b&&(b.index=e),f.root=c||new a.Ruleset([],[])})},a.Import.prototype={toCSS:function(a){var b=this.features?" "+this.features.toCSS(a):"";return this.css?"@import "+this._path.toCSS()+b+";\n":""},eval:function(b){var c,d=this.features&&this.features.eval(b);if(this.css)return this;c=new a.Ruleset([],this.root.rules.slice(0));for(var e=0;e<c.rules.length;e++)c.rules[e]instanceof a.Import&&Array.prototype.splice.apply(c.rules,[e,1].concat(c.rules[e].eval(b)));return this.features?new a.Directive("@media",c.rules,this.features.value):c.rules}}}(c("../tree")),function(a){a.JavaScript=function(a,b,c){this.escaped=c,this.expression=a,this.index=b},a.JavaScript.prototype={eval:function(b){var c,d=this,e={},f=this.expression.replace(/@\{([\w-]+)\}/g,function(c,e){return a.jsify((new a.Variable("@"+e,d.index)).eval(b))});try{f=new Function("return ("+f+")")}catch(g){throw{message:"JavaScript evaluation error: `"+
-f+"`",index:this.index}}for(var h in b.frames[0].variables())e[h.slice(1)]={value:b.frames[0].variables()[h].value,toJS:function(){return this.value.eval(b).toCSS()}};try{c=f.call(e)}catch(g){throw{message:"JavaScript evaluation error: '"+g.name+": "+g.message+"'",index:this.index}}return typeof c=="string"?new a.Quoted('"'+c+'"',c,this.escaped,this.index):Array.isArray(c)?new a.Anonymous(c.join(", ")):new a.Anonymous(c)}}}(c("../tree")),function(a){a.Keyword=function(a){this.value=a},a.Keyword.prototype={eval:function(){return this},toCSS:function(){return this.value},compare:function(b){return b instanceof a.Keyword?b.value===this.value?0:1:-1}},a.True=new a.Keyword("true"),a.False=new a.Keyword("false")}(c("../tree")),function(a){a.mixin={},a.mixin.Call=function(b,c,d,e,f){this.selector=new a.Selector(b),this.arguments=c,this.index=d,this.filename=e,this.important=f},a.mixin.Call.prototype={eval:function(a){var b,c,d=[],e=!1;for(var f=0;f<a.frames.length;f++)if((b=a.frames[f].find(this.selector)).length>0){c=this.arguments&&this.arguments.map(function(b){return b.eval(a)});for(var g=0;g<b.length;g++)if(b[g].match(c,a))try{Array.prototype.push.apply(d,b[g].eval(a,this.arguments,this.important).rules),e=!0}catch(h){throw{message:h.message,index:h.index,filename:this.filename,stack:h.stack,call:this.index}}if(e)return d;throw{type:"Runtime",message:"No matching definition was found for `"+this.selector.toCSS().trim()+"("+this.arguments.map(function(a){return a.toCSS()}).join(", ")+")`",index:this.index,filename:this.filename}}throw{type:"Name",message:this.selector.toCSS().trim()+" is undefined",index:this.index,filename:this.filename}}},a.mixin.Definition=function(b,c,d,e){this.name=b,this.selectors=[new a.Selector([new a.Element(null,b)])],this.params=c,this.condition=e,this.arity=c.length,this.rules=d,this._lookups={},this.required=c.reduce(function(a,b){return!b.name||b.name&&!b.value?a+1:a},0),this.parent=a.Ruleset.prototype,this.frames=[]},a.mixin.Definition.prototype={toCSS:function(){return""},variable:function(a){return this.parent.variable.call(this,a)},variables:function(){return this.parent.variables.call(this)},find:function(){return this.parent.find.apply(this,arguments)},rulesets:function(){return this.parent.rulesets.apply(this)},evalParams:function(b,c){var d=new a.Ruleset(null,[]);for(var e=0,f;e<this.params.length;e++)if(this.params[e].name){if(!(f=c&&c[e]||this.params[e].value))throw{type:"Runtime",message:"wrong number of arguments for "+this.name+" ("+c.length+" for "+this.arity+")"};d.rules.unshift(new a.Rule(this.params[e].name,f.eval(b)))}return d},eval:function(b,c,d){var e=this.evalParams(b,c),f,g=[],h;for(var i=0;i<Math.max(this.params.length,c&&c.length);i++)g.push(c[i]||this.params[i].value);return e.rules.unshift(new a.Rule("@arguments",(new a.Expression(g)).eval(b))),h=d?this.rules.map(function(b){return new a.Rule(b.name,b.value,"!important",b.index)}):this.rules.slice(0),(new a.Ruleset(null,h)).eval({frames:[this,e].concat(this.frames,b.frames)})},match:function(a,b){var c=a&&a.length||0,d,e;if(c<this.required)return!1;if(this.required>0&&c>this.params.length)return!1;if(this.condition&&!this.condition.eval({frames:[this.evalParams(b,a)].concat(b.frames)}))return!1;d=Math.min(c,this.arity);for(var f=0;f<d;f++)if(!this.params[f].name&&a[f].eval(b).toCSS()!=this.params[f].value.eval(b).toCSS())return!1;return!0}}}(c("../tree")),function(a){a.Operation=function(a,b){this.op=a.trim(),this.operands=b},a.Operation.prototype.eval=function(b){var c=this.operands[0].eval(b),d=this.operands[1].eval(b),e;if(c instanceof a.Dimension&&d instanceof a.Color){if(this.op!=="*"&&this.op!=="+")throw{name:"OperationError",message:"Can't substract or divide a color from a number"};e=d,d=c,c=e}return c.operate(this.op,d)},a.operate=function(a,b,c){switch(a){case"+":return b+c;case"-":return b-c;case"*":return b*c;case"/":return b/c}}}(c("../tree")),function(a){a.Paren=function(a){this.value=a},a.Paren.prototype={toCSS:function(a){return"("+this.value.toCSS(a)+")"},eval:function(b){return new a.Paren(this.value.eval(b))}}}(c("../tree")),function(a){a.Quoted=function(a,b,c,d){this.escaped=c,this.value=b||"",this.quote=a.charAt(0),this.index=d},a.Quoted.prototype={toCSS:function(){return this.escaped?this.value:this.quote+this.value+this.quote},eval:function(b){var c=this,d=this.value.replace(/`([^`]+)`/g,function(d,e){return(new a.JavaScript(e,c.index,!0)).eval(b).value}).replace(/@\{([\w-]+)\}/g,function(d,e){var f=(new a.Variable("@"+e,c.index)).eval(b);return"value"in f?f.value:f.toCSS()});return new a.Quoted(this.quote+d+this.quote,d,this.escaped,this.index)}}}(c("../tree")),function(a){a.Rule=function(b,c,d,e,f){this.name=b,this.value=c instanceof a.Value?c:new a.Value([c]),this.important=d?" "+d.trim():"",this.index=e,this.inline=f||!1,b.charAt(0)==="@"?this.variable=!0:this.variable=!1},a.Rule.prototype.toCSS=function(a){return this.variable?"":this.name+(a.compress?":":": ")+this.value.toCSS(a)+this.important+(this.inline?"":";")},a.Rule.prototype.eval=function(b){return new a.Rule(this.name,this.value.eval(b),this.important,this.index,this.inline)},a.Shorthand=function(a,b){this.a=a,this.b=b},a.Shorthand.prototype={toCSS:function(a){return this.a.toCSS(a)+"/"+this.b.toCSS(a)},eval:function(){return this}}}(c("../tree")),function(a){a.Ruleset=function(a,b){this.selectors=a,this.rules=b,this._lookups={}},a.Ruleset.prototype={eval:function(b){var c=this.selectors&&this.selectors.map(function(a){return a.eval(b)}),d=new a.Ruleset(c,this.rules.slice(0));d.root=this.root,d.allowImports=this.allowImports,b.frames.unshift(d);if(d.root||d.allowImports)for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.Import&&Array.prototype.splice.apply(d.rules,[e,1].concat(d.rules[e].eval(b)));for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.mixin.Definition&&(d.rules[e].frames=b.frames.slice(0));for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.mixin.Call&&Array.prototype.splice.apply(d.rules,[e,1].concat(d.rules[e].eval(b)));for(var e=0,f;e<d.rules.length;e++)f=d.rules[e],f instanceof a.mixin.Definition||(d.rules[e]=f.eval?f.eval(b):f);return b.frames.shift(),d},match:function(a){return!a||a.length===0},variables:function(){return this._variables?this._variables:this._variables=this.rules.reduce(function(b,c){return c instanceof a.Rule&&c.variable===!0&&(b[c.name]=c),b},{})},variable:function(a){return this.variables()[a]},rulesets:function(){return this._rulesets?this._rulesets:this._rulesets=this.rules.filter(function(b){return b instanceof a.Ruleset||b instanceof a.mixin.Definition})},find:function(b,c){c=c||this;var d=[],e,f,g=b.toCSS();return g in this._lookups?this._lookups[g]:(this.rulesets().forEach(function(e){if(e!==c)for(var g=0;g<e.selectors.length;g++)if(f=b.match(e.selectors[g])){b.elements.length>e.selectors[g].elements.length?Array.prototype.push.apply(d,e.find(new a.Selector(b.elements.slice(1)),c)):d.push(e);break}}),this._lookups[g]=d)},toCSS:function(b,c){var d=[],e=[],f=[],g=[],h,i;this.root||(b.length===0?g=this.selectors.map(function(a){return[a]}):this.joinSelectors(g,b,this.selectors));for(var j=0;j<this.rules.length;j++)i=this.rules[j],i.rules||i instanceof a.Directive?f.push(i.toCSS(g,c)):i instanceof a.Comment?i.silent||(this.root?f.push(i.toCSS(c)):e.push(i.toCSS(c))):i.toCSS&&!i.variable?e.push(i.toCSS(c)):i.value&&!i.variable&&e.push(i.value.toString());return f=f.join(""),this.root?d.push(e.join(c.compress?"":"\n")):e.length>0&&(h=g.map(function(a){return a.map(function(a){return a.toCSS(c)}).join("").trim()}).join(c.compress?",":g.length>3?",\n":", "),d.push(h,(c.compress?"{":" {\n ")+e.join(c.compress?"":"\n ")+(c.compress?"}":"\n}\n"))),d.push(f),d.join("")+(c.compress?"\n":"")},joinSelectors:function(a,b,c){for(var d=0;d<c.length;d++)this.joinSelector(a,b,c[d])},joinSelector:function(b,c,d){var e=[],f=[],g=[],h=[],i=!1,j;for(var k=0;k<d.elements.length;k++)j=d.elements[k],j.combinator.value.charAt(0)==="&"&&(i=!0),i?h.push(j):g.push(j);i||(h=g,g=[]),g.length>0&&e.push(new a.Selector(g)),h.length>0&&f.push(new a.Selector(h));for(var l=0;l<c.length;l++)b.push(e.concat(c[l]).concat(f))}}}(c("../tree")),function(a){a.Selector=function(a){this.elements=a,this.elements[0].combinator.value===""&&(this.elements[0].combinator.value=" ")},a.Selector.prototype.match=function(a){var b=this.elements.length,c=a.elements.length,d=Math.min(b,c);if(b<c)return!1;for(var e=0;e<d;e++)if(this.elements[e].value!==a.elements[e].value)return!1;return!0},a.Selector.prototype.eval=function(b){return new a.Selector(this.elements.map(function(a){return a.eval(b)}))},a.Selector.prototype.toCSS=function(a){return this._css?this._css:this._css=this.elements.map(function(b){return typeof b=="string"?" "+b.trim():b.toCSS(a)}).join("")}}(c("../tree")),function(b){b.URL=function(b,c){b.data?this.attrs=b:(typeof a!="undefined"&&!/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(b.value)&&c.length>0&&(b.value=c[0]+(b.value.charAt(0)==="/"?b.value.slice(1):b.value)),this.value=b,this.paths=c)},b.URL.prototype={toCSS:function(){return"url("+(this.attrs?"data:"+this.attrs.mime+this.attrs.charset+this.attrs.base64+this.attrs.data:this.value.toCSS())+")"},eval:function(a){return this.attrs?this:new b.URL(this.value.eval(a),this.paths)}}}(c("../tree")),function(a){a.Value=function(a){this.value=a,this.is="value"},a.Value.prototype={eval:function(b){return this.value.length===1?this.value[0].eval(b):new a.Value(this.value.map(function(a){return a.eval(b)}))},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(a.compress?",":", ")}}}(c("../tree")),function(a){a.Variable=function(a,b,c){this.name=a,this.index=b,this.file=c},a.Variable.prototype={eval:function(b){var c,d,e=this.name;e.indexOf("@@")==0&&(e="@"+(new a.Variable(e.slice(1))).eval(b).value);if(c=a.find(b.frames,function(a){if(d=a.variable(e))return d.value.eval(b)}))return c;throw{type:"Name",message:"variable "+e+" is undefined",filename:this.file,index:this.index}}}}(c("../tree")),function(a){a.find=function(a,b){for(var c=0,d;c<a.length;c++)if(d=b.call(a,a[c]))return d;return null},a.jsify=function(a){return Array.isArray(a.value)&&a.value.length>1?"["+a.value.map(function(a){return a.toCSS(!1)}).join(", ")+"]":a.toCSS(!1)}}(c("./tree"));var g=location.protocol==="file:"||location.protocol==="chrome:"||location.protocol==="chrome-extension:"||location.protocol==="resource:";d.env=d.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname=="localhost"||location.port.length>0||g?"development":"production"),d.async=!1,d.poll=d.poll||(g?1e3:1500),d.watch=function(){return this.watchMode=!0},d.unwatch=function(){return this.watchMode=!1},d.env==="development"?(d.optimization=0,/!watch/.test(location.hash)&&d.watch(),d.watchTimer=setInterval(function(){d.watchMode&&n(function(a,b,c,d,e){b&&r(b.toCSS(),d,e.lastModified)})},d.poll)):d.optimization=3;var h;try{h=typeof a.localStorage=="undefined"?null:a.localStorage}catch(i){h=null}var j=document.getElementsByTagName("link"),k=/^text\/(x-)?less$/;d.sheets=[];for(var l=0;l<j.length;l++)(j[l].rel==="stylesheet/less"||j[l].rel.match(/stylesheet/)&&j[l].type.match(k))&&d.sheets.push(j[l]);d.refresh=function(a){var b,c;b=c=new Date,n(function(a,d,e,f,g){g.local?v("loading "+f.href+" from cache."):(v("parsed "+f.href+" successfully."),r(d.toCSS(),f,g.lastModified)),v("css for "+f.href+" generated in "+(new Date-c)+"ms"),g.remaining===0&&v("css generated in "+(new Date-b)+"ms"),c=new Date},a),m()},d.refreshStyles=m,d.refresh(d.env==="development")})(window);
View
373 examples/stylesheets/darkblue.less
@@ -1,373 +0,0 @@
-// UIKit Dark Blue
-.form {
- input, select {
- border: none;
- .radius(30px);
- color: @skin-light;
- .bs(0 0 0 3px rgba(200,200,200,0.40));
- font-size: 12px;
- font-family: @headings;
- font-weight: normal;
- padding: 3px 10px;
- &:focus {
- color: @skin-darken;
- .bs(0 0 0 3px @skin-light);
- }
- }
- input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
- margin-top: 3px;
- }
- label {
- font-size: 12px;
- font-family: @headings;
- font-weight: normal;
- }
- textarea {
- .radius();
- border: none;
- .bs(0 0 0 3px rgba(200,200,200,0.80));
- color: @skin-light;
- font-size: 12px;
- font-family: @headings;
- font-weight: normal;
- padding: 10px;
- letter-spacing: normal;
- &:focus {
- color: @skin-darken;
- .bs(0 0 0 3px @skin-light);
- }
- }
-}
-.p-ui-checkbox {
- .switchbox(#1563CA, #229FE0, #666, @skin-darken, "I", "O");
- float: left;
-}
-.btn, input.sbtn[type="submit"] {
- .radius(3px);
- font-weight: normal;
- #gradient > .v(#229FE0, #1563CA);
- .ts(none);
- color: @white;
- font-family: @headings;
- letter-spacing: 0.02em;
- &:hover {
- color: @white;
- #gradient > .v(#1367D6, #23A6ED);
- }
-}
-.btn-selected {
- #gradient > .v(#1367D6, #23A6ED);
- .bs(0 1px 0 rgba(255,255,255,0.40), 0 2px 1px rgba(32,32,32,0.20) inset);
- color: #303030;
-}
-.bdelete {
- #gradient > .v(lighten(@red, 10%), @red);
- &:hover {
- #gradient > .v(@red, lighten(@red, 10%));
- }
-}
-.bcancel, .bback {
- background: @system;
- color: darken(@system, 40%) !important;
- &:hover {
- #gradient > .v(darken(@system, 10%), @system);
- }
-}
-.bactive, .blessimportant {
- #gradient > .v(#666, @skin-darken);
- color: @white !important;
- &:hover {
- #gradient > .v(@skin-darken, #666);
- }
-}
-.bdisable {
- background: @system;
- color: darken(@system, 20%) !important;
- cursor: not-allowed !important;
- border: 1px solid rgba(0,0,0,0.10);
- .bs(0 0 0 transparent);
- &:hover {
- background: @system;
- color: darken(@system, 20%) !important;
- .bs(0 0 0 transparent);
- }
-}
-// Perkins UI Mixins
-.p-ui-btn-action {
- font-family: @headings;
- letter-spacing: -0.04em;
-}
-
-.p-ui-dropdown {
- border: none;
- .radius();
- #gradient > .v(@skin-darken, darken(@skin-darken, 5%));
- li {
- .radius(3px);
- &:hover {
- background: @skin-light;
- color: @skin-dark;
- a {
- color: @skin-dark;
- }
- }
- a {
- padding: 15px 10px;
- font-family: @headings;
- color: @skin-light;
- }
- }
- li[data-darr], li[data-rarr] {
- a {
- padding: 15px 30px 15px 15px;
- }
- }
- li[data-darr] {
- &:before {
- .triangle-down(5px, @skin-light);
- top: 18px;
- }
- &:hover {
- &:before {
- .triangle-down(5px, @skin-darken);
- }
- }
- }
- li[data-rarr] {
- &:before {
- .triangle-right(5px, @skin-darken);
- top: 12px;
- right: 10px;
- }
- }
- ul {
- .radius();
- #gradient > .v(@skin-light, darken(@skin-light, 5%));
- top: 38px;
- .bs(0 6px 6px -6px @skin-dark);
- border: none;
- li {
- margin: 5px;
- &:hover {
- background: @white;
- }
- a {
- color: @skin-darken;
- padding: 10px 25px 10px 15px !important;
- }
- }
- }
- ul li {
- margin: 5px !important;
- }
- ul ul {
- left: 175px;
- top: 0;
- }
-}
-.p-ui-tags {
- li {
- &:before {
- top: 4px;
- }
- }
- span {
- padding: 0.5em 1.7em 0.5em 1em !important;
- }
- span, a {
- font-weight: normal !important;
- font-family: @headings;
- text-transform: uppercase;
- }
-}
-.p-ui-tooltip {
- border-bottom: 1px dotted skin-light;
- &:after {
- color: @white;
- background: @skin-darken;
- }
-}
-
-// jQuery UI
-.ui-tabs {
- text-align: center;
- list-style: none;
- margin: 30px 0 0;
- padding: 0;
- overflow: hidden;
- position: relative;
- ul {
- overflow: hidden;
- display: inline-block !important;
- margin-bottom: -5px;
- &:before {
- position: absolute;
- content: " ";
- width: 100%;
- bottom: 0;
- left: 0;
- border-bottom: 1px solid #AAA;
- z-index: 1;
- }
- }
- li {
- display: inline-block;
- }
- a {
- display: block;
- border: 1px solid #404146 !important;
- #gradient > .v(#6C6D72, #4D4E53, url(/images/tnoise.png));
- position: relative;
- z-index: 0;
- .radius(5px 5px 0 0);
- .bs(0 3px 3px rgba(0, 0, 0, 0.40));
- .ts(0 -1px 1px rgba(0,0,0,0.70));
- padding: 10px 20px 7px !important;
- text-transform: uppercase;
- font-size: 11px;
- font-family: @headings;
- color: @white;
- .transition(none);
- &:before, &:after {
- border: 1px solid #404146;
- position: absolute;
- bottom: -1px;
- width: 5px;
- height: 5px;
- content: " ";
- }
- &:before {
- left: -6px;
- border-bottom-right-radius: 6px;
- border-width: 0 1px 1px 0;
- box-shadow: 2px 2px 0 #4D4E53;
- }
- &:after {
- right: -6px;
- border-bottom-left-radius: 6px;
- border-width: 0 0 1px 1px;
- box-shadow: -2px 2px 0 #4D4E53;
- }
- }
- .ui-tabs-selected a {
- #gradient > .v(#eee, #ddd);
- .ts(0 1px 0 rgba(255,255,255,0.40));
- color: @skin-darken;
- z-index: 2;
- border: 1px solid #aaa !important;
- border-bottom: 1px solid #ddd !important;
- &:before {
- box-shadow: 2px 2px 0 #ddd;
- border-right: 1px solid #aaa;
- border-bottom: 1px solid #aaa;
- }
- &:after {
- box-shadow: -2px 2px 0 #ddd;
- border-left: 1px solid #aaa;
- border-bottom: 1px solid #aaa;
- }
- }
- .ui-tabs-panel {
- text-align: left;
- #gradient > .v(#ddd, #eee);
- border: 1px solid #aaa;
- .radius();
- }
-}
-.ui-accordion {
- .ui-accordion-header {
- #gradient > .v(#6C6D72, #4D4E52, url(/images/tnoise.png));
- .radius();
- .ts(0 1px 2px rgba(0,0,0,0.80));
- font-weight: normal;
- a {
- font-size: 14px;
- color: @white;
- padding: 0.8em 0.8em 0.8em 2.2em;
- }
- }
- .ui-state-active {
- .radius(5px 5px 0 0);
- }
- .ui-accordion-content {
- background: #f4f4f4 url(/images/tcloth.png);
- .radius(0 0 5px 5px);
- }
-}
-.ui-dialog {
- .radius();
- .ui-dialog-titlebar {
- .radius(5px 5px 0 0);
- #gradient > .v(#6C6D72, #4D4E52, url(/images/tnoise.png));
- .ts(0 1px 2px rgba(0,0,0,0.80));
- font-size: 14px;
- color: @white;
- }
- .ui-dialog-buttonpane {
- #gradient > .v(#6C6D72, #4D4E52, url(/images/tnoise.png));
- button {
- padding: 5px 10px 5px !important;
- }
- }
-}
-.ui-dialog-form {
- padding: 0 10px 0 0 !important;
- overflow: hidden;
- .form {
- li:nth-child(odd) {
- background: #eee;
- border-bottom: 1px solid #ddd;
- }
- input[type="text"], select, textarea {
- .grid-12;
- }
- }
- .ui-dialog-buttonpane {
- button {
- padding: 5px 10px 5px !important;
- }
- }
-}
-.ui-slider {
- .bs(inset 0 0 1px rgba(0,0,0,0.40));
- .ui-slider-range {
- #gradient > .v(#6C6D72, #4D4E52, url(/images/tnoise.png));
- }
- .ui-slider-handle {
- #gradient > .v(#eee, #ddd);
- }
-}
-.ui-progressbar {
- height: 0.5em;
- .ui-progressbar-value {
- #gradient > .v(#6C6D72, #4D4E52, url(/images/tnoise.png));
- }
-}
-.ui-datepicker {
- #gradient > .v(#6C6D72, #4D4E52, url(/images/tnoise.png));
- .ui-datepicker-header {
- border: none;
- .ui-datepicker-title {
- color: @white;
- font-weight: normal;
- font-family: @headings;
- }
- }
- .ui-datepicker-calendar {
- th {
- text-transform: uppercase;
- .ts(0 0 2px rgba(255,255,255,0.40));
- cursor: default;
- }
- a {
- color: @white;
- }
- .ui-state-highlight {
- color: @skin-darken;
- }
- .ui-state-active {
- color: @white;
- background: @skin-darken;
- }
- }
-}
View
6 examples/stylesheets/demo.less
@@ -1,6 +0,0 @@
-@import "darkblue";
-
-body {
- width: 960px;
- margin: 0 auto;
-}
View
638 examples/stylesheets/demo.temp.css
@@ -1,638 +0,0 @@
-@font-face{font-family:'mnmliconsRegular';src:url('mnmliconsv22-perkins.eot');src:url('mnmliconsv22-perkins.eot?#iefix') format('embedded-opentype'),url('mnmliconsv22-perkins.woff') format('woff'),url('mnmliconsv22-perkins.ttf') format('truetype'),url('mnmliconsv22-perkins.svg#mnmliconsRegular') format('svg');font-weight:normal;font-style:normal;}.i{font-family:"mnmliconsRegular" !important;font-weight:300 !important;}
-html,body{margin:0;padding:0;}
-h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;text-align:left;}
-table{border-collapse:collapse;border-spacing:0;}
-ol,ul{list-style:none;}
-q:before,q:after,blockquote:before,blockquote:after{content:"";}
-body{font-family:"Signika Negative",sans-serif;font-size:0.938em;font-weight:normal;line-height:1.125;color:#4d4d4d;text-rendering:optimizeLegibility;}
-p{font-family:"Signika Negative",sans-serif;font-size:0.938em;font-weight:normal;line-height:1.5;}
-h1{font-family:"Signika Negative",sans-serif;font-size:2.063em;font-weight:bold;line-height:20px;}
-h2{font-family:"Signika Negative",sans-serif;font-size:1.688em;font-weight:bold;line-height:20px;}
-h3{font-family:"Signika Negative",sans-serif;font-size:1.313em;font-weight:bold;line-height:20px;}
-h4{font-family:"Signika Negative",sans-serif;font-size:1.188em;font-weight:bold;line-height:20px;}
-h5{font-family:"Signika Negative",sans-serif;font-size:1.063em;font-weight:bold;line-height:20px;}
-h6{font-family:"Signika Negative",sans-serif;font-size:1em;font-weight:normal;line-height:20px;}
-h1,h2,h3,h4,h5,h6{line-height:1;letter-spacing:-0.02em;margin:0 0 0.2em 0;font-family:"Cabin Condensed";}
-li,label{font-family:"Signika Negative",sans-serif;font-size:0.938em;font-weight:normal;line-height:1.1;}
-li ol li,li ul li{font-family:"Signika Negative",sans-serif;font-size:1em;font-weight:normal;line-height:1.1;}
-a{text-decoration:none;text-transform:none;}
-abbr{border-bottom:1px dotted #cccccc;font-style:italic;text-transform:uppercase;}
-acronym{border-bottom:1px dotted #cccccc;font-style:italic;text-transform:uppercase;}
-address{font-style:italic;}
-bdo{font-weight:normal;margin-bottom:1.0em;}
-blockquote{font-family:serif;font-style:italic;}
-cite{font-family:"Signika Negative",sans-serif;font-style:italic;}
-code{font-family:monospace;font-weight:bold;}
-del{text-decoration:line-through;}
-dl{font-weight:bold;}dl dt{font-weight:500;}
-dl dd{font-family:"Signika Negative",sans-serif;font-size:0.838em;font-weight:normal;line-height:1.1;}
-em{font-style:italic;font-weight:normal;}
-ins{text-decoration:underline;}
-kbd{font-family:monospace;font-style:italic;}
-mark{font-family:"Signika Negative",sans-serif;}
-meter{font-weight:normal;}
-p{font-weight:normal;}
-pre{font-family:monospace;font-weight:bold;}
-q{font-family:serif;font-weight:normal;}
-samp{font-family:monospace;font-weight:normal;}
-small{font-size:75%;}
-strong{font-weight:bold;}
-var{font-style:italic;}
-header,nav,footer,aside,article,section{display:block;}
-a{border:none;color:#3d98f1;}a img{border:none;cursor:pointer;outline:none;}
-a:visited{cursor:pointer;outline:none;}
-a:hover{cursor:pointer;outline:none;color:#0d65bb;-webkit-transition:all linear 0.2s;-moz-transition:all linear 0.2s;transition:all linear 0.2s;}
-a:active{cursor:pointer;outline:none;}
-blockquote{border-left:0.5em #cccccc solid;line-height:1.5;margin:1.5em 0.5 1.5em 1.5em;padding:1.5em;}
-dl{margin:0 0 1.5em 0;}dl dt{margin:0px 0px 0px 10px;padding-bottom:5px;}
-dl dd{margin:0px 0px 0px 20px;padding-bottom:5px;}
-mark{background-color:#FFFCE1;padding:0 5px;}
-ol{list-style-position:inside;list-style-type:decimal;margin:1.0em 0.5em 0.5em 0.5em;}ol li{margin:0em 0.5em 0.5em 0.5em;}
-p{margin-bottom:1.0em;}
-pre{line-height:1.2;margin:0;padding:1.5em;font-weight:300;background:#333;color:#7fb060;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-moz-box-shadow:inset 0 1px 3em #000000,0 0 0 transparent;-webkit-box-shadow:inset 0 1px 3em #000000,0 0 0 transparent;-o-box-shadow:inset 0 1px 3em #000000,0 0 0 transparent;-box-shadow:inset 0 1px 3em #000000,0 0 0 transparent;}
-ul{list-style-position:inside;list-style-type:disc;margin:0 1.5em 1.5em 0;}ul ul{list-style-type:square;}ul ul ul{list-style-type:circle;}
-ul li{margin:0 0 0.5em 0.85em;}
-hr{background:#cccccc;color:#cccccc;border:none;clear:both;float:none;height:1px;margin:0 0 1.45em;width:100%;}
-.grid-1{width:4.25%;}
-.grid-2{width:10.5%;}
-.grid-3{width:16.75%;}
-.grid-4{width:23%;}
-.grid-5{width:29.25%;}
-.grid-6{width:35.5%;}
-.grid-7{width:41.75%;}
-.grid-8{width:48%;}
-.grid-9{width:54.25%;}
-.grid-10{width:60.5%;}
-.grid-11{width:66.75%;}
-.grid-12{width:73%;}
-.grid-13{width:79.25%;}
-.grid-14{width:85.5%;}
-.grid-15{width:91.75%;}
-.grid-16{width:98%;}
-.grid-17{width:104.25%;}
-.grid-18{width:110.5%;}
-.grid-19{width:116.75%;}
-.grid-20{width:123%;}
-.grid-21{width:129.25%;}
-.grid-22{width:135.5%;}
-.grid-23{width:141.75%;}
-.grid-24{width:148%;}
-.grid-25{width:154.25%;}
-.grid-26{width:160.5%;}
-.grid-27{width:166.75%;}
-.grid-28{width:173%;}
-.grid-29{width:179.25%;}
-.grid-30{width:185.5%;}
-.grid-31{width:191.75%;}
-.grid-32{width:198%;}
-.grid-33{width:204.25%;}
-.grid-34{width:210.5%;}
-.grid-35{width:216.75%;}
-.grid-36{width:223%;}
-.column{display:inline;float:left;margin:0 1%;overflow:hidden;}
-.row{width:100%;margin:0 auto;overflow:hidden;position:relative;}.row .row{display:inline-block;}
-table{border-collapse:collapse;margin:0px auto;font-size:100%;}table caption{margin:1px 0px;padding:3px 1px;font-weight:bold;}
-table th,table td{padding:3px;}
-table thead tr th{background-color:inherit;padding:3px 10px;text-align:center;}
-table thead tr td{background-color:inherit;padding:3px 10px;text-align:center;}
-table tbody a{padding:2px 2px;text-decoration:none;}
-table tbody tr th{padding:3px 10px;text-align:center;}
-table tbody tr td{padding:3px 10px;text-align:left;}
-table tfoot{font-size:90%;}table tfoot tr th{padding:3px 10px;text-align:center;}
-table tfoot tr td{padding:3px 10px;text-align:left;}
-.table thead th{background:#e6e6e6;text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);color:#333333;padding:10px;border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;}
-.table tbody th{background:#e6e6e6;text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);color:#333333;padding:10px;border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;}
-.table tbody td{border-bottom:1px solid #cccccc;border-right:1px solid #cccccc;padding:10px;}
-.table tfoot th{background:#e6e6e6;text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);color:#333333;padding:10px;border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;}
-.table tfoot td{border-bottom:1px solid #cccccc;border-right:1px solid #cccccc;padding:10px;text-align:center;}
-fieldset{border:1px solid #cccccc;margin:0 0 18px 0;padding:10px;}fieldset legend{color:#666666;padding:0 10px;}
-input,select,textarea{border:1px solid #cccccc;display:block;padding:4px;}
-select{padding:3px;}
-input:focus,select:focus,textarea:focus{-webkit-transition:all linear 0.2s;-moz-transition:all linear 0.2s;transition:all linear 0.2s;-moz-box-shadow:0 0 5px #3d98f1,0 2px 5px rgba(32, 32, 32, 0.2) inset;-webkit-box-shadow:0 0 5px #3d98f1,0 2px 5px rgba(32, 32, 32, 0.2) inset;-o-box-shadow:0 0 5px #3d98f1,0 2px 5px rgba(32, 32, 32, 0.2) inset;-box-shadow:0 0 5px #3d98f1,0 2px 5px rgba(32, 32, 32, 0.2) inset;border:1px solid #666666;}
-input[type="checkbox"]{margin:3px 4px 0 2px;}
-input[type="radio"]{margin:3px 4px 0 0;}
-label{font-family:"Signika Negative",sans-serif;font-size:0.9em;font-weight:bold;line-height:1;display:block;cursor:pointer;}label input{display:inline-block;}
-input,textarea,select{font-family:"Signika Negative",sans-serif;font-size:0.938em;font-weight:normal;line-height:1.1;}
-.form{list-style:none;margin:0;padding:0;}.form ul{padding:2px 5px 5px 5px;overflow:hidden;height:1%;list-style:none;}
-.form li{margin:0;padding:5px;width:100%;overflow:hidden;}.form li ul li{border-bottom:0px solid #ff0000;}
-.form label{width:20%;float:left;display:inline;font-weight:bold;padding:7px 1%;}
-.form input,.form select,.form textarea{float:left;display:inline;}
-.form input[type='radio']{border:none;margin-top:8px;}
-.form input[type='checkbox']{border:none;margin-top:8px;}
-.form .leftNote{padding:3px 5px 0 5px;float:left;}
-.form .bottomNote{padding:0;clear:both;display:block;margin-left:22%;}
-.form.tar label{text-align:right;}
-.form .vii float:left li{float:none;clear:none;}
-.form .vii label{float:none;width:auto;vertical-align:middle;}
-.form .vii input,.form .vii select{float:none;vertical-align:middle;margin-left:0px;margin-right:5px;}
-.form .vhh{float:left;display:inline;}.form .vhh li{display:block;clear:both;float:left;width:auto;margin-bottom:3px;}
-.form .vhh label{float:left;width:100px;display:inline;}
-.form .vhh input,.form .vhh select,.form .vhh textarea{float:left;display:inline;}
-.vvv li{display:block;clear:both;width:100%;}
-.vvv label{display:block;clear:both;float:none;width:100%;padding:0;}
-.vvv input,.vvv select,.vvv textarea{display:block;float:left;margin:5px 0;width:61%;}
-.vvv input[type='radio']{width:auto;}
-.vvv input[type='checkbox']{width:auto;}
-.vvv .hii label{display:inline;float:none;}
-.vvv .hii input{float:none;display:inline;}
-.vvv .bottomNote{margin:0;}
-.hvv,.hii{overflow:hidden;height:1%;}.hvv li,.hii li{float:left;margin-right:10px;display:inline;width:auto;clear:none;}
-.hvv label,.hii label{display:block;width:auto;float:none;padding:7px 0;}
-.hvv input,.hii input,.hvv select,.hii select,.hvv textarea,.hii textarea{display:block;margin:5px 0 5px 1px;width:inherit !important;}
-.hvv .bottomNote,.hii .bottomNote{margin:0;}
-.hhh{overflow:hidden;height:1%;}.hhh li{float:left;margin-right:10px;display:inline;width:auto;border-bottom:0;}.hhh li li{clear:both;}
-.hhh li .bottomNote{margin:0;text-align:right;}
-.hhh label{float:left;width:100px;padding:7px 0;}
-.hhh input,.hhh select,.hhh textarea{float:left;}
-.hhh.tar label{padding-right:10px;width:90px;}
-.vii{float:left;width:auto;}.vii li{display:block;float:left;width:auto;clear:both;}
-.vii label{display:inline;width:auto;vertical-align:middle;float:none;}
-.vii input,.vii select,.vii textarea{display:inline;vertical-align:middle;float:none;}
-.h-multiForm{list-style:none;}.h-multiForm li{list-style:none;display:inline-block;margin:0;padding:0;}
-.multiSelect{height:200px;width:200px;float:left;padding:0px;overflow:hidden;overflow:auto;}.multiSelect .form{height:auto;margin:0;padding:0;border:0;}
-.multiSelect .vhh{margin:0;padding:0;}.multiSelect .vhh li{overflow:hidden;width:100%;}
-.multiSelect .vhh input{float:left;}
-.multiSelect .vhh label{float:none;margin-left:20px;display:block;width:auto;clear:none;}
-.multiSelect .vii li{width:100%;}
-.information{padding:0.9em;margin-bottom:1em;background:#e6edf5;color:#3d98f1;border:1px solid #69b9da;}.information a{color:#ffffff;background:#3d98f1;padding:2px 5px 0;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;border-radius:5px;}
-.information a:hover{background:#6db1f4;}
-.error{padding:0.9em;margin-bottom:1em;background:#fbe3e4;color:#d12f19;border:1px solid #fbc2c4;}.error a{color:#ffffff;background:#d12f19;padding:2px 5px 0;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;border-radius:5px;}
-.error a:hover{background:#e74b36;}
-.notice{padding:0.9em;margin-bottom:1em;background:#fff6bf;color:#817134;border:1px solid #ffd324;}.notice a{color:#ffffff;background:#817134;padding:2px 5px 0;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;border-radius:5px;}
-.notice a:hover{background:#a59143;}
-.success{padding:0.9em;margin-bottom:1em;background:#e6efc2;color:#529214;border:1px solid #c6d880;}.success a{color:#ffffff;background:#529214;padding:2px 5px 0;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;border-radius:5px;}
-.success a:hover{background:#6bbf1a;}
-.clear,br{zoom:1;}
-.clear:after,br{display:block;visibility:hidden;height:0;clear:both;content:".";}
-.left{float:left !important;}
-.right{float:right !important;}
-.full{width:100%;}
-.tal{text-align:left;}
-.tac{text-align:center;}
-.tar{text-align:right;}
-.taj{text-align:justify;}
-.h-menu{margin:0;padding:0;float:left;}.h-menu li{list-style:none;margin:0;padding:0;float:left;}.h-menu li a{display:block;padding:5px 10px;margin:0 10px 0 0;text-decoration:none;}
-.v-menu{margin:0;padding:0;float:none;}.v-menu li{list-style:none;margin:0;padding:0;float:none;}.v-menu li a{display:block;padding:10px 5px 5px;margin:0 0 -1px 0;text-decoration:none;}
-.t-menu{margin:0;padding:0;float:left;}.t-menu li{list-style:none;margin:0;padding:0;float:left;}.t-menu li a{display:block;padding:10px 20px 4px;margin:0 -1px 0 0;text-decoration:none;}
-.btn,input[type="submit"],button{display:inline-block;padding:0.7em 1em;color:#444444;line-height:1;border:1px solid rgba(45, 45, 45, 0.5);margin:3px 0;background:#cccccc;background:#b3b3b3 none;-o-background-size:100% 100%;-moz-background-size:100% 100%;-webkit-background-size:auto auto !important;background-size:100% 100%;background:none,-webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#b3b3b3));background:none,-webkit-linear-gradient(#cccccc, #b3b3b3);background:none,-moz-linear-gradient(#cccccc, #b3b3b3);background:none,-o-linear-gradient(top, #cccccc, #b3b3b3);background:none,-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#b3b3b3));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#cccccc', EndColorStr='#b3b3b3', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#b3b3b3', GradientType=0))";text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4),0 1px 0 rgba(255, 255, 255, 0.4) inset;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4),0 1px 0 rgba(255, 255, 255, 0.4) inset;-o-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4),0 1px 0 rgba(255, 255, 255, 0.4) inset;-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4),0 1px 0 rgba(255, 255, 255, 0.4) inset;font-weight:300;}.btn:hover,input[type="submit"]:hover,button:hover{background:#b3b3b3;background:#cccccc none;-o-background-size:100% 100%;-moz-background-size:100% 100%;-webkit-background-size:auto auto !important;background-size:100% 100%;background:none,-webkit-gradient(linear, left top, left bottom, from(#b3b3b3), to(#cccccc));background:none,-webkit-linear-gradient(#b3b3b3, #cccccc);background:none,-moz-linear-gradient(#b3b3b3, #cccccc);background:none,-o-linear-gradient(top, #b3b3b3, #cccccc);background:none,-khtml-gradient(linear, left top, left bottom, from(#b3b3b3), to(#cccccc));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#b3b3b3', EndColorStr='#cccccc', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#b3b3b3', EndColorStr='#cccccc', GradientType=0))";-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4),0 2px 1px rgba(32, 32, 32, 0.2) inset;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4),0 2px 1px rgba(32, 32, 32, 0.2) inset;-o-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4),0 2px 1px rgba(32, 32, 32, 0.2) inset;-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4),0 2px 1px rgba(32, 32, 32, 0.2) inset;color:#444444;text-decoration:none;}
-.sbtn{font-size:11px !important;font-weight:bold;text-transform:uppercase;padding:6px 5px 5px;-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;}
-h1 a.btn,h2 a.btn,h3 a.btn{padding:25px 30px 20px !important;font-weight:bold;}
-.text2Col{-webkit-column-count:2;-webkit-column-gap:1%;-moz-column-count:2;-moz-column-gap:1%;column-count:2;column-gap:1%;}
-.text3Col{-webkit-column-count:3;-webkit-column-gap:1%;-moz-column-count:3;-moz-column-gap:1%;column-count:3;column-gap:1%;}
-.ui-helper-hidden{display:none;}
-.ui-helper-hidden-accessible{position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);}
-.ui-helper-reset{margin:0;padding:0;border:0;outline:0;text-decoration:none;list-style:none;}
-.ui-helper-clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
-.ui-helper-clearfix{display:inline-block;}
-* html .ui-helper-clearfix{height:1%;}
-.ui-helper-clearfix{display:block;}
-.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:alpha(opacity=0);}
-.ui-state-disabled{cursor:default !important;}
-.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat;}
-.ui-widget-overlay{position:absolute;top:0;left:0;width:100%;height:100%;}
-.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{text-decoration:none;}
-.ui-state-hover a,.ui-state-hover a:hover{text-decoration:none;}
-.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{text-decoration:none;}
-.ui-widget :active{outline:none;}
-.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{padding:0.9em;margin-bottom:1em;background:#fff6bf;color:#817134;border:1px solid #ffd324;}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#ffffff;background:#817134;padding:2px 5px 0;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;border-radius:5px;}
-.ui-state-highlight a:hover,.ui-widget-content .ui-state-highlight a:hover,.ui-widget-header .ui-state-highlight a:hover{background:#a59143;}
-.ui-state-highlight p,.ui-widget-content .ui-state-highlight p,.ui-widget-header .ui-state-highlight p{margin:5px 0;}
-.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{padding:0.9em;margin-bottom:1em;background:#fbe3e4;color:#d12f19;border:1px solid #fbc2c4;}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#ffffff;background:#d12f19;padding:2px 5px 0;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;border-radius:5px;}
-.ui-state-error a:hover,.ui-widget-content .ui-state-error a:hover,.ui-widget-header .ui-state-error a:hover{background:#e74b36;}
-.ui-state-error p,.ui-widget-content .ui-state-error p,.ui-widget-header .ui-state-error p{margin:5px 0;}
-.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold;}
-.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:0.7;filter:alpha(opacity=70);font-weight:normal;}
-.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:0.35;filter:alpha(opacity=35);background-image:none;}
-.ui-icon{width:16px;height:16px;background-image:url(/images/ui-icons.png);}
-.ui-widget-content .ui-icon{background-image:url(/images/ui-icons.png);}
-.ui-widget-header .ui-icon{background-image:url(/images/ui-icons.png);}
-.ui-state-default .ui-icon{background-image:url(/images/ui-icons.png);}
-.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url(/images/ui-icons.png);}
-.ui-state-active .ui-icon{background-image:url(/images/ui-icons.png);}
-.ui-state-highlight .ui-icon{background-image:url(/images/ui-icons.png);}
-.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url(/images/ui-icons.png);}
-.ui-icon-carat-1-n{background-position:0 0;}
-.ui-icon-carat-1-ne{background-position:-16px 0;}
-.ui-icon-carat-1-e{background-position:-32px 0;}
-.ui-icon-carat-1-se{background-position:-48px 0;}
-.ui-icon-carat-1-s{background-position:-64px 0;}
-.ui-icon-carat-1-sw{background-position:-80px 0;}
-.ui-icon-carat-1-w{background-position:-96px 0;}
-.ui-icon-carat-1-nw{background-position:-112px 0;}
-.ui-icon-carat-2-n-s{background-position:-128px 0;}
-.ui-icon-carat-2-e-w{background-position:-144px 0;}
-.ui-icon-triangle-1-n{background-position:0 -16px;}
-.ui-icon-triangle-1-ne{background-position:-16px -16px;}
-.ui-icon-triangle-1-e{background-position:-32px -16px;}
-.ui-icon-triangle-1-se{background-position:-48px -16px;}
-.ui-icon-triangle-1-s{background-position:-64px -16px;}
-.ui-icon-triangle-1-sw{background-position:-80px -16px;}
-.ui-icon-triangle-1-w{background-position:-96px -16px;}
-.ui-icon-triangle-1-nw{background-position:-112px -16px;}
-.ui-icon-triangle-2-n-s{background-position:-128px -16px;}
-.ui-icon-triangle-2-e-w{background-position:-144px -16px;}
-.ui-icon-arrow-1-n{background-position:0 -32px;}
-.ui-icon-arrow-1-ne{background-position:-16px -32px;}
-.ui-icon-arrow-1-e{background-position:-32px -32px;}
-.ui-icon-arrow-1-se{background-position:-48px -32px;}
-.ui-icon-arrow-1-s{background-position:-64px -32px;}
-.ui-icon-arrow-1-sw{background-position:-80px -32px;}
-.ui-icon-arrow-1-w{background-position:-96px -32px;}
-.ui-icon-arrow-1-nw{background-position:-112px -32px;}
-.ui-icon-arrow-2-n-s{background-position:-128px -32px;}
-.ui-icon-arrow-2-ne-sw{background-position:-144px -32px;}
-.ui-icon-arrow-2-e-w{background-position:-160px -32px;}
-.ui-icon-arrow-2-se-nw{background-position:-176px -32px;}
-.ui-icon-arrowstop-1-n{background-position:-192px -32px;}
-.ui-icon-arrowstop-1-e{background-position:-208px -32px;}
-.ui-icon-arrowstop-1-s{background-position:-224px -32px;}
-.ui-icon-arrowstop-1-w{background-position:-240px -32px;}
-.ui-icon-arrowthick-1-n{background-position:0 -48px;}
-.ui-icon-arrowthick-1-ne{background-position:-16px -48px;}
-.ui-icon-arrowthick-1-e{background-position:-32px -48px;}
-.ui-icon-arrowthick-1-se{background-position:-48px -48px;}
-.ui-icon-arrowthick-1-s{background-position:-64px -48px;}
-.ui-icon-arrowthick-1-sw{background-position:-80px -48px;}
-.ui-icon-arrowthick-1-w{background-position:-96px -48px;}
-.ui-icon-arrowthick-1-nw{background-position:-112px -48px;}
-.ui-icon-arrowthick-2-n-s{background-position:-128px -48px;}
-.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px;}
-.ui-icon-arrowthick-2-e-w{background-position:-160px -48px;}
-.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px;}
-.ui-icon-arrowthickstop-1-n{background-position:-192px -48px;}
-.ui-icon-arrowthickstop-1-e{background-position:-208px -48px;}
-.ui-icon-arrowthickstop-1-s{background-position:-224px -48px;}
-.ui-icon-arrowthickstop-1-w{background-position:-240px -48px;}
-.ui-icon-arrowreturnthick-1-w{background-position:0 -64px;}
-.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px;}
-.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px;}
-.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px;}
-.ui-icon-arrowreturn-1-w{background-position:-64px -64px;}
-.ui-icon-arrowreturn-1-n{background-position:-80px -64px;}
-.ui-icon-arrowreturn-1-e{background-position:-96px -64px;}
-.ui-icon-arrowreturn-1-s{background-position:-112px -64px;}
-.ui-icon-arrowrefresh-1-w{background-position:-128px -64px;}
-.ui-icon-arrowrefresh-1-n{background-position:-144px -64px;}
-.ui-icon-arrowrefresh-1-e{background-position:-160px -64px;}
-.ui-icon-arrowrefresh-1-s{background-position:-176px -64px;}
-.ui-icon-arrow-4{background-position:0 -80px;}
-.ui-icon-arrow-4-diag{background-position:-16px -80px;}
-.ui-icon-extlink{background-position:-32px -80px;}
-.ui-icon-newwin{background-position:-48px -80px;}
-.ui-icon-refresh{background-position:-64px -80px;}
-.ui-icon-shuffle{background-position:-80px -80px;}
-.ui-icon-transfer-e-w{background-position:-96px -80px;}
-.ui-icon-transferthick-e-w{background-position:-112px -80px;}
-.ui-icon-folder-collapsed{background-position:0 -96px;}
-.ui-icon-folder-open{background-position:-16px -96px;}
-.ui-icon-document{background-position:-32px -96px;}
-.ui-icon-document-b{background-position:-48px -96px;}
-.ui-icon-note{background-position:-64px -96px;}
-.ui-icon-mail-closed{background-position:-80px -96px;}
-.ui-icon-mail-open{background-position:-96px -96px;}
-.ui-icon-suitcase{background-position:-112px -96px;}
-.ui-icon-comment{background-position:-128px -96px;}
-.ui-icon-person{background-position:-144px -96px;}
-.ui-icon-print{background-position:-160px -96px;}
-.ui-icon-trash{background-position:-176px -96px;}
-.ui-icon-locked{background-position:-192px -96px;}
-.ui-icon-unlocked{background-position:-208px -96px;}
-.ui-icon-bookmark{background-position:-224px -96px;}
-.ui-icon-tag{background-position:-240px -96px;}
-.ui-icon-home{background-position:0 -112px;}
-.ui-icon-flag{background-position:-16px -112px;}
-.ui-icon-calendar{background-position:-32px -112px;}
-.ui-icon-cart{background-position:-48px -112px;}
-.ui-icon-pencil{background-position:-64px -112px;}
-.ui-icon-clock{background-position:-80px -112px;}
-.ui-icon-disk{background-position:-96px -112px;}
-.ui-icon-calculator{background-position:-112px -112px;}
-.ui-icon-zoomin{background-position:-128px -112px;}
-.ui-icon-zoomout{background-position:-144px -112px;}
-.ui-icon-search{background-position:-160px -112px;}
-.ui-icon-wrench{background-position:-176px -112px;}
-.ui-icon-gear{background-position:-192px -112px;}
-.ui-icon-heart{background-position:-208px -112px;}
-.ui-icon-star{background-position:-224px -112px;}
-.ui-icon-link{background-position:-240px -112px;}
-.ui-icon-cancel{background-position:0 -128px;}
-.ui-icon-plus{background-position:-16px -128px;}
-.ui-icon-plusthick{background-position:-32px -128px;}
-.ui-icon-minus{background-position:-48px -128px;}
-.ui-icon-minusthick{background-position:-64px -128px;}
-.ui-icon-close{background-position:-80px -128px;}
-.ui-icon-closethick{background-position:-96px -128px;}
-.ui-icon-key{background-position:-112px -128px;}
-.ui-icon-lightbulb{background-position:-128px -128px;}
-.ui-icon-scissors{background-position:-144px -128px;}
-.ui-icon-clipboard{background-position:-160px -128px;}
-.ui-icon-copy{background-position:-176px -128px;}
-.ui-icon-contact{background-position:-192px -128px;}
-.ui-icon-image{background-position:-208px -128px;}
-.ui-icon-video{background-position:-224px -128px;}
-.ui-icon-script{background-position:-240px -128px;}
-.ui-icon-alert{background-position:0 -144px;}
-.ui-icon-info{background-position:-16px -144px;}
-.ui-icon-notice{background-position:-32px -144px;}
-.ui-icon-help{background-position:-48px -144px;}
-.ui-icon-check{background-position:-64px -144px;}
-.ui-icon-bullet{background-position:-80px -144px;}
-.ui-icon-radio-off{background-position:-96px -144px;}
-.ui-icon-radio-on{background-position:-112px -144px;}
-.ui-icon-pin-w{background-position:-128px -144px;}
-.ui-icon-pin-s{background-position:-144px -144px;}
-.ui-icon-play{background-position:0 -160px;}
-.ui-icon-pause{background-position:-16px -160px;}
-.ui-icon-seek-next{background-position:-32px -160px;}
-.ui-icon-seek-prev{background-position:-48px -160px;}
-.ui-icon-seek-end{background-position:-64px -160px;}
-.ui-icon-seek-start{background-position:-80px -160px;}
-.ui-icon-seek-first{background-position:-80px -160px;}
-.ui-icon-stop{background-position:-96px -160px;}
-.ui-icon-eject{background-position:-112px -160px;}
-.ui-icon-volume-off{background-position:-128px -160px;}
-.ui-icon-volume-on{background-position:-144px -160px;}
-.ui-icon-power{background-position:0 -176px;}
-.ui-icon-signal-diag{background-position:-16px -176px;}
-.ui-icon-signal{background-position:-32px -176px;}
-.ui-icon-battery-0{background-position:-48px -176px;}
-.ui-icon-battery-1{background-position:-64px -176px;}
-.ui-icon-battery-2{background-position:-80px -176px;}
-.ui-icon-battery-3{background-position:-96px -176px;}
-.ui-icon-circle-plus{background-position:0 -192px;}
-.ui-icon-circle-minus{background-position:-16px -192px;}
-.ui-icon-circle-close{background-position:-32px -192px;}