UNPKG

psychic-ui

Version:
2,178 lines • 139 kB
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>psychic-ui</title>
    <style>/* Pretty printing styles. Used with prettify.js. */

/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 }  /* plain text */

@media screen {
  .str { color: #080 }  /* string content */
  .kwd { color: #008 }  /* a keyword */
  .com { color: #800 }  /* a comment */
  .typ { color: #606 }  /* a type name */
  .lit { color: #066 }  /* a literal value */
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo { color: #660 }
  .tag { color: #008 }  /* a markup tag name */
  .atn { color: #606 }  /* a markup attribute name */
  .atv { color: #080 }  /* a markup attribute value */
  .dec, .var { color: #606 }  /* a declaration; a variable name */
  .fun { color: red }  /* a function name */
}

/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .str { color: #060 }
  .kwd { color: #006; font-weight: bold }
  .com { color: #600; font-style: italic }
  .typ { color: #404; font-weight: bold }
  .lit { color: #044 }
  .pun, .opn, .clo { color: #440 }
  .tag { color: #006; font-weight: bold }
  .atn { color: #404 }
  .atv { color: #060 }
}

/* Put a border around prettyprinted code snippets. */
pre.prettyprint { padding: 2px; border: 1px solid #888 }

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.prettyprint{background:#fff;font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#333}ol.linenums{margin-top:0;margin-bottom:0;color:#ccc}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal}@media screen{.str{color:#183691}.kwd{color:#a71d5d}.com{color:#969896}.typ{color:#0086b3}.lit{color:#0086b3}.pun{color:#333}.opn{color:#333}.clo{color:#333}.tag{color:navy}.atn{color:#795da3}.atv{color:#183691}.dec{color:#333}.var{color:teal}.fun{color:#900}}

    </style>
    <script src="http://localhost:35729/livereload.js"></script>
    <script>
      var entityMap = {
         "&": "&amp;",
         "<": "&lt;",
         ">": "&gt;",
         '"': '&quot;',
         "'": '&#39;',
         "/": '&#x2F;'
       };
      
       function escapeHtml(string) {
         return String(string).replace(/[&<>"'\/]/g, function (s) {
           return entityMap[s];
         });
       }
       document.onreadystatechange = function () {
           if (document.readyState == "complete") {
              var code = document.querySelectorAll('pre');
              for (var i = code.length; i--;) {
                  code[i].innerHTML = escapeHtml(code[i].innerHTML)
              }
              prettyPrint();
           }
       }
    </script>
    <script>!function(){/*

 Copyright (C) 2006 Google Inc.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/
window.PR_SHOULD_USE_CONTINUATION=!0;
(function(){function T(a){function d(e){var b=e.charCodeAt(0);if(92!==b)return b;var a=e.charAt(1);return(b=w[a])?b:"0"<=a&&"7">=a?parseInt(e.substring(1),8):"u"===a||"x"===a?parseInt(e.substring(2),16):e.charCodeAt(1)}function f(e){if(32>e)return(16>e?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);return"\\"===e||"-"===e||"]"===e||"^"===e?"\\"+e:e}function b(e){var b=e.substring(1,e.length-1).match(/\\u[0-9A-Fa-f]{4}|\\x[0-9A-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\s\S]|-|[^-\\]/g);e=
[];var a="^"===b[0],c=["["];a&&c.push("^");for(var a=a?1:0,g=b.length;a<g;++a){var h=b[a];if(/\\[bdsw]/i.test(h))c.push(h);else{var h=d(h),k;a+2<g&&"-"===b[a+1]?(k=d(b[a+2]),a+=2):k=h;e.push([h,k]);65>k||122<h||(65>k||90<h||e.push([Math.max(65,h)|32,Math.min(k,90)|32]),97>k||122<h||e.push([Math.max(97,h)&-33,Math.min(k,122)&-33]))}}e.sort(function(e,a){return e[0]-a[0]||a[1]-e[1]});b=[];g=[];for(a=0;a<e.length;++a)h=e[a],h[0]<=g[1]+1?g[1]=Math.max(g[1],h[1]):b.push(g=h);for(a=0;a<b.length;++a)h=b[a],
c.push(f(h[0])),h[1]>h[0]&&(h[1]+1>h[0]&&c.push("-"),c.push(f(h[1])));c.push("]");return c.join("")}function v(e){for(var a=e.source.match(/(?:\[(?:[^\x5C\x5D]|\\[\s\S])*\]|\\u[A-Fa-f0-9]{4}|\\x[A-Fa-f0-9]{2}|\\[0-9]+|\\[^ux0-9]|\(\?[:!=]|[\(\)\^]|[^\x5B\x5C\(\)\^]+)/g),c=a.length,d=[],g=0,h=0;g<c;++g){var k=a[g];"("===k?++h:"\\"===k.charAt(0)&&(k=+k.substring(1))&&(k<=h?d[k]=-1:a[g]=f(k))}for(g=1;g<d.length;++g)-1===d[g]&&(d[g]=++A);for(h=g=0;g<c;++g)k=a[g],"("===k?(++h,d[h]||(a[g]="(?:")):"\\"===
k.charAt(0)&&(k=+k.substring(1))&&k<=h&&(a[g]="\\"+d[k]);for(g=0;g<c;++g)"^"===a[g]&&"^"!==a[g+1]&&(a[g]="");if(e.ignoreCase&&n)for(g=0;g<c;++g)k=a[g],e=k.charAt(0),2<=k.length&&"["===e?a[g]=b(k):"\\"!==e&&(a[g]=k.replace(/[a-zA-Z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var A=0,n=!1,l=!1,m=0,c=a.length;m<c;++m){var p=a[m];if(p.ignoreCase)l=!0;else if(/[a-z]/i.test(p.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,""))){n=!0;
l=!1;break}}for(var w={b:8,t:9,n:10,v:11,f:12,r:13},r=[],m=0,c=a.length;m<c;++m){p=a[m];if(p.global||p.multiline)throw Error(""+p);r.push("(?:"+v(p)+")")}return new RegExp(r.join("|"),l?"gi":"g")}function U(a,d){function f(a){var c=a.nodeType;if(1==c){if(!b.test(a.className)){for(c=a.firstChild;c;c=c.nextSibling)f(c);c=a.nodeName.toLowerCase();if("br"===c||"li"===c)v[l]="\n",n[l<<1]=A++,n[l++<<1|1]=a}}else if(3==c||4==c)c=a.nodeValue,c.length&&(c=d?c.replace(/\r\n?/g,"\n"):c.replace(/[ \t\r\n]+/g,
" "),v[l]=c,n[l<<1]=A,A+=c.length,n[l++<<1|1]=a)}var b=/(?:^|\s)nocode(?:\s|$)/,v=[],A=0,n=[],l=0;f(a);return{a:v.join("").replace(/\n$/,""),c:n}}function J(a,d,f,b,v){f&&(a={h:a,l:1,j:null,m:null,a:f,c:null,i:d,g:null},b(a),v.push.apply(v,a.g))}function V(a){for(var d=void 0,f=a.firstChild;f;f=f.nextSibling)var b=f.nodeType,d=1===b?d?a:f:3===b?W.test(f.nodeValue)?a:d:d;return d===a?void 0:d}function G(a,d){function f(a){for(var l=a.i,m=a.h,c=[l,"pln"],p=0,w=a.a.match(v)||[],r={},e=0,t=w.length;e<
t;++e){var z=w[e],q=r[z],g=void 0,h;if("string"===typeof q)h=!1;else{var k=b[z.charAt(0)];if(k)g=z.match(k[1]),q=k[0];else{for(h=0;h<A;++h)if(k=d[h],g=z.match(k[1])){q=k[0];break}g||(q="pln")}!(h=5<=q.length&&"lang-"===q.substring(0,5))||g&&"string"===typeof g[1]||(h=!1,q="src");h||(r[z]=q)}k=p;p+=z.length;if(h){h=g[1];var B=z.indexOf(h),D=B+h.length;g[2]&&(D=z.length-g[2].length,B=D-h.length);q=q.substring(5);J(m,l+k,z.substring(0,B),f,c);J(m,l+k+B,h,K(q,h),c);J(m,l+k+D,z.substring(D),f,c)}else c.push(l+
k,q)}a.g=c}var b={},v;(function(){for(var f=a.concat(d),l=[],m={},c=0,p=f.length;c<p;++c){var w=f[c],r=w[3];if(r)for(var e=r.length;0<=--e;)b[r.charAt(e)]=w;w=w[1];r=""+w;m.hasOwnProperty(r)||(l.push(w),m[r]=null)}l.push(/[\0-\uffff]/);v=T(l)})();var A=d.length;return f}function y(a){var d=[],f=[];a.tripleQuotedStrings?d.push(["str",/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
null,"'\""]):a.multiLineStrings?d.push(["str",/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):d.push(["str",/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);a.verbatimStrings&&f.push(["str",/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);var b=a.hashComments;b&&(a.cStyleComments?(1<b?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
null,"#"]),f.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,null])):d.push(["com",/^#[^\r\n]*/,null,"#"]));a.cStyleComments&&(f.push(["com",/^\/\/[^\r\n]*/,null]),f.push(["com",/^\/\*[\s\S]*?(?:\*\/|$)/,null]));if(b=a.regexLiterals){var v=(b=1<b?"":"\n\r")?".":"[\\S\\s]";f.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+
("/(?=[^/*"+b+"])(?:[^/\\x5B\\x5C"+b+"]|\\x5C"+v+"|\\x5B(?:[^\\x5C\\x5D"+b+"]|\\x5C"+v+")*(?:\\x5D|$))+/")+")")])}(b=a.types)&&f.push(["typ",b]);b=(""+a.keywords).replace(/^ | $/g,"");b.length&&f.push(["kwd",new RegExp("^(?:"+b.replace(/[\s,]+/g,"|")+")\\b"),null]);d.push(["pln",/^\s+/,null," \r\n\t\u00a0"]);b="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(b+="(?!s*/)");f.push(["lit",/^@[a-z_$][a-z_$@0-9]*/i,null],["typ",/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],["pln",/^[a-z_$][a-z_$@0-9]*/i,
null],["lit",/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],["pln",/^\\[\s\S]?/,null],["pun",new RegExp(b),null]);return G(d,f)}function L(a,d,f){function b(a){var c=a.nodeType;if(1==c&&!A.test(a.className))if("br"===a.nodeName)v(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)b(a);else if((3==c||4==c)&&f){var d=a.nodeValue,q=d.match(n);q&&(c=d.substring(0,q.index),a.nodeValue=c,(d=d.substring(q.index+q[0].length))&&
a.parentNode.insertBefore(l.createTextNode(d),a.nextSibling),v(a),c||a.parentNode.removeChild(a))}}function v(a){function b(a,c){var d=c?a.cloneNode(!1):a,k=a.parentNode;if(k){var k=b(k,1),e=a.nextSibling;k.appendChild(d);for(var f=e;f;f=e)e=f.nextSibling,k.appendChild(f)}return d}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;a=b(a.nextSibling,0);for(var d;(d=a.parentNode)&&1===d.nodeType;)a=d;c.push(a)}for(var A=/(?:^|\s)nocode(?:\s|$)/,n=/\r\n?|\n/,l=a.ownerDocument,m=l.createElement("li");a.firstChild;)m.appendChild(a.firstChild);
for(var c=[m],p=0;p<c.length;++p)b(c[p]);d===(d|0)&&c[0].setAttribute("value",d);var w=l.createElement("ol");w.className="linenums";d=Math.max(0,d-1|0)||0;for(var p=0,r=c.length;p<r;++p)m=c[p],m.className="L"+(p+d)%10,m.firstChild||m.appendChild(l.createTextNode("\u00a0")),w.appendChild(m);a.appendChild(w)}function t(a,d){for(var f=d.length;0<=--f;){var b=d[f];I.hasOwnProperty(b)?E.console&&console.warn("cannot override language handler %s",b):I[b]=a}}function K(a,d){a&&I.hasOwnProperty(a)||(a=/^\s*</.test(d)?
"default-markup":"default-code");return I[a]}function M(a){var d=a.j;try{var f=U(a.h,a.l),b=f.a;a.a=b;a.c=f.c;a.i=0;K(d,b)(a);var v=/\bMSIE\s(\d+)/.exec(navigator.userAgent),v=v&&8>=+v[1],d=/\n/g,A=a.a,n=A.length,f=0,l=a.c,m=l.length,b=0,c=a.g,p=c.length,w=0;c[p]=n;var r,e;for(e=r=0;e<p;)c[e]!==c[e+2]?(c[r++]=c[e++],c[r++]=c[e++]):e+=2;p=r;for(e=r=0;e<p;){for(var t=c[e],z=c[e+1],q=e+2;q+2<=p&&c[q+1]===z;)q+=2;c[r++]=t;c[r++]=z;e=q}c.length=r;var g=a.h;a="";g&&(a=g.style.display,g.style.display="none");
try{for(;b<m;){var h=l[b+2]||n,k=c[w+2]||n,q=Math.min(h,k),B=l[b+1],D;if(1!==B.nodeType&&(D=A.substring(f,q))){v&&(D=D.replace(d,"\r"));B.nodeValue=D;var N=B.ownerDocument,u=N.createElement("span");u.className=c[w+1];var y=B.parentNode;y.replaceChild(u,B);u.appendChild(B);f<h&&(l[b+1]=B=N.createTextNode(A.substring(q,h)),y.insertBefore(B,u.nextSibling))}f=q;f>=h&&(b+=2);f>=k&&(w+=2)}}finally{g&&(g.style.display=a)}}catch(x){E.console&&console.log(x&&x.stack||x)}}var E=window,C=["break,continue,do,else,for,if,return,while"],
F=[[C,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],H=[F,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],
O=[F,"abstract,assert,boolean,byte,extends,finally,final,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],P=[F,"abstract,as,base,bool,by,byte,checked,decimal,delegate,descending,dynamic,event,finally,fixed,foreach,from,group,implicit,in,interface,internal,into,is,let,lock,null,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var,virtual,where"],F=[F,"debugger,eval,export,function,get,instanceof,null,set,undefined,var,with,Infinity,NaN"],
Q=[C,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],R=[C,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],C=[C,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],S=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,
W=/\S/,X=y({keywords:[H,P,O,F,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",Q,R,C],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),I={};t(X,["default-code"]);t(G([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",
/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),"default-markup htm html mxml xhtml xml xsl".split(" "));t(G([["pln",/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
["pun",/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);t(G([],[["atv",/^[\s\S]+/]]),["uq.val"]);t(y({keywords:H,hashComments:!0,cStyleComments:!0,types:S}),"c cc cpp cxx cyc m".split(" "));t(y({keywords:"null,true,false"}),["json"]);t(y({keywords:P,hashComments:!0,cStyleComments:!0,
verbatimStrings:!0,types:S}),["cs"]);t(y({keywords:O,cStyleComments:!0}),["java"]);t(y({keywords:C,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);t(y({keywords:Q,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);t(y({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:2}),
["perl","pl","pm"]);t(y({keywords:R,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);t(y({keywords:F,cStyleComments:!0,regexLiterals:!0}),["javascript","js"]);t(y({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);t(G([],[["str",/^[\s\S]+/]]),["regex"]);
var Y=E.PR={createSimpleLexer:G,registerLangHandler:t,sourceDecorator:y,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:E.prettyPrintOne=function(a,d,f){f=f||!1;d=d||null;var b=document.createElement("div");b.innerHTML="<pre>"+a+"</pre>";b=b.firstChild;f&&L(b,f,!0);M({j:d,m:f,h:b,l:1,a:null,i:null,c:null,
g:null});return b.innerHTML},prettyPrint:E.prettyPrint=function(a,d){function f(){for(var b=E.PR_SHOULD_USE_CONTINUATION?c.now()+250:Infinity;p<t.length&&c.now()<b;p++){for(var d=t[p],l=g,m=d;m=m.previousSibling;){var n=m.nodeType,u=(7===n||8===n)&&m.nodeValue;if(u?!/^\??prettify\b/.test(u):3!==n||/\S/.test(m.nodeValue))break;if(u){l={};u.replace(/\b(\w+)=([\w:.%+-]+)/g,function(a,b,c){l[b]=c});break}}m=d.className;if((l!==g||r.test(m))&&!e.test(m)){n=!1;for(u=d.parentNode;u;u=u.parentNode)if(q.test(u.tagName)&&
u.className&&r.test(u.className)){n=!0;break}if(!n){d.className+=" prettyprinted";n=l.lang;if(!n){var n=m.match(w),C;!n&&(C=V(d))&&z.test(C.tagName)&&(n=C.className.match(w));n&&(n=n[1])}if(y.test(d.tagName))u=1;else var u=d.currentStyle,x=v.defaultView,u=(u=u?u.whiteSpace:x&&x.getComputedStyle?x.getComputedStyle(d,null).getPropertyValue("white-space"):0)&&"pre"===u.substring(0,3);x=l.linenums;(x="true"===x||+x)||(x=(x=m.match(/\blinenums\b(?::(\d+))?/))?x[1]&&x[1].length?+x[1]:!0:!1);x&&L(d,x,u);
M({j:n,h:d,m:x,l:u,a:null,i:null,c:null,g:null})}}}p<t.length?E.setTimeout(f,250):"function"===typeof a&&a()}for(var b=d||document.body,v=b.ownerDocument||document,b=[b.getElementsByTagName("pre"),b.getElementsByTagName("code"),b.getElementsByTagName("xmp")],t=[],n=0;n<b.length;++n)for(var l=0,m=b[n].length;l<m;++l)t.push(b[n][l]);var b=null,c=Date;c.now||(c={now:function(){return+new Date}});var p=0,w=/\blang(?:uage)?-([\w.]+)(?!\S)/,r=/\bprettyprint\b/,e=/\bprettyprinted\b/,y=/pre|xmp/i,z=/^code$/i,
q=/^(?:pre|code|xmp)$/i,g={};f()}},H=E.define;"function"===typeof H&&H.amd&&H("google-code-prettify",[],function(){return Y})})();}()

    </script>
    <style>
      .example {
          width: 65%;
          margin: 0 auto;
      }
      body {
          padding-bottom: 120px;
      }
    </style>
    <style>/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template, /* 1 */
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

.text-white{color:#fff !important}.background-white{background-color:#fff !important}.text-black{color:#000 !important}.background-black{background-color:#000 !important}.text-default{color:#222 !important}.background-default{background-color:#222 !important}.text-primary{color:#2780e3 !important}.background-primary{background-color:#2780e3 !important}.text-success{color:#3fb618 !important}.background-success{background-color:#3fb618 !important}.text-info{color:#9954bb !important}.background-info{background-color:#9954bb !important}.text-warning{color:#ff7518 !important}.background-warning{background-color:#ff7518 !important}.text-danger{color:#ff0039 !important}.background-danger{background-color:#ff0039 !important}.no-border{border:0 !important}.responsive{width:100%;height:auto}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}hr{border:0;height:0;border-top:1px solid #222;border-bottom:1px solid rgba(255,255,255,0.3)}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:5px}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee;}blockquote.text-white{border-color:#fff !important}blockquote.text-black{border-color:#000 !important}blockquote.text-default{border-color:#222 !important}blockquote.text-primary{border-color:#2780e3 !important}blockquote.text-success{border-color:#3fb618 !important}blockquote.text-info{border-color:#9954bb !important}blockquote.text-warning{border-color:#ff7518 !important}blockquote.text-danger{border-color:#ff0039 !important}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}.a{color:#0079ad;text-decoration:none;font-weight:300;}.a:hover{text-decoration:underline}small{color:#777;font-size:75%;font-weight:400}.grid{width:100%;}.grid:after{clear:both;visibility:hidden;display:block;font-size:0;content:' ';height:0}.grid > * > *{word-wrap:break-word}.grid > div{float:left;box-sizing:border-box;min-height:1px}.grid > .col-0-12{display:none}.grid > .col-1-12{width:8.333333333333332%;margin-left:0%;margin-right:0%}.grid > .col-2-12{width:16.666666666666664%;margin-left:0%;margin-right:0%}.grid > .col-3-12{width:25%;margin-left:0%;margin-right:0%}.grid > .col-4-12{width:33.33333333333333%;margin-left:0%;margin-right:0%}.grid > .col-5-12{width:41.66666666666667%;margin-left:0%;margin-right:0%}.grid > .col-6-12{width:50%;margin-left:0%;margin-right:0%}.grid > .col-7-12{width:58.333333333333336%;margin-left:0%;margin-right:0%}.grid > .col-8-12{width:66.66666666666666%;margin-left:0%;margin-right:0%}.grid > .col-9-12{width:75%;margin-left:0%;margin-right:0%}.grid > .col-10-12{width:83.33333333333334%;margin-left:0%;margin-right:0%}.grid > .col-11-12{width:91.66666666666666%;margin-left:0%;margin-right:0%}.grid > .col-12-12{width:100%;margin-left:0%;margin-right:0%}@media screen and (min-width:32em){.grid > .col-sm-0-12{display:none}.grid > .col-sm-1-12{width:8.3333%;margin-left:0%;margin-right:0%}.grid > .col-sm-2-12{width:16.6666%;margin-left:0%;margin-right:0%}.grid > .col-sm-3-12{width:25%;margin-left:0%;margin-right:0%}.grid > .col-sm-4-12{width:33.3333%;margin-left:0%;margin-right:0%}.grid > .col-sm-5-12{width:41.6666%;margin-left:0%;margin-right:0%}.grid > .col-sm-6-12{width:50%;margin-left:0%;margin-right:0%}.grid > .col-sm-7-12{width:58.3333%;margin-left:0%;margin-right:0%}.grid > .col-sm-8-12{width:66.6666%;margin-left:0%;margin-right:0%}.grid > .col-sm-9-12{width:75%;margin-left:0%;margin-right:0%}.grid > .col-sm-10-12{width:83.3333%;margin-left:0%;margin-right:0%}.grid > .col-sm-11-12{width:91.6666%;margin-left:0%;margin-right:0%}.grid > .col-sm-12-12{width:100%;margin-left:0%;margin-right:0%}}@media screen and (min-width:48em){.grid > .col-md-0-12{display:none}.grid > .col-md-1-12{width:8.3333%;margin-left:0%;margin-right:0%}.grid > .col-md-2-12{width:16.6666%;margin-left:0%;margin-right:0%}.grid > .col-md-3-12{width:25%;margin-left:0%;margin-right:0%}.grid > .col-md-4-12{width:33.3333%;margin-left:0%;margin-right:0%}.grid > .col-md-5-12{width:41.6666%;margin-left:0%;margin-right:0%}.grid > .col-md-6-12{width:50%;margin-left:0%;margin-right:0%}.grid > .col-md-7-12{width:58.3333%;margin-left:0%;margin-right:0%}.grid > .col-md-8-12{width:66.6666%;margin-left:0%;margin-right:0%}.grid > .col-md-9-12{width:75%;margin-left:0%;margin-right:0%}.grid > .col-md-10-12{width:83.3333%;margin-left:0%;margin-right:0%}.grid > .col-md-11-12{width:91.6666%;margin-left:0%;margin-right:0%}.grid > .col-md-12-12{width:100%;margin-left:0%;margin-right:0%}}@media screen and (min-width:64em){.grid > .col-lg-0-12{display:none}.grid > .col-lg-1-12{width:8.3333%;margin-left:0%;margin-right:0%}.grid > .col-lg-2-12{width:16.6666%;margin-left:0%;margin-right:0%}.grid > .col-lg-3-12{width:25%;margin-left:0%;margin-right:0%}.grid > .col-lg-4-12{width:33.3333%;margin-left:0%;margin-right:0%}.grid > .col-lg-5-12{width:41.6666%;margin-left:0%;margin-right:0%}.grid > .col-lg-6-12{width:50%;margin-left:0%;margin-right:0%}.grid > .col-lg-7-12{width:58.3333%;margin-left:0%;margin-right:0%}.grid > .col-lg-8-12{width:66.6666%;margin-left:0%;margin-right:0%}.grid > .col-lg-9-12{width:75%;margin-left:0%;margin-right:0%}.grid > .col-lg-10-12{width:83.3333%;margin-left:0%;margin-right:0%}.grid > .col-lg-11-12{width:91.6666%;margin-left:0%;margin-right:0%}.grid > .col-lg-12-12{width:100%;margin-left:0%;margin-right:0%}}@media screen and (min-width:80em){.grid > .col-xl-0-12{display:none}.grid > .col-xl-1-12{width:8.3333%;margin-left:0%;margin-right:0%}.grid > .col-xl-2-12{width:16.6666%;margin-left:0%;margin-right:0%}.grid > .col-xl-3-12{width:25%;margin-left:0%;margin-right:0%}.grid > .col-xl-4-12{width:33.3333%;margin-left:0%;margin-right:0%}.grid > .col-xl-5-12{width:41.6666%;margin-left:0%;margin-right:0%}.grid > .col-xl-6-12{width:50%;margin-left:0%;margin-right:0%}.grid > .col-xl-7-12{width:58.3333%;margin-left:0%;margin-right:0%}.grid > .col-xl-8-12{width:66.6666%;margin-left:0%;margin-right:0%}.grid > .col-xl-9-12{width:75%;margin-left:0%;margin-right:0%}.grid > .col-xl-10-12{width:83.3333%;margin-left:0%;margin-right:0%}.grid > .col-xl-11-12{width:91.6666%;margin-left:0%;margin-right:0%}.grid > .col-xl-12-12{width:100%;margin-left:0%;margin-right:0%}}.table{text-align:center;word-break:break-all;}.table.border-white{border:none;}.table.border-white thead > tr > th{color:#fff}.table.border-white th,.table.border-white td{color:#fff}.table.border-white th,.table.border-white td{border-bottom:.1rem solid #fff}.table.border-black{border:none;}.table.border-black thead > tr > th{color:#000}.table.border-black th,.table.border-black td{color:#0d0d0d}.table.border-black th,.table.border-black td{border-bottom:.1rem solid #000}.table.border-default{border:none;}.table.border-default thead > tr > th{color:#222}.table.border-default th,.table.border-default td{color:#2d2d2d}.table.border-default th,.table.border-default td{border-bottom:.1rem solid #222}.table.border-primary{border:none;}.table.border-primary thead > tr > th{color:#2780e3}.table.border-primary th,.table.border-primary td{color:#3286e4}.table.border-primary th,.table.border-primary td{border-bottom:.1rem solid #2780e3}.table.border-success{border:none;}.table.border-success thead > tr > th{color:#3fb618}.table.border-success th,.table.border-success td{color:#44c31a}.table.border-success th,.table.border-success td{border-bottom:.1rem solid #3fb618}.table.border-info{border:none;}.table.border-info thead > tr > th{color:#9954bb}.table.border-info th,.table.border-info td{color:#9e5dbe}.table.border-info th,.table.border-info td{border-bottom:.1rem solid #9954bb}.table.border-warning{border:none;}.table.border-warning thead > tr > th{color:#ff7518}.table.border-warning th,.table.border-warning td{color:#ff7c24}.table.border-warning th,.table.border-warning td{border-bottom:.1rem solid #ff7518}.table.border-danger{border:none;}.table.border-danger thead > tr > th{color:#ff0039}.table.border-danger th,.table.border-danger td{color:#ff0d43}.table.border-danger th,.table.border-danger td{border-bottom:.1rem solid #ff0039}.table thead > tr > th{font-weight:bold}.table th,.table td{border-bottom:.1rem solid #e1e1e1;text-align:left;padding:10px}.table.responsive{width:100%;border-collapse:collapse;border-spacing:0;display:table}.table.border{border:solid}.navbar{position:relative;min-height:50px;width:100%;display:table;}.navbar.navbar-absolute,.navbar.navbar-fixed{border-right:1px solid #222;border-left:1px solid #222;border-bottom:1px solid #222}.navbar.navbar-center > .container{margin:0 auto;width:50%;position:relative}.navbar.navbar-white,.navbar.navbar-white *{color:#000;}.navbar.navbar-white > .container,.navbar.navbar-white * > .container{background-color:#fff;border-color:#bfbfbf}.navbar.navbar-black,.navbar.navbar-black *{color:#fff;}.navbar.navbar-black > .container,.navbar.navbar-black * > .container{background-color:#000;border-color:#000}.navbar.navbar-default,.navbar.navbar-default *{color:#fff;}.navbar.navbar-default > .container,.navbar.navbar-default * > .container{background-color:#222;border-color:#222}.navbar.navbar-primary,.navbar.navbar-primary *{color:#fff;}.navbar.navbar-primary > .container,.navbar.navbar-primary * > .container{background-color:#2780e3;border-color:#2780e3}.navbar.navbar-success,.navbar.navbar-success *{color:#fff;}.navbar.navbar-success > .container,.navbar.navbar-success * > .container{background-color:#3fb618;border-color:#3fb618}.navbar.navbar-info,.navbar.navbar-info *{color:#fff;}.navbar.navbar-info > .container,.navbar.navbar-info * > .container{background-color:#9954bb;border-color:#9954bb}.navbar.navbar-warning,.navbar.navbar-warning *{color:#fff;}.navbar.navbar-warning > .container,.navbar.navbar-warning * > .container{background-color:#ff7518;border-color:#ff7518}.navbar.navbar-danger,.navbar.navbar-danger *{color:#fff;}.navbar.navbar-danger > .container,.navbar.navbar-danger * > .container{background-color:#ff0039;border-color:#ff0039}.navbar > .container{clear:both;margin-right:auto;margin-left:auto;display:table;width:100%;height:60px;}.navbar > .container > .nav{float:right;margin-right:20px;margin-top:20px;display:inline-block}.navbar .navbar-title{float:left;display:inline-block;margin-left:20px;margin-top:20px;font-weight:bold;}.navbar .navbar-title > * > a{color:#000;text-decoration:none}.navbar .navbar-content{float:right;margin-left:20px;margin-top:20px}.nav.nav-left > a{border-left:3px solid transparent}.nav.nav-left:hover{text-decoration:none;border-left:3px solid #c9dff8;border-right:0 !important;border-bottom:0}.nav.nav-left:target,.nav.nav-left.active{border-left:3px solid #2780e3;border-right:0 !important;border-bottom:0}.nav.nav-stacked{display:inline-block;}.nav.nav-stacked > a{border-right:3px solid transparent;display:block;}.nav.nav-stacked > a:hover{text-decoration:none;border-right:3px solid #c9dff8;border-bottom:0}.nav.nav-stacked > a:target,.nav.nav-stacked > a.active{border-right:3px solid #2780e3;border-bottom:0}.nav.nav-stacked > label{font-weight:bold;display:inline-block;margin-top:15px;margin-bottom:15px}.nav > a{padding-bottom:5px;padding-left:4px;padding-right:4px;margin-left:2px;margin-right:2px;color:#000;text-decoration:none;}.nav > a:target,.nav > a.active{border-bottom:3px solid #2780e3}.nav > a:hover{text-decoration:none;border-bottom:3px solid #c9dff8}.nav-tab{width:100%;height:100%;position:relative;}.nav-tab li{vertical-align:top;}.nav-tab li:first-child{margin-left:8px}.nav-tab li > div{top:33px;bottom:0;left:0;width:100%;padding:8px;overflow:auto;background:#fff;box-sizing:border-box}.nav-tab ul,.nav-tab li{margin:0;padding:0;list-style:none;}.nav-tab ul > input[type="radio"],.nav-tab li > input[type="radio"]{opacity:0;}.nav-tab ul > input[type="radio"] ~ div,.nav-tab li > input[type="radio"] ~ div{display:none}.nav-tab ul > input[type="radio"] + label,.nav-tab li > input[type="radio"] + label{margin:0 1px 0 0;padding:0 18px;line-height:30px;text-align:center;border-radius:5px 5px 0 0;cursor:pointer;user-select:none}.nav-tab ul > input[type="radio"]:checked:not(:disabled) ~ div,.nav-tab li > input[type="radio"]:checked:not(:disabled) ~ div{display:block}.nav-tab ul > input[type="radio"]:disabled + label,.nav-tab li > input[type="radio"]:disabled + label{opacity:.5;cursor:no-drop}.nav-tab ul > input[type="radio"]:checked + label,.nav-tab li > input[type="radio"]:checked + label{position:relative;border-bottom:3px solid #2780e3}.nav-tab ul > input[type="radio"]:hover + label,.nav-tab li > input[type="radio"]:hover + label{text-decoration:none;border-bottom:3px solid #c9dff8}.nav-tab ul > li,.nav-tab li > li,.nav-tab ul input[type="radio"] + label,.nav-tab li input[type="radio"] + label{display:inline-block}.nav-tab ul > li > div,.nav-tab li > li > div,.nav-tab ul input[type="radio"],.nav-tab li input[type="radio"]{position:absolute}.spinner-overlay{position:relative;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:.75;z-index:3;}.spinner-overlay .spinner-wrapper{position:relative;top:calc(50% - 50px)}.spinner-overlay .spinner-message{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:30px;text-align:center;font-weight:400;z-index:100;outline:none}.spinner-overlay .spinner{height:30px;width:30px;margin:0 auto;opacity:1;background-color:rgba(255,255,255,0.702);-webkit-animation:rotation .7s infinite linear;-moz-animation:rotation .7s infinite linear;-o-animation:rotation .7s infinite linear;animation:rotation .7s infinite linear;border-left:8px solid rgba(0,0,0,0.2);border-right:8px solid rgba(0,0,0,0.2);border-bottom:8px solid rgba(0,0,0,0.2);border-top:8px solid #2180c0;border-radius:100%;}.spinner-overlay .spinner.spinner-absolute{position:absolute}.spinner-overlay .spinner.spinner-white{border-top:8px solid #fff}.spinner-overlay .spinner.spinner-white.spinner-done{border-left:8px solid #fff;border-right:8px solid #fff;border-bottom:8px solid #fff;border-top:8px solid #fff}.spinner-overlay .spinner.spinner-white.done:after{border-right:8px solid #fff;border-bottom:8px solid #fff}.spinner-overlay .spinner.spinner-black{border-top:8px solid #000}.spinner-overlay .spinner.spinner-black.spinner-done{border-left:8px solid #000;border-right:8px solid #000;border-bottom:8px solid #000;border-top:8px solid #000}.spinner-overlay .spinner.spinner-black.done:after{border-right:8px solid #000;border-bottom:8px solid #000}.spinner-overlay .spinner.spinner-default{border-top:8px solid #222}.spinner-overlay .spinner.spinner-default.spinner-done{border-left:8px solid #222;border-right:8px solid #222;border-bottom:8px solid #222;border-top:8px solid #222}.spinner-overlay .spinner.spinner-default.done:after{border-right:8px solid #222;border-bottom:8px solid #222}.spinner-overlay .spinner.spinner-primary{border-top:8px solid #2780e3}.spinner-overlay .spinner.spinner-primary.spinner-done{border-left:8px solid #2780e3;border-right:8px solid #2780e3;border-bottom:8px solid #2780e3;border-top:8px solid #2780e3}.spinner-overlay .spinner.spinner-primary.done:after{border-right:8px solid #2780e3;border-bottom:8px solid #2780e3}.spinner-overlay .spinner.spinner-success{border-top:8px solid #3fb618}.spinner-overlay .spinner.spinner-success.spinner-done{border-left:8px solid #3fb618;border-right:8px solid #3fb618;border-bottom:8px solid #3fb618;border-top:8px solid #3fb618}.spinner-overlay .spinner.spinner-success.done:after{border-right:8px solid #3fb618;border-bottom:8px solid #3fb618}.spinner-overlay .spinner.spinner-info{border-top:8px solid #9954bb}.spinner-overlay .spinner.spinner-info.spinner-done{border-left:8px solid #9954bb;border-right:8px solid #9954bb;border-bottom:8px solid #9954bb;border-top:8px solid #9954bb}.spinner-overlay .spinner.spinner-info.done:after{border-right:8px solid #9954bb;border-bottom:8px solid #9954bb}.spinner-overlay .spinner.spinner-warning{border-top:8px solid #ff7518}.spinner-overlay .spinner.spinner-warning.spinner-done{border-left:8px solid #ff7518;border-right:8px solid #ff7518;border-bottom:8px solid #ff7518;border-top:8px solid #ff7518}.spinner-overlay .spinner.spinner-warning.done:after{border-right:8px solid #ff7518;border-bottom:8px solid #ff7518}.spinner-overlay .spinner.spinner-danger{border-top:8px solid #ff0039}.spinner-overlay .spinner.spinner-danger.spinner-done{border-left:8px solid #ff0039;border-right:8px solid #ff0039;border-bottom:8px solid #ff0039;border-top:8px solid #ff0039}.spinner-overlay .spinner.spinner-danger.done:after{border-right:8px solid #ff0039;border-bottom:8px solid #ff0039}@-moz-keyframes rotation{from{transform:rotate(0)}to{transform:rotate(359deg)}}@-webkit-keyframes rotation{from{transform:rotate(0)}to{transform:rotate(359deg)}}@-o-keyframes rotation{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes rotation{from{transform:rotate(0)}to{transform:rotate(359deg)}}.btn{padding:12px 18px;margin:10px;cursor:pointer;display:inline-block;text-align:center;background-color:#fff;border:1px solid #222;color:#fff;}.btn:hover{opacity:.95}.btn:focus{outline:none}.btn.btn-block{width:100%}.btn.border-radius-0{border-radius:0}.btn.border-radius-1{border-radius:1px}.btn.border-radius-2{border-radius:2px}.btn.border-radius-3{border-radius:3px}.btn.border-radius-4{border-radius:4px}.btn.border-radius-5{border-radius:5px}.btn.border-radius-6{border-radius:6px}.btn.border-radius-7{border-radius:7px}.btn.border-radius-8{border-radius:8px}.btn.border-radius-9{border-radius:9px}.btn.border-radius-10{border-radius:10px}.btn.border-radius-11{border-radius:11px}.btn.border-radius-12{border-radius:12px}.btn.border-radius-13{border-radius:13px}.btn.border-radius-14{border-radius:14px}.btn.border-radius-15{border-radius:15px}.btn.border-radius-16{border-radius:16px}.btn.border-radius-17{border-radius:17px}.btn.border-radius-18{border-radius:18px}.btn.border-radius-19{border-radius:19px}.btn.border-radius-20{border-radius:20px}.btn.border-radius-21{border-radius:21px}.btn.border-radius-22{border-radius:22px}.btn.border-radius-23{border-radius:23px}.btn.border-radius-24{border-radius:24px}.btn.border-radius-25{border-radius:25px}.btn.border-radius-26{border-radius:26px}.btn.border-radius-27{border-radius:27px}.btn.border-radius-28{border-radius:28px}.btn.border-radius-29{border-radius:29px}.btn.border-radius-30{border-radius:30px}.btn.border-radius-31{border-radius:31px}.btn.border-radius-32{border-radius:32px}.btn.border-radius-33{border-radius:33px}.btn.border-radius-34{border-radius:34px}.btn.border-radius-35{border-radius:35px}.btn.border-radius-36{border-radius:36px}.btn.border-radius-37{border-radius:37px}.btn.border-radius-38{border-radius:38px}.btn.border-radius-39{border-radius:39px}.btn.border-radius-40{border-radius:40px}.btn.border-radius-41{border-radius:41px}.btn.border-radius-42{border-radius:42px}.btn.border-radius-43{border-radius:43px}.btn.border-radius-44{border-radius:44px}.btn.border-radius-45{border-radius:45px}.btn.border-radius-46{border-radius:46px}.btn.border-radius-47{border-radius:47px}.btn.border-radius-48{border-radius:48px}.btn.border-radius-49{border-radius:49px}.btn.border-radius-50{border-radius:50px}.btn.border-radius-51{border-radius:51px}.btn.border-radius-52{border-radius:52px}.btn.border-radius-53{border-radius:53px}.btn.border-radius-54{border-radius:54px}.btn.border-radius-55{border-radius:55px}.btn.border-radius-56{border-radius:56px}.btn.border-radius-57{border-radius:57px}.btn.border-radius-58{border-radius:58px}.btn.border-radius-59{border-radius:59px}.btn.border-radius-60{border-radius:60px}.btn.border-radius-61{border-radius:61px}.btn.border-radius-62{border-radius:62px}.btn.border-radius-63{border-radius:63px}.btn.border-radius-64{border-radius:64px}.btn.border-radius-65{border-radius:65px}.btn.border-radius-66{border-radius:66px}.btn.border-radius-67{border-radius:67px}.btn.border-radius-68{border-radius:68px}.btn.border-radius-69{border-radius:69px}.btn.border-radius-70{border-radius:70px}.btn.border-radius-71{border-radius:71px}.btn.border-radius-72{border-radius:72px}.btn.border-radius-73{border-radius:73px}.btn.border-radius-74{border-radius:74px}.btn.border-radius-75{border-radius:75px}.btn.border-radius-76{border-radius:76px}.btn.border-radius-77{border-radius:77px}.btn.border-radius-78{border-radius:78px}.btn.border-radius-79{border-radius:79px}.btn.border-radius-80{border-radius:80px}.btn.border-radius-81{border-radius:81px}.btn.border-radius-82{border-radius:82px}.btn.border-radius-83{border-radius:83px}.btn.border-radius-84{border-radius:84px}.btn.border-radius-85{border-radius:85px}.btn.border-radius-86{border-radius:86px}.btn.border-radius-87{border-radius:87px}.btn.border-radius-88{border-radius:88px}.btn.border-radius-89{border-radius:89px}.btn.border-radius-90{border-radius:90px}.btn.border-radius-91{border-radius:91px}.btn.border-radius-92{border-radius:92px}.btn.border-radius-93{border-radius:93px}.btn.border-radius-94{border-radius:94px}.btn.border-radius-95{border-radius:95px}.btn.border-radius-96{border-radius:96px}.btn.border-radius-97{border-radius:97px}.btn.border-radius-98{border-radius:98px}.btn.border-radius-99{border-radius:99px}.btn.border-radius-100{border-radius:100px}.btn.border-white{border:1px solid #fff;color:#fff;}.btn.border-white:hover{background-color:#fff;opacity:.5;border-color:#d9d9d9;color:#000}.btn.border-white:active{background-color:#d9d9d9;opacity:.5;border-color:#d9d9d9;color:#000}.btn.btn-white{border:1px solid #d9d9d9;background-color:#fff;}.btn.btn-white:hover{background-color:#fff;border-color:#d9d9d9;color:#000}.btn.btn-white:active{background-color:#d9d9d9;opacity:.5;border-color:#d9d9d9;color:#000}.btn.border-black{border:1px solid #000;color:#000;}.btn.border-black:hover{background-color:#808080;opacity:.5;border-color:#000;color:#fff}.btn.border-black:active{background-color:#000;opacity:.5;border-color:#000;color:#fff}.btn.btn-black{border:1px solid #000;background-color:#000;}.btn.btn-black:hover{background-color:#808080;border-color:#000;color:#fff}.btn.btn-black:active{background-color:#000;opacity:.5;border-color:#000;color:#fff}.btn.border-default{border:1px solid #222;color:#222;}.btn.border-default:hover{background-color:#919191;opacity:.5;border-color:#1d1d1d;color:#fff}.btn.border-default:active{background-color:#1d1d1d;opacity:.5;border-color:#1d1d1d;color:#fff}.btn.btn-default{border:1px solid #1d1d1d;background-color:#222;}.btn.btn-default:hover{background-color:#919191;border-color:#1d1d1d;color:#fff}.btn.btn-default:active{background-color:#1d1d1d;opacity:.5;border-color:#1d1d1d;color:#fff}.btn.border-primary{border:1px solid #2780e3;color:#2780e3;}.btn.border-primary:hover{background-color:#93c0f1;opacity:.5;border-color:#1a6cc8;color:#fff}.btn.border-primary:active{background-color:#1a6cc8;opacity:.5;border-color:#1a6cc8;color:#fff}.btn.btn-primary{border:1px solid #1a6cc8;background-color:#2780e3;}.btn.btn-primary:hover{background-color:#93c0f1;border-color:#1a6cc8;color:#fff}.btn.btn-primary:active{background-color:#1a6cc8;opacity:.5;border-color:#1a6cc8;color:#fff}.btn.border-success{border:1px solid #3fb618;color:#3fb618;}.btn.border-success:hover{background-color:#95ed79;opacity:.5;border-color:#369b14;color:#fff}.btn.border-success:active{background-color:#369b14;opacity:.5;border-color:#369b14;color:#fff}.btn.btn-success{border:1px solid #369b14;background-color:#3fb618;}.btn.btn-success:hover{background-color:#95ed79;border-color:#369b14;color:#fff}.btn.btn-success:active{background-color:#369b14;opacity:.5;border-color:#369b14;color:#fff}.btn.border-info{border:1px solid #9954bb;color:#9954bb;}.btn.border-info:hover{background-color:#cad;opacity:.5;border-color:#8442a5;color:#fff}.btn.border-info:active{background-color:#8442a5;opacity:.5;border-color:#8442a5;color:#fff}.btn.btn-info{border:1px solid #8442a5;background-color:#9954bb;}.btn.btn-info:hover{background-color:#cad;border-color:#8442a5;color:#fff}.btn.btn-info:active{background-color:#8442a5;opacity:.5;border-color:#8442a5;color:#fff}.btn.border-warning{border:1px solid #ff7518;color:#ff7518;}.btn.border-warning:hover{background-color:#ffba8c;opacity:.5;border-color:#ed5f00;color:#fff}.btn.border-warning:active{background-color:#ed5f00;opacity:.5;border-color:#ed5f00;color:#fff}.btn.btn-warning{border:1px solid #ed5f00;background-color:#ff7518;}.btn.btn-warning:hover{background-color:#ffba8c;border-color:#ed5f00;color:#fff}.btn.btn-warning:active{background-color:#ed5f00;opacity:.5;border-color:#ed5f00;color:#fff}.btn.border-danger{border:1px solid #ff0039;color:#ff0039;}.btn.border-danger:hover{background-color:#ff809c;opacity:.5;border-color:#d90030;color:#fff}.btn.border-danger:active{background-color:#d90030;opacity:.5;border-color:#d90030;color:#fff}.btn.btn-danger{border:1px solid #d90030;background-color:#ff0039;}.btn.btn-danger:hover{background-color:#ff809c;border-color:#d90030;color:#fff}.btn.btn-danger:active{background-color:#d90030;opacity:.5;border-color:#d90030;color:#fff}.popover-container{display:inline-block;position:relative;}.popover-container:hover .popover{display:block}.popover-container:hover .popover.right{display:inline-block}.popover-container:hover .popover.left{display:inline-block}.popover{position:absolute;font-size:12px;display:none;padding:7px 10px;color:#fff;background-color:rgba(0,0,0,0.85);border-radius:5px;}.popover.top{bottom:10px;width:200px;z-index:4;left:50%;margin-right:-50%;transform:translate(-50%,-50%);}.popover.top:before{border-top:7px solid rgba(0,0,0,0.85);border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;content:'';display:block;left:50%;margin-left:-7px;position:absolute}.popover.bottom{bottom:-50px;width:200px;z-index:4;left:50%;margin-right:-50%;transform:translate(-50%,-50%);}.popover.bottom:before{border-bottom:7px solid rgba(0,0,0,0.85);border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;content:'';display:block;left:50%;margin-left:-7px;position:absolute}.popover.right{margin-left:10px;margin-top:-10px;}.popover.right:before{border-right:7px solid rgba(0,0,0,0.85);border-top:7px solid transparent;border-bottom:7px solid transparent;content:'';display:inline-block;left:-7px;margin-top:7px;position:absolute}.popover.left{margin-top:-10px;right:115%;}.popover.left:before{border-left:7px solid rgba(0,0,0,0.85);border-top:7px solid transparent;border-bottom:7px solid transparent;content:'';display:inline-block;margin-top:7px;right:-10%;position:absolute}@-webkit-keyframes fade-in{from{opacity:0}to{opacity:1}}@-moz-keyframes fade-in{from{opacity:0}to{opacity:1}}@-ms-keyframes fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes move-up{from{bottom:30px}to{bottom:42px}}@-moz-keyframes move-up{from{bottom:30px}to{bottom:42px}}@-ms-keyframes move-up{from{bottom:30px}to{bottom:42px}}.progress{width:100%;border:1px solid #222;text-align:center;}.progress .progress-fill{padding:5px;height:10px;background-color:#2780e3;}.progress .progress-fill.progress-fill-white{font-size:9px;background-color:#fff;color:#000;}.progress .progress-fill.progress-fill-white:hover{background-color:#fff}.progress .progress-fill.progress-fill-black{font-size:9px;background-color:#000;color:#fff;}.progress .progress-fill.progress-fill-black:hover{background-color:#404040}.progress .progress-fill.progress-fill-default{font-size:9px;background-color:#222;color:#fff;}.progress .progress-fill.progress-fill-default:hover{background-color:#595959}.progress .progress-fill.progress-fill-primary{font-size:9px;background-color:#2780e3;color:#fff;}.progress .progress-fill.progress-fill-primary:hover{background-color:#5da0ea}.progress .progress-fill.progress-fill-success{font-size:9px;background-color:#3fb618;color:#fff;}.progress .progress-fill.progress-fill-success:hover{background-color:#61e436}.progress .progress-fill.progress-fill-info{font-size:9px;background-color:#9954bb;color:#fff;}.progress .progress-fill.progress-fill-info:hover{background-color:#b37fcc}.progress .progress-fill.progress-fill-warning{font-size:9px;background-color:#ff7518;color:#fff;}.progress .progress-fill.progress-fill-warning:hover{background-color:#ff9852}.progress .progress-fill.progress-fill-danger{font-size:9px;background-color:#ff0039;color:#fff;}.progress .progress-fill.progress-fill-danger:hover{background-color:#ff406a}.list{list-style:none;margin:0;padding:0;}.list > .list-item{clear:both;min-height:30px;height:auto;line-height:30px;overflow:auto;padding:10px;border-top:1px solid #222;border-right:1px solid #222;border-left:1px solid #222;}.list > .list-item.list-item-white{border-top:1px solid #fff;border-right:1px solid #fff;border-left:1px solid #fff;background-color:#fff;color:#000;}.list > .list-item.list-item-white:last-child{border-bottom:1px solid #fff}.list > .list-item.list-item-black{border-top:1px solid #333;border-right:1px solid #333;border-left:1px solid #333;background-color:#000;color:#fff;}.list > .list-item.list-item-black:last-child{border-bottom:1px solid #333}.list > .list-item.list-item-default{border-top:1px solid #4e4e4e;border-right:1px solid #4e4e4e;border-left:1px solid #4e4e4e;background-color:#222;color:#fff;}.list > .list-item.list-item-default:last-child{border-bottom:1px solid #4e4e4e}.list > .list-item.list-item-primary{border-top:1px solid #5299e9;border-right:1px solid #5299e9;border-left:1px solid #5299e9;background-color:#2780e3;color:#fff;}.list > .list-item.list-item-primary:last-child{border-bottom:1px solid #5299e9}.list > .list-item.list-item-success{border-top:1px solid #56e328;border-right:1px solid #56e328;border-left:1px solid #56e328;background-color:#3fb618;color:#fff;}.list > .list-item.list-item-success:last-child{border-bottom:1px solid #56e328}.list > .list-item.list-item-info{border-top:1px solid #ad76c9;border-right:1px solid #ad76c9;border-left:1px solid #ad76c9;background-color:#9954bb;color:#fff;}.list > .list-item.list-item-info:last-child{border-bottom:1px solid #ad76c9}.list > .list-item.list-item-warning{border-top:1px solid #ff9146;border-right:1px solid #ff9146;border-left:1px solid #ff9146;background-color:#ff7518;color:#fff;}.list > .list-item.list-item-warning:last-child{border-bottom:1px solid #ff9146}.list > .list-item.list-item-danger{border-top:1px solid #ff3361;border-right:1px solid #ff3361;border-left:1px solid #ff3361;background-color:#ff0039;color:#fff;}.list > .list-item.list-item-danger:last-child{border-bottom:1px solid #ff3361}.list > .list-item:first-child{border-top-left-radius:5px;border-top-right-radius:5px}.list > .list-item:last-child{border-bottom:1px solid #222;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.list > .list-item > .list-item-right{float:right}.list > .list-item > .list-item-left{float:left}.dropdown{position:relative;display:inline-block;}.dropdown:hover{border-bottom-left-radius:0;border-bottom-right-radius:0}.dropdown:hover .block{border-bottom-right-radius:5px}.dropdown:hover .dropdown-content{display:block}.dropdown:hover .dropdown-content:empty{display:none}.dropdown.block > .dropdown-content{margin-left:-1px}.dropdown-content{display:none;z-index:10000;position:absolute;background-color:#fff;border:1px solid #222;border-bottom-right-radius:5px;border-bottom-left-radius:5px;margin-top:12px;left:-1px;min-width:160px;}.dropdown-content:hover{display:block}.dropdown-content.dropdown-content-right{right:-1px;left:auto}.dropdown-content > ul{list-style:none;margin:0;padding:0}.dropdown-content > ul > li > a{text-decoration:none;color:#000;width:100%;height:100%;display:block;padding-top:10px;padding-bottom:10px;}.dropdown-content > ul > li > a:hover{background-color:#dedede}.modal{position:fixed;font-family:Arial,Helvetica,sans-serif;top:0;right:0;bottom:0;left:0;background:rgba(50,50,50,0.6);z-index:99999;opacity:0;transition:opacity 400ms ease-in;pointer-events:none;}.modal.modal-active,.modal.active,.modal:target{opacity:1;pointer-events:auto}.modal.modal-absolute{position:absolute;z-index:1;}.modal.modal-absolute > div{position:absolute}.modal > div{width:400px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:5px 20px 13px 20px;border-radius:0;background:#fff}.modal.modal-white > div{color:#000;border-left:10px solid #fff}.modal.modal-white > div > .modal-close{color:#000}.modal.modal-black > div{color:#000;border-left:10px solid #000}.modal.modal-black > div > .modal-close{color:#000}.modal.modal-default > div{color:#070707;border-left:10px solid #222}.modal.modal-default > div > .modal-close{color:#070707}.modal.modal-primary > div{color:#000;border-left:10px solid #2780e3}.modal.modal-primary > div > .modal-close{color:#000}.modal.modal-success > div{color:#0d2405;border-left:10px solid #3fb618}.modal.modal-success > div > .modal-close{color:#0d2405}.modal.modal-info > div{color:#000;border-left:10px solid #9954bb}.modal.modal-info > div > .modal-close{color:#000}.modal.modal-warning > div{color:#000;border-left:10px solid #ff7518}.modal.modal-warning > div > .modal-close{color:#000}.modal.modal-danger > div{color:#000;border-left:10px solid #ff0039}.modal.modal-danger > div > .modal-close{color:#000}.modal-close{line-height:25px;position:absolute;right:5px;text-align:center;top:5px;width:24px;text-decoration:none}.panel{position:relative;height:auto;border:1px solid #222;}.panel.panel-white{border:1px solid #fff;}.panel.panel-white >.panel-header{background-color:#fff;color:#fff}.panel.panel-white >.panel-footer{background-color:#fff;color:#fff}.panel.panel-black{border:1px solid #000;}.panel.panel-black >.panel-header{background-color:#000;color:#fff}.panel.panel-black >.panel-footer{background-color:#000;color:#fff}.panel.panel-default{border:1px solid #222;}.panel.panel-default >.panel-header{background-color:#222;color:#fff}.panel.panel-default >.panel-footer{background-color:#222;color:#fff}.panel.panel-primary{border:1px solid #2780e3;}.panel.panel-primary >.panel-header{background-color:#2780e3;color:#fff}.panel.panel-primary >.panel-footer{background-color:#2780e3;color:#fff}.panel.panel-success{border:1px solid #3fb618;}.panel.panel-success >.panel-header{background-color:#3fb618;color:#fff}.panel.panel-success >.panel-footer{background-color:#3fb618;color:#fff}.panel.panel-info{border:1px solid #9954bb;}.panel.panel-info >.panel-header{background-color:#9954bb;color:#fff}.panel.panel-info >.panel-footer{background-color:#9954bb;color:#fff}.panel.panel-warning{border:1px solid #ff7518;}.panel.panel-warning >.panel-header{background-color:#ff7518;color:#fff}.panel.panel-warning >.panel-footer{background-color:#ff7518;color:#fff}.panel.panel-danger{border:1px solid #ff0039;}.panel.panel-danger >.panel-header{background-color:#ff0039;color:#fff}.panel.panel-danger >.panel-footer{background-color:#ff0039;color:#fff}.panel >.panel-body{padding:15px}.panel >.panel-header{top:0;padding:15px}.panel >.panel-footer{bottom:0;padding:15px}.badge{display:table-cell;padding:5px;border-radius:100px;text-align:center;vertical-align:middle;}.badge.badge-white{background-color:#fff;color:#fff;}.badge.badge-white:hover{background-color:#fff;opacity:.85;border-color:#d9d9d9;color:#000}.badge.badge-white:active{background-color:#d9d9d9;opacity:.85;border-color:#d9d9d9;color:#000}.badge.border-white{border:1px solid #fff;color:#fff;}.badge.border-white:hover{background-color:#fff;opacity:.85;border-color:#d9d9d9;color:#000}.badge.border-white:active{background-color:#d9d9d9;opacity:.85;border-color:#d9d9d9;color:#000}.badge.badge-black{background-color:#000;color:#fff;}.badge.badge-black:hover{background-color:#808080;opacity:.85;border-color:#000;color:#fff}.badge.badge-black:active{background-color:#000;opacity:.85;border-color:#000;color:#fff}.badge.border-black{border:1px solid #000;color:#000;}.badge.border-black:hover{background-color:#808080;opacity:.85;border-color:#000;color:#fff}.badge.border-black:active{background-color:#000;opacity:.85;border-color:#000;color:#fff}.badge.badge-default{background-color:#222;color:#fff;}.badge.badge-default:hover{background-color:#919191;opacity:.85;border-color:#1d1d1d;color:#fff}.badge.badge-default:active{background-color:#1d1d1d;opacity:.85;border-color:#1d1d1d;color:#fff}.badge.border-default{border:1px solid #222;color:#222;}.badge.border-default:hover{background-color:#919191;opacity:.85;border-color:#1d1d1d;color:#fff}.badge.border-default:active{background-color:#1d1d1d;opacity:.85;border-color:#1d1d1d;color:#fff}.badge.badge-primary{background-color:#2780e3;color:#fff;}.badge.badge-primary:hover{background-color:#93c0f1;opacity:.85;border-color:#1a6cc8;color:#fff}.badge.badge-primary:active{background-color:#1a6cc8;opacity:.85;border-color:#1a6cc8;color:#fff}.badge.border-primary{border:1px solid #2780e3;color:#2780e3;}.badge.border-primary:hover{background-color:#93c0f1;opacity:.85;border-color:#1a6cc8;color:#fff}.badge.border-primary:active{background-color:#1a6cc8;opacity:.85;border-color:#1a6cc8;color:#fff}.badge.badge-success{background-color:#3fb618;color:#fff;}.badge.badge-success:hover{background-color:#95ed79;opacity:.85;border-color:#369b14;color:#fff}.badge.badge-success:active{background-color:#369b14;opacity:.85;border-color:#369b14;color:#fff}.badge.border-success{border:1px solid #3fb618;color:#3fb618;}.badge.border-success:hover{background-color:#95ed79;opacity:.85;border-color:#369b14;color:#fff}.badge.border-success:active{background-color:#369b14;opacity:.85;border-color:#369b14;color:#fff}.badge.badge-info{background-color:#9954bb;color:#fff;}.badge.badge-info:hover{background-color:#cad;opacity:.85;border-color:#8442a5;color:#fff}.badge.badge-info:active{background-color:#8442a5;opacity:.85;border-color:#8442a5;color:#fff}.badge.border-info{border:1px solid #9954bb;color:#9954bb;}.badge.border-info:hover{background-color:#cad;opacity:.85;border-color:#8442a5;color:#fff}.badge.border-info:active{background-color:#8442a5;opacity:.85;border-color:#8442a5;color:#fff}.badge.badge-warning{background-color:#ff7518;color:#fff;}.badge.badge-warning:hover{background-color:#ffba8c;opacity:.85;border-color:#ed5f00;color:#fff}.badge.badge-warning:active{background-color:#ed5f00;opacity:.85;border-color:#ed5f00;color:#fff}.badge.border-warning{border:1px solid #ff7518;color:#ff7518;}.badge.border-warning:hover{background-color:#ffba8c;opacity:.85;border-color:#ed5f00;color:#fff}.badge.border-warning:active{background-color:#ed5f00;opacity:.85;border-color:#ed5f00;color:#fff}.badge.badge-danger{background-color:#ff0039;color:#fff;}.badge.badge-danger:hover{background-color:#ff809c;opacity:.85;border-color:#d90030;color:#fff}.badge.badge-danger:active{background-color:#d90030;opacity:.85;border-color:#d90030;color:#fff}.badge.border-danger{border:1px solid #ff0039;color:#ff0039;}.badge.border-danger:hover{background-color:#ff809c;opacity:.85;border-color:#d90030;color:#fff}.badge.border-danger:active{background-color:#d90030;opacity:.85;border-color:#d90030;color:#fff}.list-item > .badge{float:right;line-height:20px}.icon-currency-dollar:before{content:"$"}.icon-currency-cent:before{content:"¢"}.icon-currency-pound:before{content:"£"}.icon-currency-euro:before{content:"€"}.icon-currency-currency:before{content:"¤"}.icon-currency-yen:before{content:"¥"}.icon-currency-dram:before{content:"֏"}.icon-currency-rupee:before{content:"Rs"}.icon-currency-baht:before{content:"฿"}.icon-currency-riel:before{content:"¤"}.icon-currency-franc:before{content:"₣"}.icon-currency-lira:before{content:"₤"}.icon-currency-kip:before{content:"₭"}.icon-currency-drachma:before{content:"₯"}.icon-currency-peso:before{content:"₱"}.icon-currency-guarani:before{content:"₲"}.icon-currency-austral:before{content:"₳"}.icon-currency-hryvnia:before{content:"₴"}.icon-currency-cedi:before{content:"₵"}.icon-currency-spesmilo:before{content:"₷"}.icon-currency-tenge:before{content:"₸"}.icon-currency-rupee:before{content:"₹"}.icon-currency-lira:before{content:"₺"}.icon-currency-mark:before{content:"M"}.icon-currency-manat:before{content:"₼"}.icon-currency-ruble:before{content:"₽"}.icon-currency-lari:before{content:"₾"}.alert{padding:10px 0;border-radius:5px;border:1px solid;position:relative;padding-left:10px;}.alert >.alert-close{font-size:25px;line-height:15px;position:absolute;right:10px;top:10px}.alert.alert-white{color:#000;background-color:#fff;border:1px solid #e6e6e6;}.alert.alert-white >.alert-close{color:#000}.alert.alert-black{color:#fff;background-color:#000;border:1px solid #000;}.alert.alert-black >.alert-close{color:#fff}.alert.alert-default{color:#fff;background-color:#222;border:1px solid #1f1f1f;}.alert.alert-default >.alert-close{color:#fff}.alert.alert-primary{color:#fff;background-color:#2780e3;border:1px solid #1b73d4;}.alert.alert-primary >.alert-close{color:#fff}.alert.alert-success{color:#fff;background-color:#3fb618;border:1px solid #39a416;}.alert.alert-success >.alert-close{color:#fff}.alert.alert-info{color:#fff;background-color:#9954bb;border:1px solid #8c45af;}.alert.alert-info >.alert-close{color:#fff}.alert.alert-warning{color:#fff;background-color:#ff7518;border:1px solid #fb6500;}.alert.alert-warning >.alert-close{color:#fff}.alert.alert-danger{color:#fff;background-color:#ff0039;border:1px solid #e60033;}.alert.alert-danger >.alert-close{color:#fff}.callout{padding:15px;border-radius:5px;border-top:1px solid #eee;border-bottom:1px solid #eee;border-right:1px solid #eee;}.callout.callout-white{border-left:5px solid #fff}.callout.callout-black{border-left:5px solid #000}.callout.callout-default{border-left:5px solid #222}.callout.callout-primary{border-left:5px solid #2780e3}.callout.callout-success{border-left:5px solid #3fb618}.callout.callout-info{border-left:5px solid #9954bb}.callout.callout-warning{border-left:5px solid #ff7518}.callout.callout-danger{border-left:5px solid #ff0039}
    </style>
  </head>
  <body>
    <div class="background-default" style="height:500px;width:100%;position:relative">
      <div class="navbar">
        <div class="container">
          <div class="navbar-title"><span class="text-white">psychic-ui</span></div>
          <div class="nav"><a class="text-white" href="https://github.com/gabrielcsapo/psychic-ui" target="_blank">Source</a>
            <div class="dropdown btn btn-info">
              <div class="dropdown-title">Themes</div>
              <div class="dropdown-content dropdown-content-right">
                <ul>
                  <li><a href="/psychic-ui">Base</a></li>
                  <li><a href="/psychic-ui/cosmo.html">Cosmo</a></li>
                  <li><a href="/psychic-ui/cyborg.html">Cyborg</a></li>
                  <li><a href="/psychic-ui/paper.html">Paper</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="text-center">
        <h3 class="text-white">Welcome!</h3>
        <div class="text-white">Psychic-ui is a minimalistic CSS only framework</div><span class="badge badge-primary" style="display:inline-block;margin-top:10px">Cosmo</span><br/><br/>
        <div class="grid">
          <div class="col-3-12"></div>
          <div class="col-6-12">
            <ul class="list text-left">
              <li class="list-item list-item-white">unminified
                <div class="badge badge-default">48.34 KiB</div>
              </li>
              <li class="list-item list-item-white">minified
                <div class="badge badge-default">41.03 KiB</div>
              </li>
              <li class="list-item list-item-white">gzipped
                <div class="badge badge-default">8.48 KiB</div>
              </li>
            </ul>
          </div>
          <div class="col-3-12"></div>
        </div>
      </div>
      <div class="navbar navbar-center" style="bottom:0;position:absolute">
        <div class="container text-center">
          <div class="text-white">created with ♥ by<a class="text-white" href="https://github.com/gabrielcsapo">@gabrielcsapo</a></div>
        </div>
      </div>
    </div>
    <div class="example">
      <div>
        <h3>Colors</h3>
        <hr/>
        <ul class="list colors">
          <li class="list-item list-item-default">default</li>
          <li class="list-item list-item-primary">primary</li>
          <li class="list-item list-item-success">success</li>
          <li class="list-item list-item-info">info</li>
          <li class="list-item list-item-warning">warning</li>
          <li class="list-item list-item-danger">danger</li>
          <li class="list-item list-item-white">white</li>
          <li class="list-item list-item-black">black</li>
        </ul>
        <script>
          var hexDigits = new Array
              ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
          
          function rgb2hex(rgb) {
           rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
           return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
          }
          
          function hex(x) {
            return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
           }
           var children = document.querySelectorAll('.colors .list-item');
          [].forEach.call(children, function(div) {
              var _color = document.createElement("div");
              _color.classList.add('badge');
              _color.innerHTML = rgb2hex(window.getComputedStyle(div, false).backgroundColor);
              div.appendChild(_color);
          });
        </script>
      </div><br/>
      <div>
        <h3>Grid</h3>
        <hr/>
        <style>
          .cell {
              background-color: #dddddd;
              border: 1px solid white;
              padding: 5px 0;
              text-align: center;
              width: 100%;
          }
          
        </style>
        <pre class="prettyprint linenums lang-html">
          <div class="grid">
            <div class="col-{column}-12">{column}</div>
          </div></pre><br/>
        <div class="grid">
          <div class="col-0-12">
            <div class="cell">0</div>
          </div>
          <div class="col-12-12">
            <div class="cell">12</div>
          </div>
          <div class="col-1-12">
            <div class="cell">1</div>
          </div>
          <div class="col-11-12">
            <div class="cell">11</div>
          </div>
          <div class="col-2-12">
            <div class="cell">2</div>
          </div>
          <div class="col-10-12">
            <div class="cell">10</div>
          </div>
          <div class="col-3-12">
            <div class="cell">3</div>
          </div>
          <div class="col-9-12">
            <div class="cell">9</div>
          </div>
          <div class="col-4-12">
            <div class="cell">4</div>
          </div>
          <div class="col-8-12">
            <div class="cell">8</div>
          </div>
          <div class="col-5-12">
            <div class="cell">5</div>
          </div>
          <div class="col-7-12">
            <div class="cell">7</div>
          </div>
          <div class="col-6-12">
            <div class="cell">6</div>
          </div>
          <div class="col-6-12">
            <div class="cell">6</div>
          </div>
          <div class="col-7-12">
            <div class="cell">7</div>
          </div>
          <div class="col-5-12">
            <div class="cell">5</div>
          </div>
          <div class="col-8-12">
            <div class="cell">8</div>
          </div>
          <div class="col-4-12">
            <div class="cell">4</div>
          </div>
          <div class="col-9-12">
            <div class="cell">9</div>
          </div>
          <div class="col-3-12">
            <div class="cell">3</div>
          </div>
          <div class="col-10-12">
            <div class="cell">10</div>
          </div>
          <div class="col-2-12">
            <div class="cell">2</div>
          </div>
          <div class="col-11-12">
            <div class="cell">11</div>
          </div>
          <div class="col-1-12">
            <div class="cell">1</div>
          </div>
          <div class="col-12-12">
            <div class="cell">12</div>
          </div>
          <div class="col-0-12">
            <div class="cell">0</div>
          </div>
        </div>
      </div><br/>
      <div>
        <hr/>
        <h3>Typography</h3>
        <hr/><br/>
        <pre class="prettyprint linenums lang-html">
          <hr/></pre>
        <hr/><br/>
        <pre class="prettyprint linenums lang-html"><code>function() {}</code></pre><code>function() {}</code><br/><br/>
        <pre class="prettyprint linenums lang-html">
          <pre>function() {}</pre></pre>
        <pre>function() {}</pre><br/>
        <pre class="prettyprint linenums lang-html">
          <blockquote>Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
          <blockquote class="text-default">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
          <blockquote class="text-primary">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
          <blockquote class="text-success">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
          <blockquote class="text-info">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
          <blockquote class="text-warning">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
          <blockquote class="text-danger">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
          <blockquote class="text-white">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
          <blockquote class="text-black">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote></pre>
        <blockquote>Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
        <blockquote class="text-default">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
        <blockquote class="text-primary">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
        <blockquote class="text-success">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
        <blockquote class="text-info">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
        <blockquote class="text-warning">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
        <blockquote class="text-danger">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
        <blockquote class="text-white">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote>
        <blockquote class="text-black">Science without religion is lame, religion without science is blind. - Albert Einstein</blockquote><br/>
        <pre class"prettyprint="class"prettyprint" linenums="linenums" lang-html="lang-html">
          <h1>h1<small>secondary text</small></h1>
          <h2>h2<small>secondary text</small></h2>
          <h3>h3<small>secondary text</small></h3>
          <h4>h4<small>secondary text</small></h4>
          <h5>h5<small>secondary text</small></h5></pre>
        <h1>h1<small>secondary text</small></h1>
        <h2>h2<small>secondary text</small></h2>
        <h3>h3<small>secondary text</small></h3>
        <h4>h4<small>secondary text</small></h4>
        <h5>h5<small>secondary text</small></h5>
      </div><br/>
      <div>
        <hr/>
        <h3>Helpers</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <div class="text-{brand}">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</div></pre><br/>
        <div class="text-default">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</div>
        <div class="text-primary">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</div>
        <div class="text-success">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</div>
        <div class="text-info">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</div>
        <div class="text-warning">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</div>
        <div class="text-danger">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</div>
        <div class="text-white">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</div>
        <div class="text-black">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</div>
        <pre class="prettyprint linenums lang-html">
          <div class="background-{brand}"></div></pre><br/>
        <div class="background-default" style="padding:10px"></div><br/>
        <div class="background-primary" style="padding:10px"></div><br/>
        <div class="background-success" style="padding:10px"></div><br/>
        <div class="background-info" style="padding:10px"></div><br/>
        <div class="background-warning" style="padding:10px"></div><br/>
        <div class="background-danger" style="padding:10px"></div><br/>
        <div class="background-white" style="padding:10px"></div><br/>
        <div class="background-black" style="padding:10px"></div><br/>
        <pre class="prettyprint linenums lang-html"><img class="responsive" src="src/examples/assets/travis.jpeg"/></pre><br/><img class="responsive" src="src/examples/assets/travis.jpeg"/>
      </div><br/>
      <div>
        <hr/>
        <h3>Table</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <table class="table responsive border-black">
            <thead>
              <tr>
                <th>First Name</th>
                <th>Last Name</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>John</th>
                <th>Doe</th>
              </tr>
            </tbody>
          </table></pre><br/>
        <table class="table responsive">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>John</th>
              <th>Doe</th>
            </tr>
          </tbody>
        </table><br/>
        <table class="table responsive border-default">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>John</th>
              <th>Doe</th>
            </tr>
          </tbody>
        </table><br/>
        <table class="table responsive border-primary">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>John</th>
              <th>Doe</th>
            </tr>
          </tbody>
        </table><br/>
        <table class="table responsive border-success">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>John</th>
              <th>Doe</th>
            </tr>
          </tbody>
        </table><br/>
        <table class="table responsive border-info">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>John</th>
              <th>Doe</th>
            </tr>
          </tbody>
        </table><br/>
        <table class="table responsive border-warning">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>John</th>
              <th>Doe</th>
            </tr>
          </tbody>
        </table><br/>
        <table class="table responsive border-danger">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>John</th>
              <th>Doe</th>
            </tr>
          </tbody>
        </table><br/>
        <table class="table responsive border-white">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>John</th>
              <th>Doe</th>
            </tr>
          </tbody>
        </table><br/>
        <table class="table responsive border-black">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>John</th>
              <th>Doe</th>
            </tr>
          </tbody>
        </table><br/>
      </div><br/>
      <div>
        <hr/>
        <h3>Navbar</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <div class="navbar navbar-black">
            <div class="container">
              <div class="navbar-title"><span>navbar title</span></div>
            </div>
          </div></pre><br/>
        <div class="navbar navbar-default">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
          </div>
        </div><br/>
        <div class="navbar navbar-primary">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
          </div>
        </div><br/>
        <div class="navbar navbar-success">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
          </div>
        </div><br/>
        <div class="navbar navbar-info">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
          </div>
        </div><br/>
        <div class="navbar navbar-warning">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
          </div>
        </div><br/>
        <div class="navbar navbar-danger">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
          </div>
        </div><br/>
        <div class="navbar navbar-white">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
          </div>
        </div><br/>
        <div class="navbar navbar-black">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
          </div>
        </div><br/>
        <pre class="prettyprint linenums lang-html">
          <div class="navbar navbar-black">
            <div class="container">
              <div class="navbar-title"><span>navbar title</span></div>
            </div>
          </div></pre><br/>
        <div class="navbar navbar-default">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
            <div class="nav"><a href="/blog">Blog</a><a href="/about">About</a><a href="/store">Store</a></div>
          </div>
        </div><br/>
        <div class="navbar navbar-primary">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
            <div class="nav"><a href="/blog">Blog</a><a href="/about">About</a><a href="/store">Store</a></div>
          </div>
        </div><br/>
        <div class="navbar navbar-success">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
            <div class="nav"><a href="/blog">Blog</a><a href="/about">About</a><a href="/store">Store</a></div>
          </div>
        </div><br/>
        <div class="navbar navbar-info">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
            <div class="nav"><a href="/blog">Blog</a><a href="/about">About</a><a href="/store">Store</a></div>
          </div>
        </div><br/>
        <div class="navbar navbar-warning">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
            <div class="nav"><a href="/blog">Blog</a><a href="/about">About</a><a href="/store">Store</a></div>
          </div>
        </div><br/>
        <div class="navbar navbar-danger">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
            <div class="nav"><a href="/blog">Blog</a><a href="/about">About</a><a href="/store">Store</a></div>
          </div>
        </div><br/>
        <div class="navbar navbar-white">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
            <div class="nav"><a href="/blog">Blog</a><a href="/about">About</a><a href="/store">Store</a></div>
          </div>
        </div><br/>
        <div class="navbar navbar-black">
          <div class="container">
            <div class="navbar-title"><span>Title</span></div>
            <div class="nav"><a href="/blog">Blog</a><a href="/about">About</a><a href="/store">Store</a></div>
          </div>
        </div><br/>
      </div><br/>
      <div>
        <hr/>
        <h3>Nav</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <div class="nav"><a href="#contacts" id="contacts">Contacts</a><a href="#phone" id="phone">Phone</a></div></pre><br/>
        <div class="nav"><a href="#contacts" id="contacts">Contacts</a><a href="#phone" id="phone">Phone</a></div><br/>
        <pre class="prettyprint linenums lang-html">
          <div class="nav nav-stacked"><a href="#contacts1" id="contacts1">Contacts</a><a href="#phone1" id="phone1">Phone</a></div></pre><br/>
        <div class="nav nav-stacked"><a href="#contacts1" id="contacts1">Contacts</a><a href="#phone1" id="phone1">Phone</a></div><br/>
        <pre class="prettyprint linenums lang-html">
          <div class="nav"><a class="active" href="#contacts2">Contacts</a><a href="#phone2">Phone</a></div></pre><br/>
        <div class="nav"><a class="active" href="#contacts2">Contacts</a><a href="#phone2">Phone</a></div><br/>
        <pre class="prettyprint linenums lang-html">
          <div class="nav nav-stacked"><a class="active" href="#contacts3">Contacts</a><a href="#phone3">Phone</a></div></pre><br/>
        <div class="nav nav-stacked"><a class="active" href="#contacts3">Contacts</a><a href="#phone3">Phone</a></div>
      </div><br/>
      <div>
        <hr/>
        <h3>Nav Tab</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <div class="nav-tab">
            <ul>
              <li>
                <input type="radio" name="nav-tab-label" checked="checked" id="label-home"/>
                <label for="label-home">Home</label>
                <div>
                  <h3>Home</h3>
                  <p>Some home content</p>
                </div>
              </li>
              <li>
                <input type="radio" name="nav-tab-label" checked="checked" id="label-about"/>
                <label for="label-about">About</label>
                <div>
                  <h3>About</h3>
                  <p>Some about content</p>
                </div>
              </li>
            </ul>
          </div></pre><br/><br/>
        <div style="height:200px;width:100%">
          <div class="nav-tab">
            <ul>
              <li>
                <input type="radio" name="nav-tab-label" checked="checked" id="label-home"/>
                <label for="label-home">Home</label>
                <div>
                  <h3>Home</h3>
                  <p>Some home content</p>
                </div>
              </li>
              <li>
                <input type="radio" name="nav-tab-label" checked="checked" id="label-about"/>
                <label for="label-about">About</label>
                <div>
                  <h3>About</h3>
                  <p>Some about content</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div><br/>
      <div>
        <hr/>
        <h3>Spinner</h3>
        <hr/>
        <style>
          .spinner-inline > .spinner-overlay {
              height:100px;
              display:inline-block;
              width:auto;
          }
          
        </style>
        <pre class="prettyprint linenums lang-html">
          <div class="spinner-overlay">
            <div class="spinner spinner-{brand}"></div>
          </div></pre><br/>
        <div class="spinner-inline" style="width:100%;text-align:center">
          <div class="spinner-overlay">
            <div class="spinner spinner-default"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-primary"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-success"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-info"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-warning"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-danger"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-white"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-black"></div>
          </div>
        </div><br/>
        <pre class="prettyprint linenums lang-html">
          <div class="spinner-overlay">
            <div class="spinner spinner-{brand} spinner-done"></div>
          </div></pre><br/>
        <div class="spinner-inline" style="width:100%;text-align:center">
          <div class="spinner-overlay">
            <div class="spinner spinner-default spinner-done"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-primary spinner-done"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-success spinner-done"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-info spinner-done"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-warning spinner-done"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-danger spinner-done"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-white spinner-done"></div>
          </div>
          <div class="spinner-overlay">
            <div class="spinner spinner-black spinner-done"></div>
          </div>
        </div><br/>
        <pre class="prettyprint linenums lang-html">
          <div class="spinner-overlay">
            <div class="spinner-wrapper">
              <div class="spinner spinner-{val}"></div>
            </div>
          </div></pre><br/>
        <div style="width:100%;height:350px;border:1px solid #dedede;border-radius:5px">
          <div class="spinner-overlay">
            <div class="spinner-wrapper">
              <div class="spinner spinner-primary"></div>
            </div>
          </div>
        </div>
      </div><br/>
      <div>
        <hr/>
        <h3>Button</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <button class="btn btn-{brand}">{val}</button></pre><br/>
        <button class="btn btn-default">default</button>
        <button class="btn btn-primary">primary</button>
        <button class="btn btn-success">success</button>
        <button class="btn btn-info">info</button>
        <button class="btn btn-warning">warning</button>
        <button class="btn btn-danger">danger</button>
        <button class="btn btn-white">white</button>
        <button class="btn btn-black">black</button><br/>
        <pre class="prettyprint linenums lang-html">
          <button class="btn btn-{brand} btn-block">{val}</button></pre><br/>
        <button class="btn btn-default btn-block">default</button>
        <button class="btn btn-primary btn-block">primary</button>
        <button class="btn btn-success btn-block">success</button>
        <button class="btn btn-info btn-block">info</button>
        <button class="btn btn-warning btn-block">warning</button>
        <button class="btn btn-danger btn-block">danger</button>
        <button class="btn btn-white btn-block">white</button>
        <button class="btn btn-black btn-block">black</button><br/>
        <pre class="prettyprint linenums lang-html">
          <button class="btn border-{brand}">{val}</button></pre><br/>
        <button class="btn border-default">default</button>
        <button class="btn border-primary">primary</button>
        <button class="btn border-success">success</button>
        <button class="btn border-info">info</button>
        <button class="btn border-warning">warning</button>
        <button class="btn border-danger">danger</button>
        <button class="btn border-white">white</button>
        <button class="btn border-black">black</button><br/>
        <pre class="prettyprint linenums lang-html"> 
          <button class="btn border-{brand} border-radius-5">{val}</button></pre><br/>
        <button class="btn border-default border-radius-5">default</button>
        <button class="btn border-primary border-radius-5">primary</button>
        <button class="btn border-success border-radius-5">success</button>
        <button class="btn border-info border-radius-5">info</button>
        <button class="btn border-warning border-radius-5">warning</button>
        <button class="btn border-danger border-radius-5">danger</button>
        <button class="btn border-white border-radius-5">white</button>
        <button class="btn border-black border-radius-5">black</button><br/>
      </div><br/>
      <div>
        <hr/>
        <h3>Popover</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <div class="popover-container">top<span class="popover top">this is a popover</span></div></pre>
        <div class="popover-container">top<span class="popover top">this is a popover</span></div><br/>
        <div class="popover-container">bottom<span class="popover bottom">this is a popover</span></div><br/>
        <div class="popover-container">left<span class="popover left">this is a popover</span></div><br/>
        <div class="popover-container">right<span class="popover right">this is a popover</span></div>
      </div><br/>
      <div>
        <hr/>
        <h3>Progress</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <div class="progress">
            <div class="progress-fill progress-fill-{val}" style="width:50%"></div>
          </div></pre><br/>
        <div class="progress">
          <div class="progress-fill progress-fill-default" style="width:50%">50%</div>
        </div><br/>
        <div class="progress">
          <div class="progress-fill progress-fill-primary" style="width:50%">50%</div>
        </div><br/>
        <div class="progress">
          <div class="progress-fill progress-fill-success" style="width:50%">50%</div>
        </div><br/>
        <div class="progress">
          <div class="progress-fill progress-fill-info" style="width:50%">50%</div>
        </div><br/>
        <div class="progress">
          <div class="progress-fill progress-fill-warning" style="width:50%">50%</div>
        </div><br/>
        <div class="progress">
          <div class="progress-fill progress-fill-danger" style="width:50%">50%</div>
        </div><br/>
        <div class="progress">
          <div class="progress-fill progress-fill-white" style="width:50%">50%</div>
        </div><br/>
        <div class="progress">
          <div class="progress-fill progress-fill-black" style="width:50%">50%</div>
        </div><br/>
      </div><br/>
      <div>
        <hr/>
        <h3>Dropdown</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <div class="dropdown btn btn-black">
            <div class="dropdown-title">DropDown</div>
            <div class="dropdown-content">
              <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
              </ul>
            </div>
          </div></pre>
        <div class="dropdown btn btn-default">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-primary">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-success">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-info">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-warning">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-danger">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-white">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-black">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <pre class="prettyprint linenums lang-html">
          <div class="dropdown btn btn-black">
            <div class="dropdown-title">DropDown</div>
            <div class="dropdown-content dropdown-content-right">
              <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
              </ul>
            </div>
          </div></pre>
        <div class="dropdown btn btn-default">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content dropdown-content-right">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-primary">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content dropdown-content-right">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-success">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content dropdown-content-right">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-info">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content dropdown-content-right">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-warning">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content dropdown-content-right">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-danger">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content dropdown-content-right">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-white">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content dropdown-content-right">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
        <div class="dropdown btn btn-black">
          <div class="dropdown-title">DropDown</div>
          <div class="dropdown-content dropdown-content-right">
            <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li><a href="#">Item 4</a></li>
            </ul>
          </div>
        </div>
      </div><br/>
      <div>
        <hr/>
        <h3>Modal</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <button class="btn btn-{brand}" onclick="location.href='#modalExample{brand}'">modal</button>
          <div class="modal modal-{brand}" id="modalExample{val}">
            <div><a class="modal-close" href="#close" title="Close">X</a>
              <h1>Hello</h1>
              <hr/><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed enim vel arcu finibus vehicula a vel nisi. Maecenas a ligula et ipsum consequat hendrerit id ac nibh. Donec vel augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
            </div>
          </div></pre><br/>
        <button class="btn btn-default" onclick="location.href='#modalExampledefault'">modal</button>
        <div class="modal modal-default" id="modalExampledefault">
          <div><a class="modal-close" href="#close" title="Close">X</a>
            <h1>Hello</h1>
            <hr/><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed enim vel arcu finibus vehicula a vel nisi. Maecenas a ligula et ipsum consequat hendrerit id ac nibh. Donec vel augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
          </div>
        </div>
        <button class="btn btn-primary" onclick="location.href='#modalExampleprimary'">modal</button>
        <div class="modal modal-primary" id="modalExampleprimary">
          <div><a class="modal-close" href="#close" title="Close">X</a>
            <h1>Hello</h1>
            <hr/><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed enim vel arcu finibus vehicula a vel nisi. Maecenas a ligula et ipsum consequat hendrerit id ac nibh. Donec vel augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
          </div>
        </div>
        <button class="btn btn-success" onclick="location.href='#modalExamplesuccess'">modal</button>
        <div class="modal modal-success" id="modalExamplesuccess">
          <div><a class="modal-close" href="#close" title="Close">X</a>
            <h1>Hello</h1>
            <hr/><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed enim vel arcu finibus vehicula a vel nisi. Maecenas a ligula et ipsum consequat hendrerit id ac nibh. Donec vel augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
          </div>
        </div>
        <button class="btn btn-info" onclick="location.href='#modalExampleinfo'">modal</button>
        <div class="modal modal-info" id="modalExampleinfo">
          <div><a class="modal-close" href="#close" title="Close">X</a>
            <h1>Hello</h1>
            <hr/><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed enim vel arcu finibus vehicula a vel nisi. Maecenas a ligula et ipsum consequat hendrerit id ac nibh. Donec vel augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
          </div>
        </div>
        <button class="btn btn-warning" onclick="location.href='#modalExamplewarning'">modal</button>
        <div class="modal modal-warning" id="modalExamplewarning">
          <div><a class="modal-close" href="#close" title="Close">X</a>
            <h1>Hello</h1>
            <hr/><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed enim vel arcu finibus vehicula a vel nisi. Maecenas a ligula et ipsum consequat hendrerit id ac nibh. Donec vel augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
          </div>
        </div>
        <button class="btn btn-danger" onclick="location.href='#modalExampledanger'">modal</button>
        <div class="modal modal-danger" id="modalExampledanger">
          <div><a class="modal-close" href="#close" title="Close">X</a>
            <h1>Hello</h1>
            <hr/><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed enim vel arcu finibus vehicula a vel nisi. Maecenas a ligula et ipsum consequat hendrerit id ac nibh. Donec vel augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
          </div>
        </div>
        <button class="btn btn-white" onclick="location.href='#modalExamplewhite'">modal</button>
        <div class="modal modal-white" id="modalExamplewhite">
          <div><a class="modal-close" href="#close" title="Close">X</a>
            <h1>Hello</h1>
            <hr/><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed enim vel arcu finibus vehicula a vel nisi. Maecenas a ligula et ipsum consequat hendrerit id ac nibh. Donec vel augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
          </div>
        </div>
        <button class="btn btn-black" onclick="location.href='#modalExampleblack'">modal</button>
        <div class="modal modal-black" id="modalExampleblack">
          <div><a class="modal-close" href="#close" title="Close">X</a>
            <h1>Hello</h1>
            <hr/><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed enim vel arcu finibus vehicula a vel nisi. Maecenas a ligula et ipsum consequat hendrerit id ac nibh. Donec vel augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
          </div>
        </div>
        <pre class="prettyprint linenums lang-html">
          <div style="position:relative;width:100%;height:500px">
            <div class="modal modal-black modal-active modal-absolute">
              <div><a class="modal-close" href="#close" title="Close">X</a>
                <h1>Hello</h1>
                <hr/><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed enim vel arcu finibus vehicula a vel nisi. Maecenas a ligula et ipsum consequat hendrerit id ac nibh. Donec vel augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
              </div>
            </div>
          </div></pre><br/>
        <div style="position:relative;width:100%;height:500px">
          <div class="modal modal-black modal-active modal-absolute">
            <div><a class="modal-close" href="#close" title="Close">X</a>
              <h1>Hello</h1>
              <hr/><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed enim vel arcu finibus vehicula a vel nisi. Maecenas a ligula et ipsum consequat hendrerit id ac nibh. Donec vel augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
            </div>
          </div>
        </div>
      </div><br/>
      <div>
        <hr/>
        <h3>Alert</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <div class="alert alert-default">
            <div>I am an alert</div>
            <div class="alert-close">&#215</div>
          </div><br/>
          <div class="alert alert-primary">
            <div>I am an alert</div>
            <div class="alert-close">&#215</div>
          </div><br/>
          <div class="alert alert-success">
            <div>I am an alert</div>
            <div class="alert-close">&#215</div>
          </div><br/>
          <div class="alert alert-info">
            <div>I am an alert</div>
            <div class="alert-close">&#215</div>
          </div><br/>
          <div class="alert alert-warning">
            <div>I am an alert</div>
            <div class="alert-close">&#215</div>
          </div><br/>
          <div class="alert alert-danger">
            <div>I am an alert</div>
            <div class="alert-close">&#215</div>
          </div><br/>
          <div class="alert alert-white">
            <div>I am an alert</div>
            <div class="alert-close">&#215</div>
          </div><br/>
          <div class="alert alert-black">
            <div>I am an alert</div>
            <div class="alert-close">&#215</div>
          </div><br/></pre><br/>
        <div class="alert alert-default">
          <div>I am an alert</div>
          <div class="alert-close">&#215</div>
        </div><br/>
        <div class="alert alert-primary">
          <div>I am an alert</div>
          <div class="alert-close">&#215</div>
        </div><br/>
        <div class="alert alert-success">
          <div>I am an alert</div>
          <div class="alert-close">&#215</div>
        </div><br/>
        <div class="alert alert-info">
          <div>I am an alert</div>
          <div class="alert-close">&#215</div>
        </div><br/>
        <div class="alert alert-warning">
          <div>I am an alert</div>
          <div class="alert-close">&#215</div>
        </div><br/>
        <div class="alert alert-danger">
          <div>I am an alert</div>
          <div class="alert-close">&#215</div>
        </div><br/>
        <div class="alert alert-white">
          <div>I am an alert</div>
          <div class="alert-close">&#215</div>
        </div><br/>
        <div class="alert alert-black">
          <div>I am an alert</div>
          <div class="alert-close">&#215</div>
        </div><br/>
      </div><br/>
      <div>
        <hr/>
        <h3>List</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <ul class="list">
            <li class="list-item">Item 1</li>
            <li class="list-item">Item 2</li>
          </ul></pre><br/>
        <ul class="list">
          <li class="list-item">Item 1</li>
          <li class="list-item">Item 2</li>
        </ul><br/>
        <pre class="prettyprint linenums lang-html">
          <ul class="list">
            <li class="list-item list-item-default">Item 0</li>
            <li class="list-item list-item-primary">Item 1</li>
            <li class="list-item list-item-success">Item 2</li>
            <li class="list-item list-item-info">Item 3</li>
            <li class="list-item list-item-warning">Item 4</li>
            <li class="list-item list-item-danger">Item 5</li>
          </ul></pre><br/>
        <ul class="list">
          <li class="list-item list-item-default">Item 0</li>
          <li class="list-item list-item-primary">Item 1</li>
          <li class="list-item list-item-success">Item 2</li>
          <li class="list-item list-item-info">Item 3</li>
          <li class="list-item list-item-warning">Item 4</li>
          <li class="list-item list-item-danger">Item 5</li>
        </ul><br/>
        <pre class="prettyprint linenums lang-html">
          <ul class="list">
            <li class="list-item list-item-default">Item
              <div class="badge badge-default">0</div>
            </li>
            <li class="list-item list-item-primary">Item
              <div class="badge badge-primary">1</div>
            </li>
            <li class="list-item list-item-success">Item
              <div class="badge badge-success">2</div>
            </li>
            <li class="list-item list-item-info">Item
              <div class="badge badge-info">3</div>
            </li>
            <li class="list-item list-item-warning">Item
              <div class="badge badge-warning">4</div>
            </li>
            <li class="list-item list-item-danger">Item
              <div class="badge badge-danger">5</div>
            </li>
          </ul></pre><br/>
        <ul class="list">
          <li class="list-item list-item-default">Item
            <div class="badge badge-default">0</div>
          </li>
          <li class="list-item list-item-primary">Item
            <div class="badge badge-primary">1</div>
          </li>
          <li class="list-item list-item-success">Item
            <div class="badge badge-success">2</div>
          </li>
          <li class="list-item list-item-info">Item
            <div class="badge badge-info">3</div>
          </li>
          <li class="list-item list-item-warning">Item
            <div class="badge badge-warning">4</div>
          </li>
          <li class="list-item list-item-danger">Item
            <div class="badge badge-danger">5</div>
          </li>
        </ul><br/>
        <pre class="prettyprint linenums lang-html">
          <ul class="list">
            <li class="list-item">Item 1
              <div class="badge badge-default">14</div>
            </li>
            <li class="list-item">Item 2
              <div class="badge badge-default">3</div>
            </li>
          </ul></pre><br/>
        <ul class="list">
          <li class="list-item">Item 1
            <div class="badge badge-default">14</div>
          </li>
          <li class="list-item">Item 2
            <div class="badge badge-default">3</div>
          </li>
        </ul><br/>
        <pre class="prettyprint linenums lang-html">
          <ul class="list">
            <li class="list-item">
              <div class="list-item-left">Left</div>
              <div class="list-item-right">Right</div>
            </li>
          </ul></pre><br/>
        <ul class="list">
          <li class="list-item">
            <div class="list-item-left">Left</div>
            <div class="list-item-right">Right</div>
          </li>
        </ul>
      </div><br/>
      <div>
        <hr/>
        <h3>Badge</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <div class="badge badge-default">default</div>
          <div class="badge badge-primary">primary</div>
          <div class="badge badge-success">success</div>
          <div class="badge badge-info">info</div>
          <div class="badge badge-warning">warning</div>
          <div class="badge badge-danger">danger</div>
          <div class="badge badge-white">white</div>
          <div class="badge badge-black">black</div></pre><br/>
        <div class="badge badge-default">default</div>
        <div class="badge badge-primary">primary</div>
        <div class="badge badge-success">success</div>
        <div class="badge badge-info">info</div>
        <div class="badge badge-warning">warning</div>
        <div class="badge badge-danger">danger</div>
        <div class="badge badge-white">white</div>
        <div class="badge badge-black">black</div><br/>
        <pre class="prettyprint linenums lang-html">
          <div class="badge border-default">default</div>
          <div class="badge border-primary">primary</div>
          <div class="badge border-success">success</div>
          <div class="badge border-info">info</div>
          <div class="badge border-warning">warning</div>
          <div class="badge border-danger">danger</div>
          <div class="badge border-white">white</div>
          <div class="badge border-black">black</div></pre><br/>
        <div class="badge border-default">default     </div>
        <div class="badge border-primary">primary     </div>
        <div class="badge border-success">success     </div>
        <div class="badge border-info">info     </div>
        <div class="badge border-warning">warning     </div>
        <div class="badge border-danger">danger     </div>
        <div class="badge border-white">white     </div>
        <div class="badge border-black">black     </div>
      </div><br/>
      <div>
        <hr/>
        <h3>Panel</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <div class="panel panel-default">
            <div class="panel-body">default</div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-body">primary</div>
          </div>
          <div class="panel panel-success">
            <div class="panel-body">success</div>
          </div>
          <div class="panel panel-info">
            <div class="panel-body">info</div>
          </div>
          <div class="panel panel-warning">
            <div class="panel-body">warning</div>
          </div>
          <div class="panel panel-danger">
            <div class="panel-body">danger</div>
          </div>
          <div class="panel panel-white">
            <div class="panel-body">white</div>
          </div>
          <div class="panel panel-black">
            <div class="panel-body">black</div>
          </div></pre><br/>
        <div class="panel panel-default">
          <div class="panel-header">header</div>
          <div class="panel-body">body</div>
          <div class="panel-footer">footer</div>
        </div><br/>
        <div class="panel panel-primary">
          <div class="panel-header">header</div>
          <div class="panel-body">body</div>
          <div class="panel-footer">footer</div>
        </div><br/>
        <div class="panel panel-success">
          <div class="panel-header">header</div>
          <div class="panel-body">body</div>
          <div class="panel-footer">footer</div>
        </div><br/>
        <div class="panel panel-info">
          <div class="panel-header">header</div>
          <div class="panel-body">body</div>
          <div class="panel-footer">footer</div>
        </div><br/>
        <div class="panel panel-warning">
          <div class="panel-header">header</div>
          <div class="panel-body">body</div>
          <div class="panel-footer">footer</div>
        </div><br/>
        <div class="panel panel-danger">
          <div class="panel-header">header</div>
          <div class="panel-body">body</div>
          <div class="panel-footer">footer</div>
        </div><br/>
        <div class="panel panel-white">
          <div class="panel-header">header</div>
          <div class="panel-body">body</div>
          <div class="panel-footer">footer</div>
        </div><br/>
        <div class="panel panel-black">
          <div class="panel-header">header</div>
          <div class="panel-body">body</div>
          <div class="panel-footer">footer</div>
        </div><br/>
      </div><br/>
      <div>
        <hr/>
        <h3>Callouts</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <div class="callout callout-default">I am a callout</div><br/>
          <div class="callout callout-primary">I am a callout</div><br/>
          <div class="callout callout-success">I am a callout</div><br/>
          <div class="callout callout-info">I am a callout</div><br/>
          <div class="callout callout-warning">I am a callout</div><br/>
          <div class="callout callout-danger">I am a callout</div><br/>
          <div class="callout callout-white">I am a callout</div><br/>
          <div class="callout callout-black">I am a callout</div><br/></pre>
        <div class="callout callout-default">I am a callout</div><br/>
        <div class="callout callout-primary">I am a callout</div><br/>
        <div class="callout callout-success">I am a callout</div><br/>
        <div class="callout callout-info">I am a callout</div><br/>
        <div class="callout callout-warning">I am a callout</div><br/>
        <div class="callout callout-danger">I am a callout</div><br/>
        <div class="callout callout-white">I am a callout</div><br/>
        <div class="callout callout-black">I am a callout</div><br/>
      </div><br/>
      <div>
        <hr/>
        <h3>Icon</h3>
        <hr/>
        <pre class="prettyprint linenums lang-html">
          <div class="icon-currency-dollar"></div>
          <div class="icon-currency-cent"></div>
          <div class="icon-currency-pound"></div>
          <div class="icon-currency-euro"></div>
          <div class="icon-currency-currency"></div>
          <div class="icon-currency-yen"></div>
          <div class="icon-currency-dram"></div>
          <div class="icon-currency-rupee"></div>
          <div class="icon-currency-baht"></div>
          <div class="icon-currency-riel"></div>
          <div class="icon-currency-franc"></div>
          <div class="icon-currency-lira"></div>
          <div class="icon-currency-kip"></div>
          <div class="icon-currency-drachma"></div>
          <div class="icon-currency-peso"></div>
          <div class="icon-currency-guarani"></div>
          <div class="icon-currency-austral"></div>
          <div class="icon-currency-hryvnia"></div>
          <div class="icon-currency-cedi"></div>
          <div class="icon-currency-spesmilo"></div>
          <div class="icon-currency-tenge"></div>
          <div class="icon-currency-rupee"></div>
          <div class="icon-currency-lira"></div>
          <div class="icon-currency-mark"></div>
          <div class="icon-currency-manat"></div>
          <div class="icon-currency-ruble"></div>
          <div class="icon-currency-lari"></div></pre>
        <div class="icon-currency-dollar"></div>
        <div class="icon-currency-cent"></div>
        <div class="icon-currency-pound"></div>
        <div class="icon-currency-euro"></div>
        <div class="icon-currency-currency"></div>
        <div class="icon-currency-yen"></div>
        <div class="icon-currency-dram"></div>
        <div class="icon-currency-rupee"></div>
        <div class="icon-currency-baht"></div>
        <div class="icon-currency-riel"></div>
        <div class="icon-currency-franc"></div>
        <div class="icon-currency-lira"></div>
        <div class="icon-currency-kip"></div>
        <div class="icon-currency-drachma"></div>
        <div class="icon-currency-peso"></div>
        <div class="icon-currency-guarani"></div>
        <div class="icon-currency-austral"></div>
        <div class="icon-currency-hryvnia"></div>
        <div class="icon-currency-cedi"></div>
        <div class="icon-currency-spesmilo"></div>
        <div class="icon-currency-tenge"></div>
        <div class="icon-currency-rupee"></div>
        <div class="icon-currency-lira"></div>
        <div class="icon-currency-mark"></div>
        <div class="icon-currency-manat"></div>
        <div class="icon-currency-ruble"></div>
        <div class="icon-currency-lari"></div>
      </div><br/>
      <hr/>
      <h3>Examples</h3>
      <hr/><br/><br/><br/>
      <hr/>
      <h3>API Status</h3>
      <hr/>
      <pre class="prettyprint linenums lang-html">
        <div style="position:relative;overflow:hidden"><img class="responsive" src="src/examples/assets/travis.jpeg"/>
          <div class="panel panel-black" style="position:absolute;bottom:0;height:40px;width:100%">
            <h3 style="line-height:0px;display:inline-block">Travis CI</h3>
            <button class="btn btn-primary" style="float:right;margin:0px;margin-right:30px">Subscribe to Updates</button>
          </div>
        </div><br/><br/>
        <ul class="list">
          <li class="list-item list-item-success">
            <div class="list-item-left">All Systems Operational</div>
            <div class="list-item-right"><small>Refreshed 45 minutes ago</small></div>
          </li>
        </ul><br/><br/>
        <ul class="list">
          <li class="list-item">
            <div class="list-item-left">API</div>
            <div class="list-item-right"><small class="text-success">Operational</small></div>
          </li>
          <li class="list-item">
            <div class="list-item-left">Web App</div>
            <div class="list-item-right"><small class="text-success">Operational</small></div>
          </li>
        </ul></pre><br/>
      <div style="position:relative;overflow:hidden"><img class="responsive" src="src/examples/assets/travis.jpeg"/>
        <div class="panel panel-black" style="position:absolute;bottom:0;height:60px;width:100%">
          <div class="panel-header">
            <h3 style="line-height:0px;display:inline-block">Travis CI</h3>
            <button class="btn btn-primary" style="float:right;margin:0px;margin-top: -5px">Subscribe to Updates</button>
          </div>
        </div>
      </div><br/><br/>
      <ul class="list">
        <li class="list-item list-item-success">
          <div class="list-item-left">All Systems Operational</div>
          <div class="list-item-right"><small>Refreshed 45 minutes ago</small></div>
        </li>
      </ul><br/><br/>
      <ul class="list">
        <li class="list-item">
          <div class="list-item-left">API</div>
          <div class="list-item-right"><small class="text-success">Operational</small></div>
        </li>
        <li class="list-item">
          <div class="list-item-left">Web App</div>
          <div class="list-item-right"><small class="text-success">Operational</small></div>
        </li>
      </ul><br/>
      <hr/>
      <h3>Chat</h3>
      <hr/>
      <pre class="prettyprint linenums lang-html">
        <div class="panel">
          <div class="panel-header">
            <div class="grid">
              <div class="col-1-12">
                <div style="height:50px;width:50px;background-color:blue;display:inline-block"></div>
              </div>
              <div class="col-11-12">
                <h3>gabrielcsapo/Chatter <small>A simple chat server</small></h3>
              </div>
            </div>
          </div>
          <div class="panel-body">
            <ul class="list">
              <li class="list-item no-border">
                <div class="grid">
                  <div class="col-1-12">
                    <div style="height:50px;width:50px;background-color:blue;display:inline-block"></div>
                  </div>
                  <div class="col-11-12"> 
                    <div class="grid">
                      <div class="col-4-12 text-default">Gabriel Csapo @gabrielcsapo</div>
                      <div class="col-8-12 text-right text-default">Apr 23 08:38</div>
                    </div>
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget urna eget ex pellentesque auctor. Fusce bibendum volutpat nunc, vitae mattis dolor viverra nec. Praesent mollis et nunc condimentum euismod. Suspendisse aliquam ut tellus at porta.</div>
                  </div>
                </div>
              </li>
              <li class="list-item no-border">
                <div class="grid">
                  <div class="col-1-12">
                    <div style="height:50px;width:50px;background-color:blue;display:inline-block"></div>
                  </div>
                  <div class="col-11-12"> 
                    <div class="grid">
                      <div class="col-4-12 text-default">Gabriel Csapo @gabrielcsapo</div>
                      <div class="col-8-12 text-right text-default">Apr 23 08:38</div>
                    </div>
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget urna eget ex pellentesque auctor. Fusce bibendum volutpat nunc, vitae mattis dolor viverra nec. Praesent mollis et nunc condimentum euismod. Suspendisse aliquam ut tellus at porta.</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="panel-footer">
            <div class="grid">
              <div class="col-1-12">
                <div style="height:50px;width:50px;background-color:blue;display:inline-block"></div>
              </div>
              <div class="col-11-12">
                <input style="width:100%;height:50px" type="text" placeholder="Click here to type a chat message."/>
              </div>
            </div>
          </div>
        </div></pre><br/>
      <div class="panel">
        <div class="panel-header">
          <div class="grid">
            <div class="col-1-12">
              <div style="height:50px;width:50px;background-color:blue;display:inline-block"></div>
            </div>
            <div class="col-11-12">
              <h3>gabrielcsapo/Chatter <small>A simple chat server</small></h3>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <ul class="list">
            <li class="list-item no-border">
              <div class="grid">
                <div class="col-1-12">
                  <div style="height:50px;width:50px;background-color:blue;display:inline-block"></div>
                </div>
                <div class="col-11-12"> 
                  <div class="grid">
                    <div class="col-4-12 text-default">Gabriel Csapo @gabrielcsapo</div>
                    <div class="col-8-12 text-right text-default">Apr 23 08:38</div>
                  </div>
                  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget urna eget ex pellentesque auctor. Fusce bibendum volutpat nunc, vitae mattis dolor viverra nec. Praesent mollis et nunc condimentum euismod. Suspendisse aliquam ut tellus at porta.</div>
                </div>
              </div>
            </li>
            <li class="list-item no-border">
              <div class="grid">
                <div class="col-1-12">
                  <div style="height:50px;width:50px;background-color:blue;display:inline-block"></div>
                </div>
                <div class="col-11-12"> 
                  <div class="grid">
                    <div class="col-4-12 text-default">Gabriel Csapo @gabrielcsapo</div>
                    <div class="col-8-12 text-right text-default">Apr 23 08:38</div>
                  </div>
                  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget urna eget ex pellentesque auctor. Fusce bibendum volutpat nunc, vitae mattis dolor viverra nec. Praesent mollis et nunc condimentum euismod. Suspendisse aliquam ut tellus at porta.</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="panel-footer">
          <div class="grid">
            <div class="col-1-12">
              <div style="height:50px;width:50px;background-color:blue;display:inline-block"></div>
            </div>
            <div class="col-11-12">
              <input style="width:100%;height:50px" type="text" placeholder="Click here to type a chat message."/>
            </div>
          </div>
        </div>
      </div><br/>
      <hr/>
      <h3>Cover</h3>
      <hr/>
      <pre class="prettyprint linenums lang-html">
        <!-- this emulates the dom-->
        <div style="height:500px;width:100%;background-color: #333;position:relative">
          <div class="navbar navbar-center">
            <div class="container">
              <div class="navbar-title"><span class="text-white">Cover</span></div>
              <div class="navbar-content">
                <div class="nav"><a class="text-white" href="#home" id="home">Home</a><a class="text-white" href="#blog" id="blog">Blog</a><a class="text-white" href="#contact" id="contact">Contact</a></div>
              </div>
            </div>
          </div>
          <div class="text-center" style="width:100%;position: absolute;top: 50%;transform: translateY(-50%)">
            <h3 class="text-white">Hello</h3>
            <div class="text-white">This is a cover template for psychic</div><br/><small class="text-white">Enjoy!</small>
          </div>
          <div class="navbar navbar-center" style="bottom:0;position:absolute">
            <div class="container text-center">
              <div class="text-white">Cover template for Psychic, by @gabrielcsapo</div>
            </div>
          </div>
        </div></pre>
      <!-- this emulates the dom-->
      <div style="height:500px;width:100%;background-color: #333;position:relative">
        <div class="navbar navbar-center">
          <div class="container">
            <div class="navbar-title"><span class="text-white">Cover</span></div>
            <div class="navbar-content">
              <div class="nav"><a class="text-white" href="#home" id="home">Home</a><a class="text-white" href="#blog" id="blog">Blog</a><a class="text-white" href="#contact" id="contact">Contact</a></div>
            </div>
          </div>
        </div>
        <div class="text-center" style="width:100%;position: absolute;top: 50%;transform: translateY(-50%)">
          <h3 class="text-white">Hello</h3>
          <div class="text-white">This is a cover template for psychic</div><br/><small class="text-white">Enjoy!</small>
        </div>
        <div class="navbar navbar-center" style="bottom:0;position:absolute">
          <div class="container text-center">
            <div class="text-white">Cover template for Psychic, by @gabrielcsapo</div>
          </div>
        </div>
      </div><br/><br/>
      <div class="navbar navbar-center">
        <div class="container text-center">
          <div class="text-black">created with ♥ by<a class="text-black" href="https://github.com/gabrielcsapo">@gabrielcsapo</a></div>
        </div>
      </div>
    </div>
  </body>
</html>