seyyah · November 21, 2018 18:04
diff --git a/lvgl.html b/lvgl.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Documentation </title>
    <style>/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}@font-face{font-family:'Glyphicons Halflings';src:url(../fonts/glyphicons-halflings-regular.eot);src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-asterisk:before{content:"\002a"}.glyphicon-plus:before{content:"\002b"}.glyphicon-eur:before,.glyphicon-euro:before{content:"\20ac"}.glyphicon-minus:before{content:"\2212"}.glyphicon-cloud:before{content:"\2601"}.glyphicon-envelope:before{content:"\2709"}.glyphicon-pencil:before{content:"\270f"}.glyphicon-glass:before{content:"\e001"}.glyphicon-music:before{content:"\e002"}.glyphicon-search:before{content:"\e003"}.glyphicon-heart:before{content:"\e005"}.glyphicon-star:before{content:"\e006"}.glyphicon-star-empty:before{content:"\e007"}.glyphicon-user:before{content:"\e008"}.glyphicon-film:before{content:"\e009"}.glyphicon-th-large:before{content:"\e010"}.glyphicon-th:before{content:"\e011"}.glyphicon-th-list:before{content:"\e012"}.glyphicon-ok:before{content:"\e013"}.glyphicon-remove:before{content:"\e014"}.glyphicon-zoom-in:before{content:"\e015"}.glyphicon-zoom-out:before{content:"\e016"}.glyphicon-off:before{content:"\e017"}.glyphicon-signal:before{content:"\e018"}.glyphicon-cog:before{content:"\e019"}.glyphicon-trash:before{content:"\e020"}.glyphicon-home:before{content:"\e021"}.glyphicon-file:before{content:"\e022"}.glyphicon-time:before{content:"\e023"}.glyphicon-road:before{content:"\e024"}.glyphicon-download-alt:before{content:"\e025"}.glyphicon-download:before{content:"\e026"}.glyphicon-upload:before{content:"\e027"}.glyphicon-inbox:before{content:"\e028"}.glyphicon-play-circle:before{content:"\e029"}.glyphicon-repeat:before{content:"\e030"}.glyphicon-refresh:before{content:"\e031"}.glyphicon-list-alt:before{content:"\e032"}.glyphicon-lock:before{content:"\e033"}.glyphicon-flag:before{content:"\e034"}.glyphicon-headphones:before{content:"\e035"}.glyphicon-volume-off:before{content:"\e036"}.glyphicon-volume-down:before{content:"\e037"}.glyphicon-volume-up:before{content:"\e038"}.glyphicon-qrcode:before{content:"\e039"}.glyphicon-barcode:before{content:"\e040"}.glyphicon-tag:before{content:"\e041"}.glyphicon-tags:before{content:"\e042"}.glyphicon-book:before{content:"\e043"}.glyphicon-bookmark:before{content:"\e044"}.glyphicon-print:before{content:"\e045"}.glyphicon-camera:before{content:"\e046"}.glyphicon-font:before{content:"\e047"}.glyphicon-bold:before{content:"\e048"}.glyphicon-italic:before{content:"\e049"}.glyphicon-text-height:before{content:"\e050"}.glyphicon-text-width:before{content:"\e051"}.glyphicon-align-left:before{content:"\e052"}.glyphicon-align-center:before{content:"\e053"}.glyphicon-align-right:before{content:"\e054"}.glyphicon-align-justify:before{content:"\e055"}.glyphicon-list:before{content:"\e056"}.glyphicon-indent-left:before{content:"\e057"}.glyphicon-indent-right:before{content:"\e058"}.glyphicon-facetime-video:before{content:"\e059"}.glyphicon-picture:before{content:"\e060"}.glyphicon-map-marker:before{content:"\e062"}.glyphicon-adjust:before{content:"\e063"}.glyphicon-tint:before{content:"\e064"}.glyphicon-edit:before{content:"\e065"}.glyphicon-share:before{content:"\e066"}.glyphicon-check:before{content:"\e067"}.glyphicon-move:before{content:"\e068"}.glyphicon-step-backward:before{content:"\e069"}.glyphicon-fast-backward:before{content:"\e070"}.glyphicon-backward:before{content:"\e071"}.glyphicon-play:before{content:"\e072"}.glyphicon-pause:before{content:"\e073"}.glyphicon-stop:before{content:"\e074"}.glyphicon-forward:before{content:"\e075"}.glyphicon-fast-forward:before{content:"\e076"}.glyphicon-step-forward:before{content:"\e077"}.glyphicon-eject:before{content:"\e078"}.glyphicon-chevron-left:before{content:"\e079"}.glyphicon-chevron-right:before{content:"\e080"}.glyphicon-plus-sign:before{content:"\e081"}.glyphicon-minus-sign:before{content:"\e082"}.glyphicon-remove-sign:before{content:"\e083"}.glyphicon-ok-sign:before{content:"\e084"}.glyphicon-question-sign:before{content:"\e085"}.glyphicon-info-sign:before{content:"\e086"}.glyphicon-screenshot:before{content:"\e087"}.glyphicon-remove-circle:before{content:"\e088"}.glyphicon-ok-circle:before{content:"\e089"}.glyphicon-ban-circle:before{content:"\e090"}.glyphicon-arrow-left:before{content:"\e091"}.glyphicon-arrow-right:before{content:"\e092"}.glyphicon-arrow-up:before{content:"\e093"}.glyphicon-arrow-down:before{content:"\e094"}.glyphicon-share-alt:before{content:"\e095"}.glyphicon-resize-full:before{content:"\e096"}.glyphicon-resize-small:before{content:"\e097"}.glyphicon-exclamation-sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{content:"\e109"}.glyphicon-random:before{content:"\e110"}.glyphicon-comment:before{content:"\e111"}.glyphicon-magnet:before{content:"\e112"}.glyphicon-chevron-up:before{content:"\e113"}.glyphicon-chevron-down:before{content:"\e114"}.glyphicon-retweet:before{content:"\e115"}.glyphicon-shopping-cart:before{content:"\e116"}.glyphicon-folder-close:before{content:"\e117"}.glyphicon-folder-open:before{content:"\e118"}.glyphicon-resize-vertical:before{content:"\e119"}.glyphicon-resize-horizontal:before{content:"\e120"}.glyphicon-hdd:before{content:"\e121"}.glyphicon-bullhorn:before{content:"\e122"}.glyphicon-bell:before{content:"\e123"}.glyphicon-certificate:before{content:"\e124"}.glyphicon-thumbs-up:before{content:"\e125"}.glyphicon-thumbs-down:before{content:"\e126"}.glyphicon-hand-right:before{content:"\e127"}.glyphicon-hand-left:before{content:"\e128"}.glyphicon-hand-up:before{content:"\e129"}.glyphicon-hand-down:before{content:"\e130"}.glyphicon-circle-arrow-right:before{content:"\e131"}.glyphicon-circle-arrow-left:before{content:"\e132"}.glyphicon-circle-arrow-up:before{content:"\e133"}.glyphicon-circle-arrow-down:before{content:"\e134"}.glyphicon-globe:before{content:"\e135"}.glyphicon-wrench:before{content:"\e136"}.glyphicon-tasks:before{content:"\e137"}.glyphicon-filter:before{content:"\e138"}.glyphicon-briefcase:before{content:"\e139"}.glyphicon-fullscreen:before{content:"\e140"}.glyphicon-dashboard:before{content:"\e141"}.glyphicon-paperclip:before{content:"\e142"}.glyphicon-heart-empty:before{content:"\e143"}.glyphicon-link:before{content:"\e144"}.glyphicon-phone:before{content:"\e145"}.glyphicon-pushpin:before{content:"\e146"}.glyphicon-usd:before{content:"\e148"}.glyphicon-gbp:before{content:"\e149"}.glyphicon-sort:before{content:"\e150"}.glyphicon-sort-by-alphabet:before{content:"\e151"}.glyphicon-sort-by-alphabet-alt:before{content:"\e152"}.glyphicon-sort-by-order:before{content:"\e153"}.glyphicon-sort-by-order-alt:before{content:"\e154"}.glyphicon-sort-by-attributes:before{content:"\e155"}.glyphicon-sort-by-attributes-alt:before{content:"\e156"}.glyphicon-unchecked:before{content:"\e157"}.glyphicon-expand:before{content:"\e158"}.glyphicon-collapse-down:before{content:"\e159"}.glyphicon-collapse-up:before{content:"\e160"}.glyphicon-log-in:before{content:"\e161"}.glyphicon-flash:before{content:"\e162"}.glyphicon-log-out:before{content:"\e163"}.glyphicon-new-window:before{content:"\e164"}.glyphicon-record:before{content:"\e165"}.glyphicon-save:before{content:"\e166"}.glyphicon-open:before{content:"\e167"}.glyphicon-saved:before{content:"\e168"}.glyphicon-import:before{content:"\e169"}.glyphicon-export:before{content:"\e170"}.glyphicon-send:before{content:"\e171"}.glyphicon-floppy-disk:before{content:"\e172"}.glyphicon-floppy-saved:before{content:"\e173"}.glyphicon-floppy-remove:before{content:"\e174"}.glyphicon-floppy-save:before{content:"\e175"}.glyphicon-floppy-open:before{content:"\e176"}.glyphicon-credit-card:before{content:"\e177"}.glyphicon-transfer:before{content:"\e178"}.glyphicon-cutlery:before{content:"\e179"}.glyphicon-header:before{content:"\e180"}.glyphicon-compressed:before{content:"\e181"}.glyphicon-earphone:before{content:"\e182"}.glyphicon-phone-alt:before{content:"\e183"}.glyphicon-tower:before{content:"\e184"}.glyphicon-stats:before{content:"\e185"}.glyphicon-sd-video:before{content:"\e186"}.glyphicon-hd-video:before{content:"\e187"}.glyphicon-subtitles:before{content:"\e188"}.glyphicon-sound-stereo:before{content:"\e189"}.glyphicon-sound-dolby:before{content:"\e190"}.glyphicon-sound-5-1:before{content:"\e191"}.glyphicon-sound-6-1:before{content:"\e192"}.glyphicon-sound-7-1:before{content:"\e193"}.glyphicon-copyright-mark:before{content:"\e194"}.glyphicon-registration-mark:before{content:"\e195"}.glyphicon-cloud-download:before{content:"\e197"}.glyphicon-cloud-upload:before{content:"\e198"}.glyphicon-tree-conifer:before{content:"\e199"}.glyphicon-tree-deciduous:before{content:"\e200"}.glyphicon-cd:before{content:"\e201"}.glyphicon-save-file:before{content:"\e202"}.glyphicon-open-file:before{content:"\e203"}.glyphicon-level-up:before{content:"\e204"}.glyphicon-copy:before{content:"\e205"}.glyphicon-paste:before{content:"\e206"}.glyphicon-alert:before{content:"\e209"}.glyphicon-equalizer:before{content:"\e210"}.glyphicon-king:before{content:"\e211"}.glyphicon-queen:before{content:"\e212"}.glyphicon-pawn:before{content:"\e213"}.glyphicon-bishop:before{content:"\e214"}.glyphicon-knight:before{content:"\e215"}.glyphicon-baby-formula:before{content:"\e216"}.glyphicon-tent:before{content:"\26fa"}.glyphicon-blackboard:before{content:"\e218"}.glyphicon-bed:before{content:"\e219"}.glyphicon-apple:before{content:"\f8ff"}.glyphicon-erase:before{content:"\e221"}.glyphicon-hourglass:before{content:"\231b"}.glyphicon-lamp:before{content:"\e223"}.glyphicon-duplicate:before{content:"\e224"}.glyphicon-piggy-bank:before{content:"\e225"}.glyphicon-scissors:before{content:"\e226"}.glyphicon-bitcoin:before{content:"\e227"}.glyphicon-btc:before{content:"\e227"}.glyphicon-xbt:before{content:"\e227"}.glyphicon-yen:before{content:"\00a5"}.glyphicon-jpy:before{content:"\00a5"}.glyphicon-ruble:before{content:"\20bd"}.glyphicon-rub:before{content:"\20bd"}.glyphicon-scale:before{content:"\e230"}.glyphicon-ice-lolly:before{content:"\e231"}.glyphicon-ice-lolly-tasted:before{content:"\e232"}.glyphicon-education:before{content:"\e233"}.glyphicon-option-horizontal:before{content:"\e234"}.glyphicon-option-vertical:before{content:"\e235"}.glyphicon-menu-hamburger:before{content:"\e236"}.glyphicon-modal-window:before{content:"\e237"}.glyphicon-oil:before{content:"\e238"}.glyphicon-grain:before{content:"\e239"}.glyphicon-sunglasses:before{content:"\e240"}.glyphicon-text-size:before{content:"\e241"}.glyphicon-text-color:before{content:"\e242"}.glyphicon-text-background:before{content:"\e243"}.glyphicon-object-align-top:before{content:"\e244"}.glyphicon-object-align-bottom:before{content:"\e245"}.glyphicon-object-align-horizontal:before{content:"\e246"}.glyphicon-object-align-left:before{content:"\e247"}.glyphicon-object-align-vertical:before{content:"\e248"}.glyphicon-object-align-right:before{content:"\e249"}.glyphicon-triangle-right:before{content:"\e250"}.glyphicon-triangle-left:before{content:"\e251"}.glyphicon-triangle-bottom:before{content:"\e252"}.glyphicon-triangle-top:before{content:"\e253"}.glyphicon-console:before{content:"\e254"}.glyphicon-superscript:before{content:"\e255"}.glyphicon-subscript:before{content:"\e256"}.glyphicon-menu-left:before{content:"\e257"}.glyphicon-menu-right:before{content:"\e258"}.glyphicon-menu-down:before{content:"\e259"}.glyphicon-menu-up:before{content:"\e260"}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role=button]{cursor:pointer}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.small,small{font-size:85%}.mark,mark{padding:.2em;background-color:#fcf8e3}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#777}.text-primary{color:#337ab7}a.text-primary:focus,a.text-primary:hover{color:#286090}.text-success{color:#3c763d}a.text-success:focus,a.text-success:hover{color:#2b542c}.text-info{color:#31708f}a.text-info:focus,a.text-info:hover{color:#245269}.text-warning{color:#8a6d3b}a.text-warning:focus,a.text-warning:hover{color:#66512c}.text-danger{color:#a94442}a.text-danger:focus,a.text-danger:hover{color:#843534}.bg-primary{color:#fff;background-color:#337ab7}a.bg-primary:focus,a.bg-primary:hover{background-color:#286090}.bg-success{background-color:#dff0d8}a.bg-success:focus,a.bg-success:hover{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:focus,a.bg-info:hover{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:focus,a.bg-warning:hover{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:focus,a.bg-danger:hover{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ol,ul{margin-top:0;margin-bottom:10px}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;margin-left:-5px;list-style:none}.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-top:0;margin-bottom:20px}dd,dt{line-height:1.42857143}dt{font-weight:700}dd{margin-left:0}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #777}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}blockquote ol:last-child,blockquote p:last-child,blockquote ul:last-child{margin-bottom:0}blockquote .small,blockquote footer,blockquote small{display:block;font-size:80%;line-height:1.42857143;color:#777}blockquote .small:before,blockquote footer:before,blockquote small:before{content:'\2014 \00A0'}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;text-align:right;border-right:5px solid #eee;border-left:0}.blockquote-reverse .small:before,.blockquote-reverse footer:before,.blockquote-reverse small:before,blockquote.pull-right .small:before,blockquote.pull-right footer:before,blockquote.pull-right small:before{content:''}.blockquote-reverse .small:after,.blockquote-reverse footer:after,.blockquote-reverse small:after,blockquote.pull-right .small:after,blockquote.pull-right footer:after,blockquote.pull-right small:after{content:'\00A0 \2014'}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}kbd kbd{padding:0;font-size:100%;font-weight:700;-webkit-box-shadow:none;box-shadow:none}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:4px}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}table{background-color:transparent}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left}th{text-align:left}.table{width:100%;max-width:100%;margin-bottom:20px}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border-bottom-width:2px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.table-hover>tbody>tr:hover{background-color:#f5f5f5}table col[class*=col-]{position:static;display:table-column;float:none}table td[class*=col-],table th[class*=col-]{position:static;display:table-cell;float:none}.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active{background-color:#f5f5f5}.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover{background-color:#e8e8e8}.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success{background-color:#dff0d8}.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover{background-color:#d0e9c6}.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info{background-color:#d9edf7}.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover{background-color:#c4e3f3}.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning{background-color:#fcf8e3}.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover{background-color:#faf2cc}.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger{background-color:#f2dede}.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover{background-color:#ebcccc}.table-responsive{min-height:.01%;overflow-x:auto}@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px\9;line-height:normal}input[type=file]{display:block}input[type=range]{display:block;width:100%}select[multiple],select[size]{height:auto}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}output{display:block;padding-top:7px;font-size:14px;line-height:1.42857143;color:#555}.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control::-ms-expand{background-color:transparent;border:0}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}textarea.form-control{height:auto}input[type=search]{-webkit-appearance:none}@media screen and (-webkit-min-device-pixel-ratio:0){input[type=date].form-control,input[type=time].form-control,input[type=datetime-local].form-control,input[type=month].form-control{line-height:34px}.input-group-sm input[type=date],.input-group-sm input[type=time],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],input[type=date].input-sm,input[type=time].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm{line-height:30px}.input-group-lg input[type=date],.input-group-lg input[type=time],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],input[type=date].input-lg,input[type=time].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg{line-height:46px}}.form-group{margin-bottom:15px}.checkbox,.radio{position:relative;display:block;margin-top:10px;margin-bottom:10px}.checkbox label,.radio label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:400;cursor:pointer}.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],.radio input[type=radio],.radio-inline input[type=radio]{position:absolute;margin-top:4px\9;margin-left:-20px}.checkbox+.checkbox,.radio+.radio{margin-top:-5px}.checkbox-inline,.radio-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;font-weight:400;vertical-align:middle;cursor:pointer}.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline{margin-top:0;margin-left:10px}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed}.checkbox-inline.disabled,.radio-inline.disabled,fieldset[disabled] .checkbox-inline,fieldset[disabled] .radio-inline{cursor:not-allowed}.checkbox.disabled label,.radio.disabled label,fieldset[disabled] .checkbox label,fieldset[disabled] .radio label{cursor:not-allowed}.form-control-static{min-height:34px;padding-top:7px;padding-bottom:7px;margin-bottom:0}.form-control-static.input-lg,.form-control-static.input-sm{padding-right:0;padding-left:0}.input-sm{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-sm{height:30px;line-height:30px}select[multiple].input-sm,textarea.input-sm{height:auto}.form-group-sm .form-control{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.form-group-sm select.form-control{height:30px;line-height:30px}.form-group-sm select[multiple].form-control,.form-group-sm textarea.form-control{height:auto}.form-group-sm .form-control-static{height:30px;min-height:32px;padding:6px 10px;font-size:12px;line-height:1.5}.input-lg{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-lg{height:46px;line-height:46px}select[multiple].input-lg,textarea.input-lg{height:auto}.form-group-lg .form-control{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.form-group-lg select.form-control{height:46px;line-height:46px}.form-group-lg select[multiple].form-control,.form-group-lg textarea.form-control{height:auto}.form-group-lg .form-control-static{height:46px;min-height:38px;padding:11px 16px;font-size:18px;line-height:1.3333333}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.form-control-feedback{position:absolute;top:0;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none}.form-group-lg .form-control+.form-control-feedback,.input-group-lg+.form-control-feedback,.input-lg+.form-control-feedback{width:46px;height:46px;line-height:46px}.form-group-sm .form-control+.form-control-feedback,.input-group-sm+.form-control-feedback,.input-sm+.form-control-feedback{width:30px;height:30px;line-height:30px}.has-success .checkbox,.has-success .checkbox-inline,.has-success .control-label,.has-success .help-block,.has-success .radio,.has-success .radio-inline,.has-success.checkbox label,.has-success.checkbox-inline label,.has-success.radio label,.has-success.radio-inline label{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}.has-success .form-control-feedback{color:#3c763d}.has-warning .checkbox,.has-warning .checkbox-inline,.has-warning .control-label,.has-warning .help-block,.has-warning .radio,.has-warning .radio-inline,.has-warning.checkbox label,.has-warning.checkbox-inline label,.has-warning.radio label,.has-warning.radio-inline label{color:#8a6d3b}.has-warning .form-control{border-color:#8a6d3b;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-warning .form-control:focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-warning .input-group-addon{color:#8a6d3b;background-color:#fcf8e3;border-color:#8a6d3b}.has-warning .form-control-feedback{color:#8a6d3b}.has-error .checkbox,.has-error .checkbox-inline,.has-error .control-label,.has-error .help-block,.has-error .radio,.has-error .radio-inline,.has-error.checkbox label,.has-error.checkbox-inline label,.has-error.radio label,.has-error.radio-inline label{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;background-color:#f2dede;border-color:#a94442}.has-error .form-control-feedback{color:#a94442}.has-feedback label~.form-control-feedback{top:25px}.has-feedback label.sr-only~.form-control-feedback{top:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}@media (min-width:768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{display:inline-block}.form-inline .input-group{display:inline-table;vertical-align:middle}.form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn{width:auto}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .checkbox,.form-inline .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .checkbox label,.form-inline .radio label{padding-left:0}.form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio]{position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .checkbox,.form-horizontal .checkbox-inline,.form-horizontal .radio,.form-horizontal .radio-inline{padding-top:7px;margin-top:0;margin-bottom:0}.form-horizontal .checkbox,.form-horizontal .radio{min-height:27px}.form-horizontal .form-group{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.form-horizontal .control-label{padding-top:7px;margin-bottom:0;text-align:right}}.form-horizontal .has-feedback .form-control-feedback{right:15px}@media (min-width:768px){.form-horizontal .form-group-lg .control-label{padding-top:11px;font-size:18px}}@media (min-width:768px){.form-horizontal .form-group-sm .control-label{padding-top:6px;font-size:12px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.focus,.btn:focus,.btn:hover{color:#333;text-decoration:none}.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;opacity:.65}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default.focus,.btn-default:focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c}.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover{color:#333;background-color:#d4d4d4;border-color:#8c8c8c}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{background-image:none}.btn-default.disabled.focus,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled].focus,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40}.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{color:#fff;background-color:#204d74;border-color:#122b40}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#337ab7;border-color:#2e6da4}.btn-primary .badge{color:#337ab7;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#449d44;border-color:#255625}.btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover{color:#fff;background-color:#398439;border-color:#255625}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{background-image:none}.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover{color:#fff;background-color:#269abc;border-color:#1b6d85}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{background-image:none}.btn-info.disabled.focus,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled].focus,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning.focus,.btn-warning:focus{color:#fff;background-color:#ec971f;border-color:#985f0d}.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover{color:#fff;background-color:#d58512;border-color:#985f0d}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{background-image:none}.btn-warning.disabled.focus,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled].focus,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover{color:#fff;background-color:#ac2925;border-color:#761c19}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{background-image:none}.btn-danger.disabled.focus,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled].focus,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{font-weight:400;color:#337ab7;border-radius:0}.btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{color:#23527c;text-decoration:underline;background-color:transparent}.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{color:#777;text-decoration:none}.btn-group-lg>.btn,.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.btn-group-sm>.btn,.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-group-xs>.btn,.btn-xs{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:5px}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}tr.collapse.in{display:table-row}tbody.collapse.in{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-duration:.35s;-o-transition-duration:.35s;transition-duration:.35s;-webkit-transition-property:height,visibility;-o-transition-property:height,visibility;transition-property:height,visibility}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid\9;border-right:4px solid transparent;border-left:4px solid transparent}.dropdown,.dropup{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{color:#262626;text-decoration:none;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{color:#777}.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{right:0;left:auto}.dropdown-menu-left{right:auto;left:0}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#777;white-space:nowrap}.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{content:"";border-top:0;border-bottom:4px dashed;border-bottom:4px solid\9}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{right:0;left:auto}.navbar-right .dropdown-menu-left{right:auto;left:0}}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;float:left}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{margin-left:-5px}.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-right:8px;padding-left:8px}.btn-group>.btn-lg+.dropdown-toggle{padding-right:12px;padding-left:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none}.btn .caret{margin-left:0}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0}.dropup .btn-lg .caret{border-width:0 5px 5px}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group>.btn{float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-top-right-radius:0}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate}.btn-group-justified>.btn,.btn-group-justified>.btn-group{display:table-cell;float:none;width:1%}.btn-group-justified>.btn-group .btn{width:100%}.btn-group-justified>.btn-group .dropdown-menu{left:auto}[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:table;border-collapse:separate}.input-group[class*=col-]{float:none;padding-right:0;padding-left:0}.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group .form-control:focus{z-index:3}.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn{height:46px;line-height:46px}select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn,textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn{height:auto}.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn{height:30px;line-height:30px}select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn,textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn{height:auto}.input-group .form-control,.input-group-addon,.input-group-btn{display:table-cell}.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc;border-radius:4px}.input-group-addon.input-sm{padding:5px 10px;font-size:12px;border-radius:3px}.input-group-addon.input-lg{padding:10px 16px;font-size:18px;border-radius:6px}.input-group-addon input[type=checkbox],.input-group-addon input[type=radio]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn-group:not(:last-child)>.btn,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover{z-index:2}.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:-1px}.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{z-index:2;margin-left:-1px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}.nav>li.disabled>a{color:#777}.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;cursor:not-allowed;background-color:transparent}.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{background-color:#eee;border-color:#337ab7}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav>li>a>img{max-width:none}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd}.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border-bottom-color:#fff}}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{color:#fff;background-color:#337ab7}.nav-stacked>li{float:none}.nav-stacked>li+li{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{float:none}.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border-bottom-color:#fff}}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}.navbar-collapse.in{overflow-y:auto}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse{padding-right:0;padding-left:0}}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:340px}@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:200px}}.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}}.navbar-static-top{z-index:1000;border-width:0 0 1px}@media (min-width:768px){.navbar-static-top{border-radius:0}}.navbar-fixed-bottom,.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}@media (min-width:768px){.navbar-fixed-bottom,.navbar-fixed-top{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-brand>img{display:block}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-top:8px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle:focus{outline:0}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none}.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}}.navbar-form{padding:10px 15px;margin-top:8px;margin-right:-15px;margin-bottom:8px;margin-left:-15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1)}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .form-control-static{display:inline-block}.navbar-form .input-group{display:inline-table;vertical-align:middle}.navbar-form .input-group .form-control,.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn{width:auto}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .checkbox,.navbar-form .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.navbar-form .checkbox label,.navbar-form .radio label{padding-left:0}.navbar-form .checkbox input[type=checkbox],.navbar-form .radio input[type=radio]{position:relative;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}.navbar-form .form-group:last-child{margin-bottom:0}}@media (min-width:768px){.navbar-form{width:auto;padding-top:0;padding-bottom:0;margin-right:0;margin-left:0;border:0;-webkit-box-shadow:none;box-shadow:none}}.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.navbar-btn{margin-top:8px;margin-bottom:8px}.navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}.navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}.navbar-text{margin-top:15px;margin-bottom:15px}@media (min-width:768px){.navbar-text{float:left;margin-right:15px;margin-left:15px}}@media (min-width:768px){.navbar-left{float:left!important}.navbar-right{float:right!important;margin-right:-15px}.navbar-right~.navbar-right{margin-right:0}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover{color:#5e5e5e;background-color:transparent}.navbar-default .navbar-text{color:#777}.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover{color:#ccc;background-color:transparent}.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{color:#555;background-color:#e7e7e7}@media (max-width:767px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#ccc;background-color:transparent}}.navbar-default .navbar-link{color:#777}.navbar-default .navbar-link:hover{color:#333}.navbar-default .btn-link{color:#777}.navbar-default .btn-link:focus,.navbar-default .btn-link:hover{color:#333}.navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover{color:#ccc}.navbar-inverse{background-color:#222;border-color:#080808}.navbar-inverse .navbar-brand{color:#9d9d9d}.navbar-inverse .navbar-brand:focus,.navbar-inverse .navbar-brand:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a:focus,.navbar-inverse .navbar-nav>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus,.navbar-inverse .navbar-nav>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:focus,.navbar-inverse .navbar-nav>.disabled>a:hover{color:#444;background-color:transparent}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle:focus,.navbar-inverse .navbar-toggle:hover{background-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#101010}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:focus,.navbar-inverse .navbar-nav>.open>a:hover{color:#fff;background-color:#080808}@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#444;background-color:transparent}}.navbar-inverse .navbar-link{color:#9d9d9d}.navbar-inverse .navbar-link:hover{color:#fff}.navbar-inverse .btn-link{color:#9d9d9d}.navbar-inverse .btn-link:focus,.navbar-inverse .btn-link:hover{color:#fff}.navbar-inverse .btn-link[disabled]:focus,.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:focus,fieldset[disabled] .navbar-inverse .btn-link:hover{color:#444}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:4px}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{padding:0 5px;color:#ccc;content:"/\00a0"}.breadcrumb>.active{color:#777}.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:focus,.pager li>a:hover{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span{color:#777;cursor:not-allowed;background-color:#fff}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:focus,a.label:hover{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#777}.label-default[href]:focus,.label-default[href]:hover{background-color:#5e5e5e}.label-primary{background-color:#337ab7}.label-primary[href]:focus,.label-primary[href]:hover{background-color:#286090}.label-success{background-color:#5cb85c}.label-success[href]:focus,.label-success[href]:hover{background-color:#449d44}.label-info{background-color:#5bc0de}.label-info[href]:focus,.label-info[href]:hover{background-color:#31b0d5}.label-warning{background-color:#f0ad4e}.label-warning[href]:focus,.label-warning[href]:hover{background-color:#ec971f}.label-danger{background-color:#d9534f}.label-danger[href]:focus,.label-danger[href]:hover{background-color:#c9302c}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#777;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-group-xs>.btn .badge,.btn-xs .badge{top:0;padding:1px 5px}a.badge:focus,a.badge:hover{color:#fff;text-decoration:none;cursor:pointer}.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#337ab7;background-color:#fff}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}.nav-pills>li>a>.badge{margin-left:3px}.jumbotron{padding-top:30px;padding-bottom:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron .h1,.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.jumbotron>hr{border-top-color:#d5d5d5}.container .jumbotron,.container-fluid .jumbotron{padding-right:15px;padding-left:15px;border-radius:6px}.jumbotron .container{max-width:100%}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron,.container-fluid .jumbotron{padding-right:60px;padding-left:60px}.jumbotron .h1,.jumbotron h1{font-size:63px}}.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out}.thumbnail a>img,.thumbnail>img{margin-right:auto;margin-left:auto}a.thumbnail.active,a.thumbnail:focus,a.thumbnail:hover{border-color:#337ab7}.thumbnail .caption{padding:9px;color:#333}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress-bar-striped,.progress-striped .progress-bar{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-size:40px 40px;background-size:40px 40px}.progress-bar.active,.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-success{background-color:#5cb85c}.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-info{background-color:#5bc0de}.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-warning{background-color:#f0ad4e}.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-danger{background-color:#d9534f}.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.media{margin-top:15px}.media:first-child{margin-top:0}.media,.media-body{overflow:hidden;zoom:1}.media-body{width:10000px}.media-object{display:block}.media-object.img-thumbnail{max-width:none}.media-right,.media>.pull-right{padding-left:10px}.media-left,.media>.pull-left{padding-right:10px}.media-body,.media-left,.media-right{display:table-cell;vertical-align:top}.media-middle{vertical-align:middle}.media-bottom{vertical-align:bottom}.media-heading{margin-top:0;margin-bottom:5px}.media-list{padding-left:0;list-style:none}.list-group{padding-left:0;margin-bottom:20px}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}a.list-group-item,button.list-group-item{color:#555}a.list-group-item .list-group-item-heading,button.list-group-item .list-group-item-heading{color:#333}a.list-group-item:focus,a.list-group-item:hover,button.list-group-item:focus,button.list-group-item:hover{color:#555;text-decoration:none;background-color:#f5f5f5}button.list-group-item{width:100%;text-align:left}.list-group-item.disabled,.list-group-item.disabled:focus,.list-group-item.disabled:hover{color:#777;cursor:not-allowed;background-color:#eee}.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading{color:inherit}.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text{color:#777}.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{z-index:2;color:#fff;background-color:#337ab7;border-color:#337ab7}.list-group-item.active .list-group-item-heading,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading>small{color:inherit}.list-group-item.active .list-group-item-text,.list-group-item.active:focus .list-group-item-text,.list-group-item.active:hover .list-group-item-text{color:#c7ddef}.list-group-item-success{color:#3c763d;background-color:#dff0d8}a.list-group-item-success,button.list-group-item-success{color:#3c763d}a.list-group-item-success .list-group-item-heading,button.list-group-item-success .list-group-item-heading{color:inherit}a.list-group-item-success:focus,a.list-group-item-success:hover,button.list-group-item-success:focus,button.list-group-item-success:hover{color:#3c763d;background-color:#d0e9c6}a.list-group-item-success.active,a.list-group-item-success.active:focus,a.list-group-item-success.active:hover,button.list-group-item-success.active,button.list-group-item-success.active:focus,button.list-group-item-success.active:hover{color:#fff;background-color:#3c763d;border-color:#3c763d}.list-group-item-info{color:#31708f;background-color:#d9edf7}a.list-group-item-info,button.list-group-item-info{color:#31708f}a.list-group-item-info .list-group-item-heading,button.list-group-item-info .list-group-item-heading{color:inherit}a.list-group-item-info:focus,a.list-group-item-info:hover,button.list-group-item-info:focus,button.list-group-item-info:hover{color:#31708f;background-color:#c4e3f3}a.list-group-item-info.active,a.list-group-item-info.active:focus,a.list-group-item-info.active:hover,button.list-group-item-info.active,button.list-group-item-info.active:focus,button.list-group-item-info.active:hover{color:#fff;background-color:#31708f;border-color:#31708f}.list-group-item-warning{color:#8a6d3b;background-color:#fcf8e3}a.list-group-item-warning,button.list-group-item-warning{color:#8a6d3b}a.list-group-item-warning .list-group-item-heading,button.list-group-item-warning .list-group-item-heading{color:inherit}a.list-group-item-warning:focus,a.list-group-item-warning:hover,button.list-group-item-warning:focus,button.list-group-item-warning:hover{color:#8a6d3b;background-color:#faf2cc}a.list-group-item-warning.active,a.list-group-item-warning.active:focus,a.list-group-item-warning.active:hover,button.list-group-item-warning.active,button.list-group-item-warning.active:focus,button.list-group-item-warning.active:hover{color:#fff;background-color:#8a6d3b;border-color:#8a6d3b}.list-group-item-danger{color:#a94442;background-color:#f2dede}a.list-group-item-danger,button.list-group-item-danger{color:#a94442}a.list-group-item-danger .list-group-item-heading,button.list-group-item-danger .list-group-item-heading{color:inherit}a.list-group-item-danger:focus,a.list-group-item-danger:hover,button.list-group-item-danger:focus,button.list-group-item-danger:hover{color:#a94442;background-color:#ebcccc}a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover,button.list-group-item-danger.active,button.list-group-item-danger.active:focus,button.list-group-item-danger.active:hover{color:#fff;background-color:#a94442;border-color:#a94442}.list-group-item-heading{margin-top:0;margin-bottom:5px}.list-group-item-text{margin-bottom:0;line-height:1.3}.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}.panel-body{padding:15px}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}.panel-heading>.dropdown .dropdown-toggle{color:inherit}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.list-group,.panel>.panel-collapse>.list-group{margin-bottom:0}.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{border-width:1px 0;border-radius:0}.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-left-radius:3px;border-top-right-radius:3px}.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.panel-heading+.panel-collapse>.list-group .list-group-item:first-child{border-top-left-radius:0;border-top-right-radius:0}.panel-heading+.list-group .list-group-item:first-child{border-top-width:0}.list-group+.panel-footer{border-top-width:0}.panel>.panel-collapse>.table,.panel>.table,.panel>.table-responsive>.table{margin-bottom:0}.panel>.panel-collapse>.table caption,.panel>.table caption,.panel>.table-responsive>.table caption{padding-right:15px;padding-left:15px}.panel>.table-responsive:first-child>.table:first-child,.panel>.table:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table:first-child>thead:first-child>tr:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child{border-top-left-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child{border-top-right-radius:3px}.panel>.table-responsive:last-child>.table:last-child,.panel>.table:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:3px}.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid #ddd}.panel>.table>tbody:first-child>tr:first-child td,.panel>.table>tbody:first-child>tr:first-child th{border-top:0}.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0}.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th{border-bottom:0}.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.panel>.table-responsive{margin-bottom:0;border:0}.panel-group{margin-bottom:20px}.panel-group .panel{margin-bottom:0;border-radius:4px}.panel-group .panel+.panel{margin-top:5px}.panel-group .panel-heading{border-bottom:0}.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd}.panel-group .panel-footer{border-top:0}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}.panel-default{border-color:#ddd}.panel-default>.panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd}.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ddd}.panel-default>.panel-heading .badge{color:#f5f5f5;background-color:#333}.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ddd}.panel-primary{border-color:#337ab7}.panel-primary>.panel-heading{color:#fff;background-color:#337ab7;border-color:#337ab7}.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#337ab7}.panel-primary>.panel-heading .badge{color:#337ab7;background-color:#fff}.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#337ab7}.panel-success{border-color:#d6e9c6}.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}.panel-success>.panel-heading .badge{color:#dff0d8;background-color:#3c763d}.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}.panel-info{border-color:#bce8f1}.panel-info>.panel-heading{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bce8f1}.panel-info>.panel-heading .badge{color:#d9edf7;background-color:#31708f}.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bce8f1}.panel-warning{border-color:#faebcc}.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc}.panel-warning>.panel-heading .badge{color:#fcf8e3;background-color:#8a6d3b}.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc}.panel-danger{border-color:#ebccd1}.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}.panel-danger>.panel-heading .badge{color:#f2dede;background-color:#a94442}.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,.15)}.well-lg{padding:24px;border-radius:6px}.well-sm{padding:9px;border-radius:3px}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;border:0}.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:15px}.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal-sm{width:300px}}@media (min-width:992px){.modal-lg{width:900px}}.tooltip{position:absolute;z-index:1070;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;filter:alpha(opacity=0);opacity:0;line-break:auto}.tooltip.in{filter:alpha(opacity=90);opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.popover{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:276px;padding:1px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);line-break:auto}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover-title{padding:8px 14px;margin:0;font-size:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.popover-content{padding:9px 14px}.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover>.arrow{border-width:11px}.popover>.arrow:after{content:"";border-width:10px}.popover.top>.arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}.popover.top>.arrow:after{bottom:1px;margin-left:-10px;content:" ";border-top-color:#fff;border-bottom-width:0}.popover.right>.arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,.25);border-left-width:0}.popover.right>.arrow:after{bottom:-10px;left:1px;content:" ";border-right-color:#fff;border-left-width:0}.popover.bottom>.arrow{top:-11px;left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25)}.popover.bottom>.arrow:after{top:1px;margin-left:-10px;content:" ";border-top-width:0;border-bottom-color:#fff}.popover.left>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.popover.left>.arrow:after{right:1px;bottom:-10px;content:" ";border-right-width:0;border-left-color:#fff}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);background-color:rgba(0,0,0,0);filter:alpha(opacity=50);opacity:.5}.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x}.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;filter:alpha(opacity=90);outline:0;opacity:.9}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block;margin-top:-10px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000\9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-10px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-10px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right!important}.pull-left{float:left!important}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none!important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-lg,.visible-md,.visible-sm,.visible-xs{display:none!important}.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block{display:none!important}@media (max-width:767px){.visible-xs{display:block!important}table.visible-xs{display:table!important}tr.visible-xs{display:table-row!important}td.visible-xs,th.visible-xs{display:table-cell!important}}@media (max-width:767px){.visible-xs-block{display:block!important}}@media (max-width:767px){.visible-xs-inline{display:inline!important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block!important}table.visible-sm{display:table!important}tr.visible-sm{display:table-row!important}td.visible-sm,th.visible-sm{display:table-cell!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block!important}table.visible-md{display:table!important}tr.visible-md{display:table-row!important}td.visible-md,th.visible-md{display:table-cell!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block!important}}@media (min-width:1200px){.visible-lg{display:block!important}table.visible-lg{display:table!important}tr.visible-lg{display:table-row!important}td.visible-lg,th.visible-lg{display:table-cell!important}}@media (min-width:1200px){.visible-lg-block{display:block!important}}@media (min-width:1200px){.visible-lg-inline{display:inline!important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}.visible-print{display:none!important}@media print{.visible-print{display:block!important}table.visible-print{display:table!important}tr.visible-print{display:table-row!important}td.visible-print,th.visible-print{display:table-cell!important}}.visible-print-block{display:none!important}@media print{.visible-print-block{display:block!important}}.visible-print-inline{display:none!important}@media print{.visible-print-inline{display:inline!important}}.visible-print-inline-block{display:none!important}@media print{.visible-print-inline-block{display:inline-block!important}}@media print{.hidden-print{display:none!important}}
 /*# sourceMappingURL=bootstrap.min.css.map */</style>
 <style>/*

 Original highlight.js style (c) Ivan Sagalaev <[email protected]>

 */

 .hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #F0F0F0;
 }


 /* Base color: saturation 0; */

 .hljs,
 .hljs-subst {
  color: #444;
 }

 .hljs-comment {
  color: #888888;
 }

 .hljs-keyword,
 .hljs-attribute,
 .hljs-selector-tag,
 .hljs-meta-keyword,
 .hljs-doctag,
 .hljs-name {
  font-weight: bold;
 }


 /* User color: hue: 0 */

 .hljs-type,
 .hljs-string,
 .hljs-number,
 .hljs-selector-id,
 .hljs-selector-class,
 .hljs-quote,
 .hljs-template-tag,
 .hljs-deletion {
  color: #880000;
 }

 .hljs-title,
 .hljs-section {
  color: #880000;
  font-weight: bold;
 }

 .hljs-regexp,
 .hljs-symbol,
 .hljs-variable,
 .hljs-template-variable,
 .hljs-link,
 .hljs-selector-attr,
 .hljs-selector-pseudo {
  color: #BC6060;
 }


 /* Language color: hue: 90; */

 .hljs-literal {
  color: #78A960;
 }

 .hljs-built_in,
 .hljs-bullet,
 .hljs-code,
 .hljs-addition {
  color: #397300;
 }


 /* Meta color: hue: 200 */

 .hljs-meta {
  color: #1f7199;
 }

 .hljs-meta-string {
  color: #4d99bf;
 }


 /* Misc effects */

 .hljs-emphasis {
  font-style: italic;
 }

 .hljs-strong {
  font-weight: bold;
 }
 </style>
 <style>/*

 github.com style (c) Vasily Polovnyov <[email protected]>

 */

 .hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
 }

 .hljs-comment,
 .hljs-quote {
  color: #998;
  font-style: italic;
 }

 .hljs-keyword,
 .hljs-selector-tag,
 .hljs-subst {
  color: #333;
  font-weight: bold;
 }

 .hljs-number,
 .hljs-literal,
 .hljs-variable,
 .hljs-template-variable,
 .hljs-tag .hljs-attr {
  color: #008080;
 }

 .hljs-string,
 .hljs-doctag {
  color: #d14;
 }

 .hljs-title,
 .hljs-section,
 .hljs-selector-id {
  color: #900;
  font-weight: bold;
 }

 .hljs-subst {
  font-weight: normal;
 }

 .hljs-type,
 .hljs-class .hljs-title {
  color: #458;
  font-weight: bold;
 }

 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
  color: #000080;
  font-weight: normal;
 }

 .hljs-regexp,
 .hljs-link {
  color: #009926;
 }

 .hljs-symbol,
 .hljs-bullet {
  color: #990073;
 }

 .hljs-built_in,
 .hljs-builtin-name {
  color: #0086b3;
 }

 .hljs-meta {
  color: #999;
  font-weight: bold;
 }

 .hljs-deletion {
  background: #fdd;
 }

 .hljs-addition {
  background: #dfd;
 }

 .hljs-emphasis {
  font-style: italic;
 }

 .hljs-strong {
  font-weight: bold;
 }
 </style>
 <style> /*General for HTML and PDF*/
 body {
  font-family: Helvetica, arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;
  padding: 30px; }

 body > *:first-child {
  margin-top: 0 !important; }
 body > *:last-child {
  margin-bottom: 0 !important; }

 a {
  color: #4183C4; }
 a.absent {
  color: #cc0000; }
 a.anchor {
  display: block;
  padding-left: 30px;
  margin-left: -30px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; }

 h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  cursor: text;
  position: relative; }

 h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
  background: url("../../images/modules/styleguide/para.png") no-repeat 10px center;
  text-decoration: none; }

 h1 tt, h1 code {
  font-size: inherit; }

 h2 tt, h2 code {
  font-size: inherit; }

 h3 tt, h3 code {
  font-size: inherit; }

 h4 tt, h4 code {
  font-size: inherit; }

 h5 tt, h5 code {
  font-size: inherit; }

 h6 tt, h6 code {
  font-size: inherit; }

 h1 {
  font-size: 28px;
  color: black; }

 h2 {
  font-size: 24px;
  border-bottom: 1px solid #cccccc;
  color: black; }

 h3 {
  font-size: 18px; }

 h4 {
  font-size: 16px; }

 h5 {
  font-size: 14px; }

 h6 {
  color: #777777;
  font-size: 14px; }

 pre.hljs {
    border:none;
    padding: 12px;
 }

 code {
    background-color: #EDEDED;
 }

 p, blockquote, ul, ol, dl, li, table, pre.hljs {
  margin: 15px 0; }

 hr {
  background: transparent url("../../images/modules/pulls/dirty-shade.png") repeat-x 0 0;
  border: 0 none;
  color: #cccccc;
  height: 4px;
  padding: 0; }

 body > h2:first-child {
  margin-top: 0;
  padding-top: 0; }
 body > h1:first-child {
  margin-top: 0;
  padding-top: 0; }
  body > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0; }
 body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
  margin-top: 0;
  padding-top: 0; }

 a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0; }

 h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
  margin-top: 0; }

 li p.first {
  display: inline-block; }

 ul, ol {
  padding-left: 30px; }

 ul :first-child, ol :first-child {
  margin-top: 0; }

 ul :last-child, ol :last-child {
  margin-bottom: 0; }

 dl {
  padding: 0; }
  dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px; }
    dl dt:first-child {
      padding: 0; }
    dl dt > :first-child {
      margin-top: 0; }
    dl dt > :last-child {
      margin-bottom: 0; }
  dl dd {
    margin: 0 0 15px;
    padding: 0 15px; }
    dl dd > :first-child {
      margin-top: 0; }
    dl dd > :last-child {
      margin-bottom: 0; }

 blockquote {
  border-left: 4px solid #dddddd;
  padding: 0 15px;
  font-size: 14px;
  color: #777777; }
  blockquote > :first-child {
    margin-top: 0; }
  blockquote > :last-child {
    margin-bottom: 0; }

 table {
  padding: 0; }
  table tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0; }
    table tr:nth-child(2n) {
      background-color: #f8f8f8; }
    table tr th {
      font-weight: bold;
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px; }
    table tr td {
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px; }
    table tr th :first-child, table tr td :first-child {
      margin-top: 0; }
    table tr th :last-child, table tr td :last-child {
      margin-bottom: 0; }

 img {
  max-width: 100%; }

 span.frame {
  display: block;
  overflow: hidden; }
  span.frame > span {
    border: 1px solid #dddddd;
    display: block;
    float: left;
    overflow: hidden;
    margin: 13px 0 0;
    padding: 7px;
    width: auto; }
  span.frame span img {
    display: block;
    float: left; }
  span.frame span span {
    clear: both;
    color: #333333;
    display: block;
    padding: 5px 0 0; }
 span.align-center {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-center > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: center; }
  span.align-center span img {
    margin: 0 auto;
    text-align: center; }
 span.align-right {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-right > span {
    display: block;
    overflow: hidden;
    margin: 13px 0 0;
    text-align: right; }
  span.align-right span img {
    margin: 0;
    text-align: right; }
 span.float-left {
  display: block;
  margin-right: 13px;
  overflow: hidden;
  float: left; }
  span.float-left span {
    margin: 13px 0 0; }
 span.float-right {
  display: block;
  margin-left: 13px;
  overflow: hidden;
  float: right; }
  span.float-right > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: right; }

 .nav-container  ul, .nav-container  ol {
    margin-left: 0px;
    padding-left: 0px;
 }

 .nav-container .toc:after {
  content: "Table of contents";
 }

 .nav {
    margin:0;
 }

 .nav-inner > .nav, .nav-inner > .nav > li > .nav {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 2px;
    margin-top: 2px;
 }

 .nav-inner > .nav > li:last-child > .nav {
    border-bottom: none;
 }

 .nav > li {
    margin: 0;
 }

 .nav > li > a {
    display: block;
    padding: 3px 18px;
    font-size: 1em;
    font-weight: 500;
 }

 .nav > li > .nav > li > a {
    padding:2px 28px;
    font-size: 0.92em;
    font-weight: 400;
 }

 .nav > li > .nav > li > .nav > li  > a {
    padding:2px 36px;
    font-size: 0.86em;
    font-weight: 400;
 }

 .nav > li > .nav > li > .nav > li > .nav > li  > a {
    padding:2px 44px;
    font-size: 0.86em;
    font-weight: 400;
 }

 .nav li span {
    margin: 0 0;
    padding: 3px 18px;
    font-size: inherit;
    color:#888
 }

 /*For HTML*/
 .html-doc {
    padding-top: 60px !important;
 }

 .html-doc .footer {
    font-size: 85%;
    margin-top: 20px;
    width: 250px;
 }

 .page:before {
    content:"";
    display:block;
    height:55px; /* fixed header height*/
    margin:-55px 0 0; /* negative fixed header height */
 }

 .page {
    height:1px;
    font-size:1px;
    width: 1px;
    padding:50px 0 0 0;
    margin: -50px 0 0 0;
 }

 .html-doc .nav-container {
    margin-top: 10px;
    position: relative;
 }

 .html-doc .logo-img {
    padding: 10px;
    margin:7px 0 0 0;
    max-width:75%;
    max-height:25%;
 }

 .html-doc .nav-container .toc:after {
    display: block;
    color:#888;
    text-transform: uppercase;
    padding: 4px 18px;
    font-weight: 500;
    font-size:90%
 }

 .html-doc .nav-container > .nav-inner {
    position: fixed;
 }

 .html-doc .nav li a:before, .html-doc .nav li span:before {
    content: "\00B7  ";
 }

 .html-doc .nav li.active > a {
    color:darkred;
 }

 .html-doc .nav li.active > a:before {
    content: "\25b8  ";
 }

 .navbar-default .navbar-nav>li>a.generated-by,
 .navbar-default .navbar-nav>li>a.generated-by:visited {
    font-size: 85%;
    color:#ADADAD;
    text-shadow: 1px 1px 0 #fff;
 }

 .navbar-default .navbar-nav>li>a.generated-by:hover {
    color:#666
 }

 @media (max-width: 992px) {
    .html-doc .nav-container > .nav-inner {
        position: relative;
    }
 }

 @media (min-width: 768px) {
    .navbar > .container .doc-title {
        margin-left: 0;
    }
    .navbar-right {
        margin-right: 0;
    }
 }

 @media (min-width: 992px) {
    .nav-inner {
        min-width: 210px;
    }
 }

 @media (min-width: 1200px) {
    .nav-inner {
        min-width: 250px;
    }
 }

 /*For PDF*/
 .pdf-doc{
    padding: 0px;
 }

 .pdf-doc .navbar-toggle {
    display: none;
 }

 .pdf-doc .coverimg {
    max-width:50%;
 }

 .pdf-doc .covertitle {
   padding-top: 40%;
   text-align: right;
   font-size: 40px;
 }

 .pdf-doc .nav-container {
  page-break-before: always !important;
  display: block;
 }

 .pdf-doc pre.hljs, .pdf-doc code {
    font-size: 80%;
 }

 .pdf-doc .nav > li > a {
    padding: 3px 6px;
 }

 .pdf-doc .nav > li > .pdf-doc .nav > li > a {
    padding:2px 16px;
 }

 .pdf-doc .nav > li > .pdf-doc .nav > li > .pdf-doc .nav > li  > a {
    padding:2px 24px;
 }

 .pdf-doc .nav > li > .pdf-doc .nav > li > .pdf-doc .nav > li > .pdf-doc .nav > li  > a {
    padding:2px 32px;
 }

 .pdf-doc .nav li span {
    padding: 3px 6px;
 }
 </style>
    <style>.nav > li > .nav > li > .nav > li > .nav > li {display: none;}</style>
    <script>/*! jQuery v2.2.4 | (c) jQuery Foundation | jquery.org/license */
 !function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=a.document,e=c.slice,f=c.concat,g=c.push,h=c.indexOf,i={},j=i.toString,k=i.hasOwnProperty,l={},m="2.2.4",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return e.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:e.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a){return n.each(this,a)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(e.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:g,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(n.isPlainObject(d)||(e=n.isArray(d)))?(e?(e=!1,f=c&&n.isArray(c)?c:[]):f=c&&n.isPlainObject(c)?c:{},g[b]=n.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=a&&a.toString();return!n.isArray(a)&&b-parseFloat(b)+1>=0},isPlainObject:function(a){var b;if("object"!==n.type(a)||a.nodeType||n.isWindow(a))return!1;if(a.constructor&&!k.call(a,"constructor")&&!k.call(a.constructor.prototype||{},"isPrototypeOf"))return!1;for(b in a);return void 0===b||k.call(a,b)},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?i[j.call(a)]||"object":typeof a},globalEval:function(a){var b,c=eval;a=n.trim(a),a&&(1===a.indexOf("use strict")?(b=d.createElement("script"),b.text=a,d.head.appendChild(b).parentNode.removeChild(b)):c(a))},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b){var c,d=0;if(s(a)){for(c=a.length;c>d;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):g.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:h.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;c>d;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,g=0,h=[];if(s(a))for(d=a.length;d>g;g++)e=b(a[g],g,c),null!=e&&h.push(e);else for(g in a)e=b(a[g],g,c),null!=e&&h.push(e);return f.apply([],h)},guid:1,proxy:function(a,b){var c,d,f;return"string"==typeof b&&(c=a[b],b=a,a=c),n.isFunction(a)?(d=e.call(arguments,2),f=function(){return a.apply(b||this,d.concat(e.call(arguments)))},f.guid=a.guid=a.guid||n.guid++,f):void 0},now:Date.now,support:l}),"function"==typeof Symbol&&(n.fn[Symbol.iterator]=c[Symbol.iterator]),n.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){i["[object "+b+"]"]=b.toLowerCase()});function s(a){var b=!!a&&"length"in a&&a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ga(),z=ga(),A=ga(),B=function(a,b){return a===b&&(l=!0),0},C=1<<31,D={}.hasOwnProperty,E=[],F=E.pop,G=E.push,H=E.push,I=E.slice,J=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},K="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",L="[\\x20\\t\\r\\n\\f]",M="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",N="\\["+L+"*("+M+")(?:"+L+"*([*^$|!~]?=)"+L+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+M+"))|)"+L+"*\\]",O=":("+M+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+N+")*)|.*)\\)|)",P=new RegExp(L+"+","g"),Q=new RegExp("^"+L+"+|((?:^|[^\\\\])(?:\\\\.)*)"+L+"+$","g"),R=new RegExp("^"+L+"*,"+L+"*"),S=new RegExp("^"+L+"*([>+~]|"+L+")"+L+"*"),T=new RegExp("="+L+"*([^\\]'\"]*?)"+L+"*\\]","g"),U=new RegExp(O),V=new RegExp("^"+M+"$"),W={ID:new RegExp("^#("+M+")"),CLASS:new RegExp("^\\.("+M+")"),TAG:new RegExp("^("+M+"|[*])"),ATTR:new RegExp("^"+N),PSEUDO:new RegExp("^"+O),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+L+"*(even|odd|(([+-]|)(\\d*)n|)"+L+"*(?:([+-]|)"+L+"*(\\d+)|))"+L+"*\\)|)","i"),bool:new RegExp("^(?:"+K+")$","i"),needsContext:new RegExp("^"+L+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+L+"*((?:-\\d)?\\d*)"+L+"*\\)|)(?=[^-]|$)","i")},X=/^(?:input|select|textarea|button)$/i,Y=/^h\d$/i,Z=/^[^{]+\{\s*\[native \w/,$=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,_=/[+~]/,aa=/'|\\/g,ba=new RegExp("\\\\([\\da-f]{1,6}"+L+"?|("+L+")|.)","ig"),ca=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},da=function(){m()};try{H.apply(E=I.call(v.childNodes),v.childNodes),E[v.childNodes.length].nodeType}catch(ea){H={apply:E.length?function(a,b){G.apply(a,I.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function fa(a,b,d,e){var f,h,j,k,l,o,r,s,w=b&&b.ownerDocument,x=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==x&&9!==x&&11!==x)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==x&&(o=$.exec(a)))if(f=o[1]){if(9===x){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(w&&(j=w.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(o[2])return H.apply(d,b.getElementsByTagName(a)),d;if((f=o[3])&&c.getElementsByClassName&&b.getElementsByClassName)return H.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==x)w=b,s=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(aa,"\\$&"):b.setAttribute("id",k=u),r=g(a),h=r.length,l=V.test(k)?"#"+k:"[id='"+k+"']";while(h--)r[h]=l+" "+qa(r[h]);s=r.join(","),w=_.test(a)&&oa(b.parentNode)||b}if(s)try{return H.apply(d,w.querySelectorAll(s)),d}catch(y){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(Q,"$1"),b,d,e)}function ga(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ha(a){return a[u]=!0,a}function ia(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ja(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function ka(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||C)-(~a.sourceIndex||C);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function la(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function na(a){return ha(function(b){return b=+b,ha(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function oa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=fa.support={},f=fa.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=fa.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ia(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ia(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Z.test(n.getElementsByClassName),c.getById=ia(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}},d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return"undefined"!=typeof b.getElementsByClassName&&p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=Z.test(n.querySelectorAll))&&(ia(function(a){o.appendChild(a).innerHTML="<a id='"+u+"'></a><select id='"+u+"-\r\\' msallowcapture=''><option selected=''></option></select>",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+L+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+L+"*(?:value|"+K+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ia(function(a){var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+L+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Z.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ia(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",O)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Z.test(o.compareDocumentPosition),t=b||Z.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?J(k,a)-J(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?J(k,a)-J(k,b):0;if(e===f)return ka(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?ka(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},fa.matches=function(a,b){return fa(a,null,null,b)},fa.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(T,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return fa(b,n,null,[a]).length>0},fa.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},fa.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&D.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},fa.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},fa.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=fa.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=fa.selectors={cacheLength:50,createPseudo:ha,match:W,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(ba,ca),a[3]=(a[3]||a[4]||a[5]||"").replace(ba,ca),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||fa.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&fa.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return W.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&U.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(ba,ca).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+L+")"+a+"("+L+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=fa.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(P," ")+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||fa.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ha(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=J(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ha(function(a){var b=[],c=[],d=h(a.replace(Q,"$1"));return d[u]?ha(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ha(function(a){return function(b){return fa(a,b).length>0}}),contains:ha(function(a){return a=a.replace(ba,ca),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ha(function(a){return V.test(a||"")||fa.error("unsupported lang: "+a),a=a.replace(ba,ca).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Y.test(a.nodeName)},input:function(a){return X.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:na(function(){return[0]}),last:na(function(a,b){return[b-1]}),eq:na(function(a,b,c){return[0>c?c+b:c]}),even:na(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:na(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:na(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:na(function(a,b,c){for(var d=0>c?c+b:c;++d<b;)a.push(d);return a})}},d.pseudos.nth=d.pseudos.eq;for(b in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})d.pseudos[b]=la(b);for(b in{submit:!0,reset:!0})d.pseudos[b]=ma(b);function pa(){}pa.prototype=d.filters=d.pseudos,d.setFilters=new pa,g=fa.tokenize=function(a,b){var c,e,f,g,h,i,j,k=z[a+" "];if(k)return b?0:k.slice(0);h=a,i=[],j=d.preFilter;while(h){c&&!(e=R.exec(h))||(e&&(h=h.slice(e[0].length)||h),i.push(f=[])),c=!1,(e=S.exec(h))&&(c=e.shift(),f.push({value:c,type:e[0].replace(Q," ")}),h=h.slice(c.length));for(g in d.filter)!(e=W[g].exec(h))||j[g]&&!(e=j[g](e))||(c=e.shift(),f.push({value:c,type:g,matches:e}),h=h.slice(c.length));if(!c)break}return b?h.length:h?fa.error(a):z(a,i).slice(0)};function qa(a){for(var b=0,c=a.length,d="";c>b;b++)d+=a[b].value;return d}function ra(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=x++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j,k=[w,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(j=b[u]||(b[u]={}),i=j[b.uniqueID]||(j[b.uniqueID]={}),(h=i[d])&&h[0]===w&&h[1]===f)return k[2]=h[2];if(i[d]=k,k[2]=a(b,c,g))return!0}}}function sa(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function ta(a,b,c){for(var d=0,e=b.length;e>d;d++)fa(a,b[d],c);return c}function ua(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(c&&!c(f,d,e)||(g.push(f),j&&b.push(h)));return g}function va(a,b,c,d,e,f){return d&&!d[u]&&(d=va(d)),e&&!e[u]&&(e=va(e,f)),ha(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||ta(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:ua(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=ua(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?J(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=ua(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):H.apply(g,r)})}function wa(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=ra(function(a){return a===b},h,!0),l=ra(function(a){return J(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];f>i;i++)if(c=d.relative[a[i].type])m=[ra(sa(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return va(i>1&&sa(m),i>1&&qa(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(Q,"$1"),c,e>i&&wa(a.slice(i,e)),f>e&&wa(a=a.slice(e)),f>e&&qa(a))}m.push(c)}return sa(m)}function xa(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,o,q,r=0,s="0",t=f&&[],u=[],v=j,x=f||e&&d.find.TAG("*",k),y=w+=null==v?1:Math.random()||.1,z=x.length;for(k&&(j=g===n||g||k);s!==z&&null!=(l=x[s]);s++){if(e&&l){o=0,g||l.ownerDocument===n||(m(l),h=!p);while(q=a[o++])if(q(l,g||n,h)){i.push(l);break}k&&(w=y)}c&&((l=!q&&l)&&r--,f&&t.push(l))}if(r+=s,c&&s!==r){o=0;while(q=b[o++])q(t,u,g,h);if(f){if(r>0)while(s--)t[s]||u[s]||(u[s]=F.call(i));u=ua(u)}H.apply(i,u),k&&!f&&u.length>0&&r+b.length>1&&fa.uniqueSort(i)}return k&&(w=y,j=v),t};return c?ha(f):f}return h=fa.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=wa(b[c]),f[u]?d.push(f):e.push(f);f=A(a,xa(e,d)),f.selector=a}return f},i=fa.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(ba,ca),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=W.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(ba,ca),_.test(j[0].type)&&oa(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&qa(j),!a)return H.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,!b||_.test(a)&&oa(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ia(function(a){return 1&a.compareDocumentPosition(n.createElement("div"))}),ia(function(a){return a.innerHTML="<a href='#'></a>","#"===a.firstChild.getAttribute("href")})||ja("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ia(function(a){return a.innerHTML="<input/>",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ja("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),ia(function(a){return null==a.getAttribute("disabled")})||ja(K,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),fa}(a);n.find=t,n.expr=t.selectors,n.expr[":"]=n.expr.pseudos,n.uniqueSort=n.unique=t.uniqueSort,n.text=t.getText,n.isXMLDoc=t.isXML,n.contains=t.contains;var u=function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&n(a).is(c))break;d.push(a)}return d},v=function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c},w=n.expr.match.needsContext,x=/^<([\w-]+)\s*\/?>(?:<\/\1>|)$/,y=/^.[^:#\[\.,]*$/;function z(a,b,c){if(n.isFunction(b))return n.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return n.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(y.test(b))return n.filter(b,a,c);b=n.filter(b,a)}return n.grep(a,function(a){return h.call(b,a)>-1!==c})}n.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?n.find.matchesSelector(d,a)?[d]:[]:n.find.matches(a,n.grep(b,function(a){return 1===a.nodeType}))},n.fn.extend({find:function(a){var b,c=this.length,d=[],e=this;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;c>b;b++)if(n.contains(e[b],this))return!0}));for(b=0;c>b;b++)n.find(a,e[b],d);return d=this.pushStack(c>1?n.unique(d):d),d.selector=this.selector?this.selector+" "+a:a,d},filter:function(a){return this.pushStack(z(this,a||[],!1))},not:function(a){return this.pushStack(z(this,a||[],!0))},is:function(a){return!!z(this,"string"==typeof a&&w.test(a)?n(a):a||[],!1).length}});var A,B=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,C=n.fn.init=function(a,b,c){var e,f;if(!a)return this;if(c=c||A,"string"==typeof a){if(e="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:B.exec(a),!e||!e[1]&&b)return!b||b.jquery?(b||c).find(a):this.constructor(b).find(a);if(e[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(e[1],b&&b.nodeType?b.ownerDocument||b:d,!0)),x.test(e[1])&&n.isPlainObject(b))for(e in b)n.isFunction(this[e])?this[e](b[e]):this.attr(e,b[e]);return this}return f=d.getElementById(e[2]),f&&f.parentNode&&(this.length=1,this[0]=f),this.context=d,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?void 0!==c.ready?c.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))};C.prototype=n.fn,A=n(d);var D=/^(?:parents|prev(?:Until|All))/,E={children:!0,contents:!0,next:!0,prev:!0};n.fn.extend({has:function(a){var b=n(a,this),c=b.length;return this.filter(function(){for(var a=0;c>a;a++)if(n.contains(this,b[a]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=w.test(a)||"string"!=typeof a?n(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&n.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?n.uniqueSort(f):f)},index:function(a){return a?"string"==typeof a?h.call(n(a),this[0]):h.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(n.uniqueSort(n.merge(this.get(),n(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function F(a,b){while((a=a[b])&&1!==a.nodeType);return a}n.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return u(a,"parentNode")},parentsUntil:function(a,b,c){return u(a,"parentNode",c)},next:function(a){return F(a,"nextSibling")},prev:function(a){return F(a,"previousSibling")},nextAll:function(a){return u(a,"nextSibling")},prevAll:function(a){return u(a,"previousSibling")},nextUntil:function(a,b,c){return u(a,"nextSibling",c)},prevUntil:function(a,b,c){return u(a,"previousSibling",c)},siblings:function(a){return v((a.parentNode||{}).firstChild,a)},children:function(a){return v(a.firstChild)},contents:function(a){return a.contentDocument||n.merge([],a.childNodes)}},function(a,b){n.fn[a]=function(c,d){var e=n.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=n.filter(d,e)),this.length>1&&(E[a]||n.uniqueSort(e),D.test(a)&&e.reverse()),this.pushStack(e)}});var G=/\S+/g;function H(a){var b={};return n.each(a.match(G)||[],function(a,c){b[c]=!0}),b}n.Callbacks=function(a){a="string"==typeof a?H(a):n.extend({},a);var b,c,d,e,f=[],g=[],h=-1,i=function(){for(e=a.once,d=b=!0;g.length;h=-1){c=g.shift();while(++h<f.length)f[h].apply(c[0],c[1])===!1&&a.stopOnFalse&&(h=f.length,c=!1)}a.memory||(c=!1),b=!1,e&&(f=c?[]:"")},j={add:function(){return f&&(c&&!b&&(h=f.length-1,g.push(c)),function d(b){n.each(b,function(b,c){n.isFunction(c)?a.unique&&j.has(c)||f.push(c):c&&c.length&&"string"!==n.type(c)&&d(c)})}(arguments),c&&!b&&i()),this},remove:function(){return n.each(arguments,function(a,b){var c;while((c=n.inArray(b,f,c))>-1)f.splice(c,1),h>=c&&h--}),this},has:function(a){return a?n.inArray(a,f)>-1:f.length>0},empty:function(){return f&&(f=[]),this},disable:function(){return e=g=[],f=c="",this},disabled:function(){return!f},lock:function(){return e=g=[],c||(f=c=""),this},locked:function(){return!!e},fireWith:function(a,c){return e||(c=c||[],c=[a,c.slice?c.slice():c],g.push(c),b||i()),this},fire:function(){return j.fireWith(this,arguments),this},fired:function(){return!!d}};return j},n.extend({Deferred:function(a){var b=[["resolve","done",n.Callbacks("once memory"),"resolved"],["reject","fail",n.Callbacks("once memory"),"rejected"],["notify","progress",n.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().progress(c.notify).done(c.resolve).fail(c.reject):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?n.extend(a,d):d}},e={};return d.pipe=d.then,n.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=e.call(arguments),d=c.length,f=1!==d||a&&n.isFunction(a.promise)?d:0,g=1===f?a:n.Deferred(),h=function(a,b,c){return function(d){b[a]=this,c[a]=arguments.length>1?e.call(arguments):d,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(d>1)for(i=new Array(d),j=new Array(d),k=new Array(d);d>b;b++)c[b]&&n.isFunction(c[b].promise)?c[b].promise().progress(h(b,j,i)).done(h(b,k,c)).fail(g.reject):--f;return f||g.resolveWith(k,c),g.promise()}});var I;n.fn.ready=function(a){return n.ready.promise().done(a),this},n.extend({isReady:!1,readyWait:1,holdReady:function(a){a?n.readyWait++:n.ready(!0)},ready:function(a){(a===!0?--n.readyWait:n.isReady)||(n.isReady=!0,a!==!0&&--n.readyWait>0||(I.resolveWith(d,[n]),n.fn.triggerHandler&&(n(d).triggerHandler("ready"),n(d).off("ready"))))}});function J(){d.removeEventListener("DOMContentLoaded",J),a.removeEventListener("load",J),n.ready()}n.ready.promise=function(b){return I||(I=n.Deferred(),"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll?a.setTimeout(n.ready):(d.addEventListener("DOMContentLoaded",J),a.addEventListener("load",J))),I.promise(b)},n.ready.promise();var K=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===n.type(c)){e=!0;for(h in c)K(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,n.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(n(a),c)})),b))for(;i>h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},L=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function M(){this.expando=n.expando+M.uid++}M.uid=1,M.prototype={register:function(a,b){var c=b||{};return a.nodeType?a[this.expando]=c:Object.defineProperty(a,this.expando,{value:c,writable:!0,configurable:!0}),a[this.expando]},cache:function(a){if(!L(a))return{};var b=a[this.expando];return b||(b={},L(a)&&(a.nodeType?a[this.expando]=b:Object.defineProperty(a,this.expando,{value:b,configurable:!0}))),b},set:function(a,b,c){var d,e=this.cache(a);if("string"==typeof b)e[b]=c;else for(d in b)e[d]=b[d];return e},get:function(a,b){return void 0===b?this.cache(a):a[this.expando]&&a[this.expando][b]},access:function(a,b,c){var d;return void 0===b||b&&"string"==typeof b&&void 0===c?(d=this.get(a,b),void 0!==d?d:this.get(a,n.camelCase(b))):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d,e,f=a[this.expando];if(void 0!==f){if(void 0===b)this.register(a);else{n.isArray(b)?d=b.concat(b.map(n.camelCase)):(e=n.camelCase(b),b in f?d=[b,e]:(d=e,d=d in f?[d]:d.match(G)||[])),c=d.length;while(c--)delete f[d[c]]}(void 0===b||n.isEmptyObject(f))&&(a.nodeType?a[this.expando]=void 0:delete a[this.expando])}},hasData:function(a){var b=a[this.expando];return void 0!==b&&!n.isEmptyObject(b)}};var N=new M,O=new M,P=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,Q=/[A-Z]/g;function R(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(Q,"-$&").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:P.test(c)?n.parseJSON(c):c;
 }catch(e){}O.set(a,b,c)}else c=void 0;return c}n.extend({hasData:function(a){return O.hasData(a)||N.hasData(a)},data:function(a,b,c){return O.access(a,b,c)},removeData:function(a,b){O.remove(a,b)},_data:function(a,b,c){return N.access(a,b,c)},_removeData:function(a,b){N.remove(a,b)}}),n.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=O.get(f),1===f.nodeType&&!N.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=n.camelCase(d.slice(5)),R(f,d,e[d])));N.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){O.set(this,a)}):K(this,function(b){var c,d;if(f&&void 0===b){if(c=O.get(f,a)||O.get(f,a.replace(Q,"-$&").toLowerCase()),void 0!==c)return c;if(d=n.camelCase(a),c=O.get(f,d),void 0!==c)return c;if(c=R(f,d,void 0),void 0!==c)return c}else d=n.camelCase(a),this.each(function(){var c=O.get(this,d);O.set(this,d,b),a.indexOf("-")>-1&&void 0!==c&&O.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){O.remove(this,a)})}}),n.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=N.get(a,b),c&&(!d||n.isArray(c)?d=N.access(a,b,n.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=n.queue(a,b),d=c.length,e=c.shift(),f=n._queueHooks(a,b),g=function(){n.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return N.get(a,c)||N.access(a,c,{empty:n.Callbacks("once memory").add(function(){N.remove(a,[b+"queue",c])})})}}),n.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?n.queue(this[0],a):void 0===b?this:this.each(function(){var c=n.queue(this,a,b);n._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&n.dequeue(this,a)})},dequeue:function(a){return this.each(function(){n.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=n.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=N.get(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var S=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,T=new RegExp("^(?:([+-])=|)("+S+")([a-z%]*)$","i"),U=["Top","Right","Bottom","Left"],V=function(a,b){return a=b||a,"none"===n.css(a,"display")||!n.contains(a.ownerDocument,a)};function W(a,b,c,d){var e,f=1,g=20,h=d?function(){return d.cur()}:function(){return n.css(a,b,"")},i=h(),j=c&&c[3]||(n.cssNumber[b]?"":"px"),k=(n.cssNumber[b]||"px"!==j&&+i)&&T.exec(n.css(a,b));if(k&&k[3]!==j){j=j||k[3],c=c||[],k=+i||1;do f=f||".5",k/=f,n.style(a,b,k+j);while(f!==(f=h()/i)&&1!==f&&--g)}return c&&(k=+k||+i||0,e=c[1]?k+(c[1]+1)*c[2]:+c[2],d&&(d.unit=j,d.start=k,d.end=e)),e}var X=/^(?:checkbox|radio)$/i,Y=/<([\w:-]+)/,Z=/^$|\/(?:java|ecma)script/i,$={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};$.optgroup=$.option,$.tbody=$.tfoot=$.colgroup=$.caption=$.thead,$.th=$.td;function _(a,b){var c="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):[];return void 0===b||b&&n.nodeName(a,b)?n.merge([a],c):c}function aa(a,b){for(var c=0,d=a.length;d>c;c++)N.set(a[c],"globalEval",!b||N.get(b[c],"globalEval"))}var ba=/<|&#?\w+;/;function ca(a,b,c,d,e){for(var f,g,h,i,j,k,l=b.createDocumentFragment(),m=[],o=0,p=a.length;p>o;o++)if(f=a[o],f||0===f)if("object"===n.type(f))n.merge(m,f.nodeType?[f]:f);else if(ba.test(f)){g=g||l.appendChild(b.createElement("div")),h=(Y.exec(f)||["",""])[1].toLowerCase(),i=$[h]||$._default,g.innerHTML=i[1]+n.htmlPrefilter(f)+i[2],k=i[0];while(k--)g=g.lastChild;n.merge(m,g.childNodes),g=l.firstChild,g.textContent=""}else m.push(b.createTextNode(f));l.textContent="",o=0;while(f=m[o++])if(d&&n.inArray(f,d)>-1)e&&e.push(f);else if(j=n.contains(f.ownerDocument,f),g=_(l.appendChild(f),"script"),j&&aa(g),c){k=0;while(f=g[k++])Z.test(f.type||"")&&c.push(f)}return l}!function(){var a=d.createDocumentFragment(),b=a.appendChild(d.createElement("div")),c=d.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),l.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="<textarea>x</textarea>",l.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var da=/^key/,ea=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,fa=/^([^.]*)(?:\.(.+)|)/;function ga(){return!0}function ha(){return!1}function ia(){try{return d.activeElement}catch(a){}}function ja(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)ja(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=ha;else if(!e)return a;return 1===f&&(g=e,e=function(a){return n().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=n.guid++)),a.each(function(){n.event.add(this,b,e,d,c)})}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=N.get(a);if(r){c.handler&&(f=c,c=f.handler,e=f.selector),c.guid||(c.guid=n.guid++),(i=r.events)||(i=r.events={}),(g=r.handle)||(g=r.handle=function(b){return"undefined"!=typeof n&&n.event.triggered!==b.type?n.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(G)||[""],j=b.length;while(j--)h=fa.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o&&(l=n.event.special[o]||{},o=(e?l.delegateType:l.bindType)||o,l=n.event.special[o]||{},k=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},f),(m=i[o])||(m=i[o]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,p,g)!==!1||a.addEventListener&&a.addEventListener(o,g)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),n.event.global[o]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=N.hasData(a)&&N.get(a);if(r&&(i=r.events)){b=(b||"").match(G)||[""],j=b.length;while(j--)if(h=fa.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=i[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&q!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete i[o])}else for(o in i)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(i)&&N.remove(a,"handle events")}},dispatch:function(a){a=n.event.fix(a);var b,c,d,f,g,h=[],i=e.call(arguments),j=(N.get(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())a.rnamespace&&!a.rnamespace.test(g.namespace)||(a.handleObj=g,a.data=g.data,d=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==d&&(a.result=d)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&("click"!==a.type||isNaN(a.button)||a.button<1))for(;i!==this;i=i.parentNode||this)if(1===i.nodeType&&(i.disabled!==!0||"click"!==a.type)){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>-1:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h<b.length&&g.push({elem:this,handlers:b.slice(h)}),g},props:"altKey bubbles cancelable ctrlKey currentTarget detail eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){return null==a.which&&(a.which=null!=b.charCode?b.charCode:b.keyCode),a}},mouseHooks:{props:"button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,b){var c,e,f,g=b.button;return null==a.pageX&&null!=b.clientX&&(c=a.target.ownerDocument||d,e=c.documentElement,f=c.body,a.pageX=b.clientX+(e&&e.scrollLeft||f&&f.scrollLeft||0)-(e&&e.clientLeft||f&&f.clientLeft||0),a.pageY=b.clientY+(e&&e.scrollTop||f&&f.scrollTop||0)-(e&&e.clientTop||f&&f.clientTop||0)),a.which||void 0===g||(a.which=1&g?1:2&g?3:4&g?2:0),a}},fix:function(a){if(a[n.expando])return a;var b,c,e,f=a.type,g=a,h=this.fixHooks[f];h||(this.fixHooks[f]=h=ea.test(f)?this.mouseHooks:da.test(f)?this.keyHooks:{}),e=h.props?this.props.concat(h.props):this.props,a=new n.Event(g),b=e.length;while(b--)c=e[b],a[c]=g[c];return a.target||(a.target=d),3===a.target.nodeType&&(a.target=a.target.parentNode),h.filter?h.filter(a,g):a},special:{load:{noBubble:!0},focus:{trigger:function(){return this!==ia()&&this.focus?(this.focus(),!1):void 0},delegateType:"focusin"},blur:{trigger:function(){return this===ia()&&this.blur?(this.blur(),!1):void 0},delegateType:"focusout"},click:{trigger:function(){return"checkbox"===this.type&&this.click&&n.nodeName(this,"input")?(this.click(),!1):void 0},_default:function(a){return n.nodeName(a.target,"a")}},beforeunload:{postDispatch:function(a){void 0!==a.result&&a.originalEvent&&(a.originalEvent.returnValue=a.result)}}}},n.removeEvent=function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c)},n.Event=function(a,b){return this instanceof n.Event?(a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||void 0===a.defaultPrevented&&a.returnValue===!1?ga:ha):this.type=a,b&&n.extend(this,b),this.timeStamp=a&&a.timeStamp||n.now(),void(this[n.expando]=!0)):new n.Event(a,b)},n.Event.prototype={constructor:n.Event,isDefaultPrevented:ha,isPropagationStopped:ha,isImmediatePropagationStopped:ha,isSimulated:!1,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=ga,a&&!this.isSimulated&&a.preventDefault()},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=ga,a&&!this.isSimulated&&a.stopPropagation()},stopImmediatePropagation:function(){var a=this.originalEvent;this.isImmediatePropagationStopped=ga,a&&!this.isSimulated&&a.stopImmediatePropagation(),this.stopPropagation()}},n.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(a,b){n.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj;return e&&(e===d||n.contains(d,e))||(a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b),c}}}),n.fn.extend({on:function(a,b,c,d){return ja(this,a,b,c,d)},one:function(a,b,c,d){return ja(this,a,b,c,d,1)},off:function(a,b,c){var d,e;if(a&&a.preventDefault&&a.handleObj)return d=a.handleObj,n(a.delegateTarget).off(d.namespace?d.origType+"."+d.namespace:d.origType,d.selector,d.handler),this;if("object"==typeof a){for(e in a)this.off(e,b,a[e]);return this}return b!==!1&&"function"!=typeof b||(c=b,b=void 0),c===!1&&(c=ha),this.each(function(){n.event.remove(this,a,c,b)})}});var ka=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:-]+)[^>]*)\/>/gi,la=/<script|<style|<link/i,ma=/checked\s*(?:[^=]|=\s*.checked.)/i,na=/^true\/(.*)/,oa=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function pa(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function qa(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function ra(a){var b=na.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function sa(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(N.hasData(a)&&(f=N.access(a),g=N.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)n.event.add(b,e,j[e][c])}O.hasData(a)&&(h=O.access(a),i=n.extend({},h),O.set(b,i))}}function ta(a,b){var c=b.nodeName.toLowerCase();"input"===c&&X.test(a.type)?b.checked=a.checked:"input"!==c&&"textarea"!==c||(b.defaultValue=a.defaultValue)}function ua(a,b,c,d){b=f.apply([],b);var e,g,h,i,j,k,m=0,o=a.length,p=o-1,q=b[0],r=n.isFunction(q);if(r||o>1&&"string"==typeof q&&!l.checkClone&&ma.test(q))return a.each(function(e){var f=a.eq(e);r&&(b[0]=q.call(this,e,f.html())),ua(f,b,c,d)});if(o&&(e=ca(b,a[0].ownerDocument,!1,a,d),g=e.firstChild,1===e.childNodes.length&&(e=g),g||d)){for(h=n.map(_(e,"script"),qa),i=h.length;o>m;m++)j=e,m!==p&&(j=n.clone(j,!0,!0),i&&n.merge(h,_(j,"script"))),c.call(a[m],j,m);if(i)for(k=h[h.length-1].ownerDocument,n.map(h,ra),m=0;i>m;m++)j=h[m],Z.test(j.type||"")&&!N.access(j,"globalEval")&&n.contains(k,j)&&(j.src?n._evalUrl&&n._evalUrl(j.src):n.globalEval(j.textContent.replace(oa,"")))}return a}function va(a,b,c){for(var d,e=b?n.filter(b,a):a,f=0;null!=(d=e[f]);f++)c||1!==d.nodeType||n.cleanData(_(d)),d.parentNode&&(c&&n.contains(d.ownerDocument,d)&&aa(_(d,"script")),d.parentNode.removeChild(d));return a}n.extend({htmlPrefilter:function(a){return a.replace(ka,"<$1></$2>")},clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=n.contains(a.ownerDocument,a);if(!(l.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(g=_(h),f=_(a),d=0,e=f.length;e>d;d++)ta(f[d],g[d]);if(b)if(c)for(f=f||_(a),g=g||_(h),d=0,e=f.length;e>d;d++)sa(f[d],g[d]);else sa(a,h);return g=_(h,"script"),g.length>0&&aa(g,!i&&_(a,"script")),h},cleanData:function(a){for(var b,c,d,e=n.event.special,f=0;void 0!==(c=a[f]);f++)if(L(c)){if(b=c[N.expando]){if(b.events)for(d in b.events)e[d]?n.event.remove(c,d):n.removeEvent(c,d,b.handle);c[N.expando]=void 0}c[O.expando]&&(c[O.expando]=void 0)}}}),n.fn.extend({domManip:ua,detach:function(a){return va(this,a,!0)},remove:function(a){return va(this,a)},text:function(a){return K(this,function(a){return void 0===a?n.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=a)})},null,a,arguments.length)},append:function(){return ua(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=pa(this,a);b.appendChild(a)}})},prepend:function(){return ua(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=pa(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return ua(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return ua(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(n.cleanData(_(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return K(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!la.test(a)&&!$[(Y.exec(a)||["",""])[1].toLowerCase()]){a=n.htmlPrefilter(a);try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(_(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=[];return ua(this,arguments,function(b){var c=this.parentNode;n.inArray(this,a)<0&&(n.cleanData(_(this)),c&&c.replaceChild(b,this))},a)}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=[],e=n(a),f=e.length-1,h=0;f>=h;h++)c=h===f?this:this.clone(!0),n(e[h])[b](c),g.apply(d,c.get());return this.pushStack(d)}});var wa,xa={HTML:"block",BODY:"block"};function ya(a,b){var c=n(b.createElement(a)).appendTo(b.body),d=n.css(c[0],"display");return c.detach(),d}function za(a){var b=d,c=xa[a];return c||(c=ya(a,b),"none"!==c&&c||(wa=(wa||n("<iframe frameborder='0' width='0' height='0'/>")).appendTo(b.documentElement),b=wa[0].contentDocument,b.write(),b.close(),c=ya(a,b),wa.detach()),xa[a]=c),c}var Aa=/^margin/,Ba=new RegExp("^("+S+")(?!px)[a-z%]+$","i"),Ca=function(b){var c=b.ownerDocument.defaultView;return c&&c.opener||(c=a),c.getComputedStyle(b)},Da=function(a,b,c,d){var e,f,g={};for(f in b)g[f]=a.style[f],a.style[f]=b[f];e=c.apply(a,d||[]);for(f in b)a.style[f]=g[f];return e},Ea=d.documentElement;!function(){var b,c,e,f,g=d.createElement("div"),h=d.createElement("div");if(h.style){h.style.backgroundClip="content-box",h.cloneNode(!0).style.backgroundClip="",l.clearCloneStyle="content-box"===h.style.backgroundClip,g.style.cssText="border:0;width:8px;height:0;top:0;left:-9999px;padding:0;margin-top:1px;position:absolute",g.appendChild(h);function i(){h.style.cssText="-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;margin:auto;border:1px;padding:1px;top:1%;width:50%",h.innerHTML="",Ea.appendChild(g);var d=a.getComputedStyle(h);b="1%"!==d.top,f="2px"===d.marginLeft,c="4px"===d.width,h.style.marginRight="50%",e="4px"===d.marginRight,Ea.removeChild(g)}n.extend(l,{pixelPosition:function(){return i(),b},boxSizingReliable:function(){return null==c&&i(),c},pixelMarginRight:function(){return null==c&&i(),e},reliableMarginLeft:function(){return null==c&&i(),f},reliableMarginRight:function(){var b,c=h.appendChild(d.createElement("div"));return c.style.cssText=h.style.cssText="-webkit-box-sizing:content-box;box-sizing:content-box;display:block;margin:0;border:0;padding:0",c.style.marginRight=c.style.width="0",h.style.width="1px",Ea.appendChild(g),b=!parseFloat(a.getComputedStyle(c).marginRight),Ea.removeChild(g),h.removeChild(c),b}})}}();function Fa(a,b,c){var d,e,f,g,h=a.style;return c=c||Ca(a),g=c?c.getPropertyValue(b)||c[b]:void 0,""!==g&&void 0!==g||n.contains(a.ownerDocument,a)||(g=n.style(a,b)),c&&!l.pixelMarginRight()&&Ba.test(g)&&Aa.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f),void 0!==g?g+"":g}function Ga(a,b){return{get:function(){return a()?void delete this.get:(this.get=b).apply(this,arguments)}}}var Ha=/^(none|table(?!-c[ea]).+)/,Ia={position:"absolute",visibility:"hidden",display:"block"},Ja={letterSpacing:"0",fontWeight:"400"},Ka=["Webkit","O","Moz","ms"],La=d.createElement("div").style;function Ma(a){if(a in La)return a;var b=a[0].toUpperCase()+a.slice(1),c=Ka.length;while(c--)if(a=Ka[c]+b,a in La)return a}function Na(a,b,c){var d=T.exec(b);return d?Math.max(0,d[2]-(c||0))+(d[3]||"px"):b}function Oa(a,b,c,d,e){for(var f=c===(d?"border":"content")?4:"width"===b?1:0,g=0;4>f;f+=2)"margin"===c&&(g+=n.css(a,c+U[f],!0,e)),d?("content"===c&&(g-=n.css(a,"padding"+U[f],!0,e)),"margin"!==c&&(g-=n.css(a,"border"+U[f]+"Width",!0,e))):(g+=n.css(a,"padding"+U[f],!0,e),"padding"!==c&&(g+=n.css(a,"border"+U[f]+"Width",!0,e)));return g}function Pa(a,b,c){var d=!0,e="width"===b?a.offsetWidth:a.offsetHeight,f=Ca(a),g="border-box"===n.css(a,"boxSizing",!1,f);if(0>=e||null==e){if(e=Fa(a,b,f),(0>e||null==e)&&(e=a.style[b]),Ba.test(e))return e;d=g&&(l.boxSizingReliable()||e===a.style[b]),e=parseFloat(e)||0}return e+Oa(a,b,c||(g?"border":"content"),d,f)+"px"}function Qa(a,b){for(var c,d,e,f=[],g=0,h=a.length;h>g;g++)d=a[g],d.style&&(f[g]=N.get(d,"olddisplay"),c=d.style.display,b?(f[g]||"none"!==c||(d.style.display=""),""===d.style.display&&V(d)&&(f[g]=N.access(d,"olddisplay",za(d.nodeName)))):(e=V(d),"none"===c&&e||N.set(d,"olddisplay",e?c:n.css(d,"display"))));for(g=0;h>g;g++)d=a[g],d.style&&(b&&"none"!==d.style.display&&""!==d.style.display||(d.style.display=b?f[g]||"":"none"));return a}n.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=Fa(a,"opacity");return""===c?"1":c}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=n.camelCase(b),i=a.style;return b=n.cssProps[h]||(n.cssProps[h]=Ma(h)||h),g=n.cssHooks[b]||n.cssHooks[h],void 0===c?g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:i[b]:(f=typeof c,"string"===f&&(e=T.exec(c))&&e[1]&&(c=W(a,b,e),f="number"),null!=c&&c===c&&("number"===f&&(c+=e&&e[3]||(n.cssNumber[h]?"":"px")),l.clearCloneStyle||""!==c||0!==b.indexOf("background")||(i[b]="inherit"),g&&"set"in g&&void 0===(c=g.set(a,c,d))||(i[b]=c)),void 0)}},css:function(a,b,c,d){var e,f,g,h=n.camelCase(b);return b=n.cssProps[h]||(n.cssProps[h]=Ma(h)||h),g=n.cssHooks[b]||n.cssHooks[h],g&&"get"in g&&(e=g.get(a,!0,c)),void 0===e&&(e=Fa(a,b,d)),"normal"===e&&b in Ja&&(e=Ja[b]),""===c||c?(f=parseFloat(e),c===!0||isFinite(f)?f||0:e):e}}),n.each(["height","width"],function(a,b){n.cssHooks[b]={get:function(a,c,d){return c?Ha.test(n.css(a,"display"))&&0===a.offsetWidth?Da(a,Ia,function(){return Pa(a,b,d)}):Pa(a,b,d):void 0},set:function(a,c,d){var e,f=d&&Ca(a),g=d&&Oa(a,b,d,"border-box"===n.css(a,"boxSizing",!1,f),f);return g&&(e=T.exec(c))&&"px"!==(e[3]||"px")&&(a.style[b]=c,c=n.css(a,b)),Na(a,c,g)}}}),n.cssHooks.marginLeft=Ga(l.reliableMarginLeft,function(a,b){return b?(parseFloat(Fa(a,"marginLeft"))||a.getBoundingClientRect().left-Da(a,{marginLeft:0},function(){return a.getBoundingClientRect().left}))+"px":void 0}),n.cssHooks.marginRight=Ga(l.reliableMarginRight,function(a,b){return b?Da(a,{display:"inline-block"},Fa,[a,"marginRight"]):void 0}),n.each({margin:"",padding:"",border:"Width"},function(a,b){n.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];4>d;d++)e[a+U[d]+b]=f[d]||f[d-2]||f[0];return e}},Aa.test(a)||(n.cssHooks[a+b].set=Na)}),n.fn.extend({css:function(a,b){return K(this,function(a,b,c){var d,e,f={},g=0;if(n.isArray(b)){for(d=Ca(a),e=b.length;e>g;g++)f[b[g]]=n.css(a,b[g],!1,d);return f}return void 0!==c?n.style(a,b,c):n.css(a,b)},a,b,arguments.length>1)},show:function(){return Qa(this,!0)},hide:function(){return Qa(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){V(this)?n(this).show():n(this).hide()})}});function Ra(a,b,c,d,e){return new Ra.prototype.init(a,b,c,d,e)}n.Tween=Ra,Ra.prototype={constructor:Ra,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||n.easing._default,this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(n.cssNumber[c]?"":"px")},cur:function(){var a=Ra.propHooks[this.prop];return a&&a.get?a.get(this):Ra.propHooks._default.get(this)},run:function(a){var b,c=Ra.propHooks[this.prop];return this.options.duration?this.pos=b=n.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):this.pos=b=a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):Ra.propHooks._default.set(this),this}},Ra.prototype.init.prototype=Ra.prototype,Ra.propHooks={_default:{get:function(a){var b;return 1!==a.elem.nodeType||null!=a.elem[a.prop]&&null==a.elem.style[a.prop]?a.elem[a.prop]:(b=n.css(a.elem,a.prop,""),b&&"auto"!==b?b:0)},set:function(a){n.fx.step[a.prop]?n.fx.step[a.prop](a):1!==a.elem.nodeType||null==a.elem.style[n.cssProps[a.prop]]&&!n.cssHooks[a.prop]?a.elem[a.prop]=a.now:n.style(a.elem,a.prop,a.now+a.unit)}}},Ra.propHooks.scrollTop=Ra.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},n.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2},_default:"swing"},n.fx=Ra.prototype.init,n.fx.step={};var Sa,Ta,Ua=/^(?:toggle|show|hide)$/,Va=/queueHooks$/;function Wa(){return a.setTimeout(function(){Sa=void 0}),Sa=n.now()}function Xa(a,b){var c,d=0,e={height:a};for(b=b?1:0;4>d;d+=2-b)c=U[d],e["margin"+c]=e["padding"+c]=a;return b&&(e.opacity=e.width=a),e}function Ya(a,b,c){for(var d,e=(_a.tweeners[b]||[]).concat(_a.tweeners["*"]),f=0,g=e.length;g>f;f++)if(d=e[f].call(c,b,a))return d}function Za(a,b,c){var d,e,f,g,h,i,j,k,l=this,m={},o=a.style,p=a.nodeType&&V(a),q=N.get(a,"fxshow");c.queue||(h=n._queueHooks(a,"fx"),null==h.unqueued&&(h.unqueued=0,i=h.empty.fire,h.empty.fire=function(){h.unqueued||i()}),h.unqueued++,l.always(function(){l.always(function(){h.unqueued--,n.queue(a,"fx").length||h.empty.fire()})})),1===a.nodeType&&("height"in b||"width"in b)&&(c.overflow=[o.overflow,o.overflowX,o.overflowY],j=n.css(a,"display"),k="none"===j?N.get(a,"olddisplay")||za(a.nodeName):j,"inline"===k&&"none"===n.css(a,"float")&&(o.display="inline-block")),c.overflow&&(o.overflow="hidden",l.always(function(){o.overflow=c.overflow[0],o.overflowX=c.overflow[1],o.overflowY=c.overflow[2]}));for(d in b)if(e=b[d],Ua.exec(e)){if(delete b[d],f=f||"toggle"===e,e===(p?"hide":"show")){if("show"!==e||!q||void 0===q[d])continue;p=!0}m[d]=q&&q[d]||n.style(a,d)}else j=void 0;if(n.isEmptyObject(m))"inline"===("none"===j?za(a.nodeName):j)&&(o.display=j);else{q?"hidden"in q&&(p=q.hidden):q=N.access(a,"fxshow",{}),f&&(q.hidden=!p),p?n(a).show():l.done(function(){n(a).hide()}),l.done(function(){var b;N.remove(a,"fxshow");for(b in m)n.style(a,b,m[b])});for(d in m)g=Ya(p?q[d]:0,d,l),d in q||(q[d]=g.start,p&&(g.end=g.start,g.start="width"===d||"height"===d?1:0))}}function $a(a,b){var c,d,e,f,g;for(c in a)if(d=n.camelCase(c),e=b[d],f=a[c],n.isArray(f)&&(e=f[1],f=a[c]=f[0]),c!==d&&(a[d]=f,delete a[c]),g=n.cssHooks[d],g&&"expand"in g){f=g.expand(f),delete a[d];for(c in f)c in a||(a[c]=f[c],b[c]=e)}else b[d]=e}function _a(a,b,c){var d,e,f=0,g=_a.prefilters.length,h=n.Deferred().always(function(){delete i.elem}),i=function(){if(e)return!1;for(var b=Sa||Wa(),c=Math.max(0,j.startTime+j.duration-b),d=c/j.duration||0,f=1-d,g=0,i=j.tweens.length;i>g;g++)j.tweens[g].run(f);return h.notifyWith(a,[j,f,c]),1>f&&i?c:(h.resolveWith(a,[j]),!1)},j=h.promise({elem:a,props:n.extend({},b),opts:n.extend(!0,{specialEasing:{},easing:n.easing._default},c),originalProperties:b,originalOptions:c,startTime:Sa||Wa(),duration:c.duration,tweens:[],createTween:function(b,c){var d=n.Tween(a,j.opts,b,c,j.opts.specialEasing[b]||j.opts.easing);return j.tweens.push(d),d},stop:function(b){var c=0,d=b?j.tweens.length:0;if(e)return this;for(e=!0;d>c;c++)j.tweens[c].run(1);return b?(h.notifyWith(a,[j,1,0]),h.resolveWith(a,[j,b])):h.rejectWith(a,[j,b]),this}}),k=j.props;for($a(k,j.opts.specialEasing);g>f;f++)if(d=_a.prefilters[f].call(j,a,k,j.opts))return n.isFunction(d.stop)&&(n._queueHooks(j.elem,j.opts.queue).stop=n.proxy(d.stop,d)),d;return n.map(k,Ya,j),n.isFunction(j.opts.start)&&j.opts.start.call(a,j),n.fx.timer(n.extend(i,{elem:a,anim:j,queue:j.opts.queue})),j.progress(j.opts.progress).done(j.opts.done,j.opts.complete).fail(j.opts.fail).always(j.opts.always)}n.Animation=n.extend(_a,{tweeners:{"*":[function(a,b){var c=this.createTween(a,b);return W(c.elem,a,T.exec(b),c),c}]},tweener:function(a,b){n.isFunction(a)?(b=a,a=["*"]):a=a.match(G);for(var c,d=0,e=a.length;e>d;d++)c=a[d],_a.tweeners[c]=_a.tweeners[c]||[],_a.tweeners[c].unshift(b)},prefilters:[Za],prefilter:function(a,b){b?_a.prefilters.unshift(a):_a.prefilters.push(a)}}),n.speed=function(a,b,c){var d=a&&"object"==typeof a?n.extend({},a):{complete:c||!c&&b||n.isFunction(a)&&a,duration:a,easing:c&&b||b&&!n.isFunction(b)&&b};return d.duration=n.fx.off?0:"number"==typeof d.duration?d.duration:d.duration in n.fx.speeds?n.fx.speeds[d.duration]:n.fx.speeds._default,null!=d.queue&&d.queue!==!0||(d.queue="fx"),d.old=d.complete,d.complete=function(){n.isFunction(d.old)&&d.old.call(this),d.queue&&n.dequeue(this,d.queue)},d},n.fn.extend({fadeTo:function(a,b,c,d){return this.filter(V).css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=n.isEmptyObject(a),f=n.speed(b,c,d),g=function(){var b=_a(this,n.extend({},a),f);(e||N.get(this,"finish"))&&b.stop(!0)};return g.finish=g,e||f.queue===!1?this.each(g):this.queue(f.queue,g)},stop:function(a,b,c){var d=function(a){var b=a.stop;delete a.stop,b(c)};return"string"!=typeof a&&(c=b,b=a,a=void 0),b&&a!==!1&&this.queue(a||"fx",[]),this.each(function(){var b=!0,e=null!=a&&a+"queueHooks",f=n.timers,g=N.get(this);if(e)g[e]&&g[e].stop&&d(g[e]);else for(e in g)g[e]&&g[e].stop&&Va.test(e)&&d(g[e]);for(e=f.length;e--;)f[e].elem!==this||null!=a&&f[e].queue!==a||(f[e].anim.stop(c),b=!1,f.splice(e,1));!b&&c||n.dequeue(this,a)})},finish:function(a){return a!==!1&&(a=a||"fx"),this.each(function(){var b,c=N.get(this),d=c[a+"queue"],e=c[a+"queueHooks"],f=n.timers,g=d?d.length:0;for(c.finish=!0,n.queue(this,a,[]),e&&e.stop&&e.stop.call(this,!0),b=f.length;b--;)f[b].elem===this&&f[b].queue===a&&(f[b].anim.stop(!0),f.splice(b,1));for(b=0;g>b;b++)d[b]&&d[b].finish&&d[b].finish.call(this);delete c.finish})}}),n.each(["toggle","show","hide"],function(a,b){var c=n.fn[b];n.fn[b]=function(a,d,e){return null==a||"boolean"==typeof a?c.apply(this,arguments):this.animate(Xa(b,!0),a,d,e)}}),n.each({slideDown:Xa("show"),slideUp:Xa("hide"),slideToggle:Xa("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){n.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),n.timers=[],n.fx.tick=function(){var a,b=0,c=n.timers;for(Sa=n.now();b<c.length;b++)a=c[b],a()||c[b]!==a||c.splice(b--,1);c.length||n.fx.stop(),Sa=void 0},n.fx.timer=function(a){n.timers.push(a),a()?n.fx.start():n.timers.pop()},n.fx.interval=13,n.fx.start=function(){Ta||(Ta=a.setInterval(n.fx.tick,n.fx.interval))},n.fx.stop=function(){a.clearInterval(Ta),Ta=null},n.fx.speeds={slow:600,fast:200,_default:400},n.fn.delay=function(b,c){return b=n.fx?n.fx.speeds[b]||b:b,c=c||"fx",this.queue(c,function(c,d){var e=a.setTimeout(c,b);d.stop=function(){a.clearTimeout(e)}})},function(){var a=d.createElement("input"),b=d.createElement("select"),c=b.appendChild(d.createElement("option"));a.type="checkbox",l.checkOn=""!==a.value,l.optSelected=c.selected,b.disabled=!0,l.optDisabled=!c.disabled,a=d.createElement("input"),a.value="t",a.type="radio",l.radioValue="t"===a.value}();var ab,bb=n.expr.attrHandle;n.fn.extend({attr:function(a,b){return K(this,n.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){n.removeAttr(this,a)})}}),n.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return"undefined"==typeof a.getAttribute?n.prop(a,b,c):(1===f&&n.isXMLDoc(a)||(b=b.toLowerCase(),e=n.attrHooks[b]||(n.expr.match.bool.test(b)?ab:void 0)),void 0!==c?null===c?void n.removeAttr(a,b):e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:(a.setAttribute(b,c+""),c):e&&"get"in e&&null!==(d=e.get(a,b))?d:(d=n.find.attr(a,b),null==d?void 0:d))},attrHooks:{type:{set:function(a,b){if(!l.radioValue&&"radio"===b&&n.nodeName(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}},removeAttr:function(a,b){var c,d,e=0,f=b&&b.match(G);if(f&&1===a.nodeType)while(c=f[e++])d=n.propFix[c]||c,n.expr.match.bool.test(c)&&(a[d]=!1),a.removeAttribute(c)}}),ab={set:function(a,b,c){return b===!1?n.removeAttr(a,c):a.setAttribute(c,c),c}},n.each(n.expr.match.bool.source.match(/\w+/g),function(a,b){var c=bb[b]||n.find.attr;bb[b]=function(a,b,d){var e,f;return d||(f=bb[b],bb[b]=e,e=null!=c(a,b,d)?b.toLowerCase():null,bb[b]=f),e}});var cb=/^(?:input|select|textarea|button)$/i,db=/^(?:a|area)$/i;n.fn.extend({prop:function(a,b){return K(this,n.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[n.propFix[a]||a]})}}),n.extend({prop:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return 1===f&&n.isXMLDoc(a)||(b=n.propFix[b]||b,e=n.propHooks[b]),
 void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){var b=n.find.attr(a,"tabindex");return b?parseInt(b,10):cb.test(a.nodeName)||db.test(a.nodeName)&&a.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),l.optSelected||(n.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null},set:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex)}}),n.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){n.propFix[this.toLowerCase()]=this});var eb=/[\t\r\n\f]/g;function fb(a){return a.getAttribute&&a.getAttribute("class")||""}n.fn.extend({addClass:function(a){var b,c,d,e,f,g,h,i=0;if(n.isFunction(a))return this.each(function(b){n(this).addClass(a.call(this,b,fb(this)))});if("string"==typeof a&&a){b=a.match(G)||[];while(c=this[i++])if(e=fb(c),d=1===c.nodeType&&(" "+e+" ").replace(eb," ")){g=0;while(f=b[g++])d.indexOf(" "+f+" ")<0&&(d+=f+" ");h=n.trim(d),e!==h&&c.setAttribute("class",h)}}return this},removeClass:function(a){var b,c,d,e,f,g,h,i=0;if(n.isFunction(a))return this.each(function(b){n(this).removeClass(a.call(this,b,fb(this)))});if(!arguments.length)return this.attr("class","");if("string"==typeof a&&a){b=a.match(G)||[];while(c=this[i++])if(e=fb(c),d=1===c.nodeType&&(" "+e+" ").replace(eb," ")){g=0;while(f=b[g++])while(d.indexOf(" "+f+" ")>-1)d=d.replace(" "+f+" "," ");h=n.trim(d),e!==h&&c.setAttribute("class",h)}}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):n.isFunction(a)?this.each(function(c){n(this).toggleClass(a.call(this,c,fb(this),b),b)}):this.each(function(){var b,d,e,f;if("string"===c){d=0,e=n(this),f=a.match(G)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else void 0!==a&&"boolean"!==c||(b=fb(this),b&&N.set(this,"__className__",b),this.setAttribute&&this.setAttribute("class",b||a===!1?"":N.get(this,"__className__")||""))})},hasClass:function(a){var b,c,d=0;b=" "+a+" ";while(c=this[d++])if(1===c.nodeType&&(" "+fb(c)+" ").replace(eb," ").indexOf(b)>-1)return!0;return!1}});var gb=/\r/g,hb=/[\x20\t\r\n\f]+/g;n.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=n.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,n(this).val()):a,null==e?e="":"number"==typeof e?e+="":n.isArray(e)&&(e=n.map(e,function(a){return null==a?"":a+""})),b=n.valHooks[this.type]||n.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=n.valHooks[e.type]||n.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(gb,""):null==c?"":c)}}}),n.extend({valHooks:{option:{get:function(a){var b=n.find.attr(a,"value");return null!=b?b:n.trim(n.text(a)).replace(hb," ")}},select:{get:function(a){for(var b,c,d=a.options,e=a.selectedIndex,f="select-one"===a.type||0>e,g=f?null:[],h=f?e+1:d.length,i=0>e?h:f?e:0;h>i;i++)if(c=d[i],(c.selected||i===e)&&(l.optDisabled?!c.disabled:null===c.getAttribute("disabled"))&&(!c.parentNode.disabled||!n.nodeName(c.parentNode,"optgroup"))){if(b=n(c).val(),f)return b;g.push(b)}return g},set:function(a,b){var c,d,e=a.options,f=n.makeArray(b),g=e.length;while(g--)d=e[g],(d.selected=n.inArray(n.valHooks.option.get(d),f)>-1)&&(c=!0);return c||(a.selectedIndex=-1),f}}}}),n.each(["radio","checkbox"],function(){n.valHooks[this]={set:function(a,b){return n.isArray(b)?a.checked=n.inArray(n(a).val(),b)>-1:void 0}},l.checkOn||(n.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})});var ib=/^(?:focusinfocus|focusoutblur)$/;n.extend(n.event,{trigger:function(b,c,e,f){var g,h,i,j,l,m,o,p=[e||d],q=k.call(b,"type")?b.type:b,r=k.call(b,"namespace")?b.namespace.split("."):[];if(h=i=e=e||d,3!==e.nodeType&&8!==e.nodeType&&!ib.test(q+n.event.triggered)&&(q.indexOf(".")>-1&&(r=q.split("."),q=r.shift(),r.sort()),l=q.indexOf(":")<0&&"on"+q,b=b[n.expando]?b:new n.Event(q,"object"==typeof b&&b),b.isTrigger=f?2:3,b.namespace=r.join("."),b.rnamespace=b.namespace?new RegExp("(^|\\.)"+r.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=e),c=null==c?[b]:n.makeArray(c,[b]),o=n.event.special[q]||{},f||!o.trigger||o.trigger.apply(e,c)!==!1)){if(!f&&!o.noBubble&&!n.isWindow(e)){for(j=o.delegateType||q,ib.test(j+q)||(h=h.parentNode);h;h=h.parentNode)p.push(h),i=h;i===(e.ownerDocument||d)&&p.push(i.defaultView||i.parentWindow||a)}g=0;while((h=p[g++])&&!b.isPropagationStopped())b.type=g>1?j:o.bindType||q,m=(N.get(h,"events")||{})[b.type]&&N.get(h,"handle"),m&&m.apply(h,c),m=l&&h[l],m&&m.apply&&L(h)&&(b.result=m.apply(h,c),b.result===!1&&b.preventDefault());return b.type=q,f||b.isDefaultPrevented()||o._default&&o._default.apply(p.pop(),c)!==!1||!L(e)||l&&n.isFunction(e[q])&&!n.isWindow(e)&&(i=e[l],i&&(e[l]=null),n.event.triggered=q,e[q](),n.event.triggered=void 0,i&&(e[l]=i)),b.result}},simulate:function(a,b,c){var d=n.extend(new n.Event,c,{type:a,isSimulated:!0});n.event.trigger(d,null,b)}}),n.fn.extend({trigger:function(a,b){return this.each(function(){n.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];return c?n.event.trigger(a,b,c,!0):void 0}}),n.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){n.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),n.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),l.focusin="onfocusin"in a,l.focusin||n.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){n.event.simulate(b,a.target,n.event.fix(a))};n.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=N.access(d,b);e||d.addEventListener(a,c,!0),N.access(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=N.access(d,b)-1;e?N.access(d,b,e):(d.removeEventListener(a,c,!0),N.remove(d,b))}}});var jb=a.location,kb=n.now(),lb=/\?/;n.parseJSON=function(a){return JSON.parse(a+"")},n.parseXML=function(b){var c;if(!b||"string"!=typeof b)return null;try{c=(new a.DOMParser).parseFromString(b,"text/xml")}catch(d){c=void 0}return c&&!c.getElementsByTagName("parsererror").length||n.error("Invalid XML: "+b),c};var mb=/#.*$/,nb=/([?&])_=[^&]*/,ob=/^(.*?):[ \t]*([^\r\n]*)$/gm,pb=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,qb=/^(?:GET|HEAD)$/,rb=/^\/\//,sb={},tb={},ub="*/".concat("*"),vb=d.createElement("a");vb.href=jb.href;function wb(a){return function(b,c){"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(G)||[];if(n.isFunction(c))while(d=f[e++])"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function xb(a,b,c,d){var e={},f=a===tb;function g(h){var i;return e[h]=!0,n.each(a[h]||[],function(a,h){var j=h(b,c,d);return"string"!=typeof j||f||e[j]?f?!(i=j):void 0:(b.dataTypes.unshift(j),g(j),!1)}),i}return g(b.dataTypes[0])||!e["*"]&&g("*")}function yb(a,b){var c,d,e=n.ajaxSettings.flatOptions||{};for(c in b)void 0!==b[c]&&((e[c]?a:d||(d={}))[c]=b[c]);return d&&n.extend(!0,a,d),a}function zb(a,b,c){var d,e,f,g,h=a.contents,i=a.dataTypes;while("*"===i[0])i.shift(),void 0===d&&(d=a.mimeType||b.getResponseHeader("Content-Type"));if(d)for(e in h)if(h[e]&&h[e].test(d)){i.unshift(e);break}if(i[0]in c)f=i[0];else{for(e in c){if(!i[0]||a.converters[e+" "+i[0]]){f=e;break}g||(g=e)}f=f||g}return f?(f!==i[0]&&i.unshift(f),c[f]):void 0}function Ab(a,b,c,d){var e,f,g,h,i,j={},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];f=k.shift();while(f)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0]]||j["* "+h[0]])){g===!0?g=j[e]:j[e]!==!0&&(f=h[0],k.unshift(h[1]));break}if(g!==!0)if(g&&a["throws"])b=g(b);else try{b=g(b)}catch(l){return{state:"parsererror",error:g?l:"No conversion from "+i+" to "+f}}}return{state:"success",data:b}}n.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:jb.href,type:"GET",isLocal:pb.test(jb.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":ub,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":n.parseJSON,"text xml":n.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(a,b){return b?yb(yb(a,n.ajaxSettings),b):yb(n.ajaxSettings,a)},ajaxPrefilter:wb(sb),ajaxTransport:wb(tb),ajax:function(b,c){"object"==typeof b&&(c=b,b=void 0),c=c||{};var e,f,g,h,i,j,k,l,m=n.ajaxSetup({},c),o=m.context||m,p=m.context&&(o.nodeType||o.jquery)?n(o):n.event,q=n.Deferred(),r=n.Callbacks("once memory"),s=m.statusCode||{},t={},u={},v=0,w="canceled",x={readyState:0,getResponseHeader:function(a){var b;if(2===v){if(!h){h={};while(b=ob.exec(g))h[b[1].toLowerCase()]=b[2]}b=h[a.toLowerCase()]}return null==b?null:b},getAllResponseHeaders:function(){return 2===v?g:null},setRequestHeader:function(a,b){var c=a.toLowerCase();return v||(a=u[c]=u[c]||a,t[a]=b),this},overrideMimeType:function(a){return v||(m.mimeType=a),this},statusCode:function(a){var b;if(a)if(2>v)for(b in a)s[b]=[s[b],a[b]];else x.always(a[x.status]);return this},abort:function(a){var b=a||w;return e&&e.abort(b),z(0,b),this}};if(q.promise(x).complete=r.add,x.success=x.done,x.error=x.fail,m.url=((b||m.url||jb.href)+"").replace(mb,"").replace(rb,jb.protocol+"//"),m.type=c.method||c.type||m.method||m.type,m.dataTypes=n.trim(m.dataType||"*").toLowerCase().match(G)||[""],null==m.crossDomain){j=d.createElement("a");try{j.href=m.url,j.href=j.href,m.crossDomain=vb.protocol+"//"+vb.host!=j.protocol+"//"+j.host}catch(y){m.crossDomain=!0}}if(m.data&&m.processData&&"string"!=typeof m.data&&(m.data=n.param(m.data,m.traditional)),xb(sb,m,c,x),2===v)return x;k=n.event&&m.global,k&&0===n.active++&&n.event.trigger("ajaxStart"),m.type=m.type.toUpperCase(),m.hasContent=!qb.test(m.type),f=m.url,m.hasContent||(m.data&&(f=m.url+=(lb.test(f)?"&":"?")+m.data,delete m.data),m.cache===!1&&(m.url=nb.test(f)?f.replace(nb,"$1_="+kb++):f+(lb.test(f)?"&":"?")+"_="+kb++)),m.ifModified&&(n.lastModified[f]&&x.setRequestHeader("If-Modified-Since",n.lastModified[f]),n.etag[f]&&x.setRequestHeader("If-None-Match",n.etag[f])),(m.data&&m.hasContent&&m.contentType!==!1||c.contentType)&&x.setRequestHeader("Content-Type",m.contentType),x.setRequestHeader("Accept",m.dataTypes[0]&&m.accepts[m.dataTypes[0]]?m.accepts[m.dataTypes[0]]+("*"!==m.dataTypes[0]?", "+ub+"; q=0.01":""):m.accepts["*"]);for(l in m.headers)x.setRequestHeader(l,m.headers[l]);if(m.beforeSend&&(m.beforeSend.call(o,x,m)===!1||2===v))return x.abort();w="abort";for(l in{success:1,error:1,complete:1})x[l](m[l]);if(e=xb(tb,m,c,x)){if(x.readyState=1,k&&p.trigger("ajaxSend",[x,m]),2===v)return x;m.async&&m.timeout>0&&(i=a.setTimeout(function(){x.abort("timeout")},m.timeout));try{v=1,e.send(t,z)}catch(y){if(!(2>v))throw y;z(-1,y)}}else z(-1,"No Transport");function z(b,c,d,h){var j,l,t,u,w,y=c;2!==v&&(v=2,i&&a.clearTimeout(i),e=void 0,g=h||"",x.readyState=b>0?4:0,j=b>=200&&300>b||304===b,d&&(u=zb(m,x,d)),u=Ab(m,u,x,j),j?(m.ifModified&&(w=x.getResponseHeader("Last-Modified"),w&&(n.lastModified[f]=w),w=x.getResponseHeader("etag"),w&&(n.etag[f]=w)),204===b||"HEAD"===m.type?y="nocontent":304===b?y="notmodified":(y=u.state,l=u.data,t=u.error,j=!t)):(t=y,!b&&y||(y="error",0>b&&(b=0))),x.status=b,x.statusText=(c||y)+"",j?q.resolveWith(o,[l,y,x]):q.rejectWith(o,[x,y,t]),x.statusCode(s),s=void 0,k&&p.trigger(j?"ajaxSuccess":"ajaxError",[x,m,j?l:t]),r.fireWith(o,[x,y]),k&&(p.trigger("ajaxComplete",[x,m]),--n.active||n.event.trigger("ajaxStop")))}return x},getJSON:function(a,b,c){return n.get(a,b,c,"json")},getScript:function(a,b){return n.get(a,void 0,b,"script")}}),n.each(["get","post"],function(a,b){n[b]=function(a,c,d,e){return n.isFunction(c)&&(e=e||d,d=c,c=void 0),n.ajax(n.extend({url:a,type:b,dataType:e,data:c,success:d},n.isPlainObject(a)&&a))}}),n._evalUrl=function(a){return n.ajax({url:a,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})},n.fn.extend({wrapAll:function(a){var b;return n.isFunction(a)?this.each(function(b){n(this).wrapAll(a.call(this,b))}):(this[0]&&(b=n(a,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstElementChild)a=a.firstElementChild;return a}).append(this)),this)},wrapInner:function(a){return n.isFunction(a)?this.each(function(b){n(this).wrapInner(a.call(this,b))}):this.each(function(){var b=n(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=n.isFunction(a);return this.each(function(c){n(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){n.nodeName(this,"body")||n(this).replaceWith(this.childNodes)}).end()}}),n.expr.filters.hidden=function(a){return!n.expr.filters.visible(a)},n.expr.filters.visible=function(a){return a.offsetWidth>0||a.offsetHeight>0||a.getClientRects().length>0};var Bb=/%20/g,Cb=/\[\]$/,Db=/\r?\n/g,Eb=/^(?:submit|button|image|reset|file)$/i,Fb=/^(?:input|select|textarea|keygen)/i;function Gb(a,b,c,d){var e;if(n.isArray(b))n.each(b,function(b,e){c||Cb.test(a)?d(a,e):Gb(a+"["+("object"==typeof e&&null!=e?b:"")+"]",e,c,d)});else if(c||"object"!==n.type(b))d(a,b);else for(e in b)Gb(a+"["+e+"]",b[e],c,d)}n.param=function(a,b){var c,d=[],e=function(a,b){b=n.isFunction(b)?b():null==b?"":b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};if(void 0===b&&(b=n.ajaxSettings&&n.ajaxSettings.traditional),n.isArray(a)||a.jquery&&!n.isPlainObject(a))n.each(a,function(){e(this.name,this.value)});else for(c in a)Gb(c,a[c],b,e);return d.join("&").replace(Bb,"+")},n.fn.extend({serialize:function(){return n.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=n.prop(this,"elements");return a?n.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!n(this).is(":disabled")&&Fb.test(this.nodeName)&&!Eb.test(a)&&(this.checked||!X.test(a))}).map(function(a,b){var c=n(this).val();return null==c?null:n.isArray(c)?n.map(c,function(a){return{name:b.name,value:a.replace(Db,"\r\n")}}):{name:b.name,value:c.replace(Db,"\r\n")}}).get()}}),n.ajaxSettings.xhr=function(){try{return new a.XMLHttpRequest}catch(b){}};var Hb={0:200,1223:204},Ib=n.ajaxSettings.xhr();l.cors=!!Ib&&"withCredentials"in Ib,l.ajax=Ib=!!Ib,n.ajaxTransport(function(b){var c,d;return l.cors||Ib&&!b.crossDomain?{send:function(e,f){var g,h=b.xhr();if(h.open(b.type,b.url,b.async,b.username,b.password),b.xhrFields)for(g in b.xhrFields)h[g]=b.xhrFields[g];b.mimeType&&h.overrideMimeType&&h.overrideMimeType(b.mimeType),b.crossDomain||e["X-Requested-With"]||(e["X-Requested-With"]="XMLHttpRequest");for(g in e)h.setRequestHeader(g,e[g]);c=function(a){return function(){c&&(c=d=h.onload=h.onerror=h.onabort=h.onreadystatechange=null,"abort"===a?h.abort():"error"===a?"number"!=typeof h.status?f(0,"error"):f(h.status,h.statusText):f(Hb[h.status]||h.status,h.statusText,"text"!==(h.responseType||"text")||"string"!=typeof h.responseText?{binary:h.response}:{text:h.responseText},h.getAllResponseHeaders()))}},h.onload=c(),d=h.onerror=c("error"),void 0!==h.onabort?h.onabort=d:h.onreadystatechange=function(){4===h.readyState&&a.setTimeout(function(){c&&d()})},c=c("abort");try{h.send(b.hasContent&&b.data||null)}catch(i){if(c)throw i}},abort:function(){c&&c()}}:void 0}),n.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(a){return n.globalEval(a),a}}}),n.ajaxPrefilter("script",function(a){void 0===a.cache&&(a.cache=!1),a.crossDomain&&(a.type="GET")}),n.ajaxTransport("script",function(a){if(a.crossDomain){var b,c;return{send:function(e,f){b=n("<script>").prop({charset:a.scriptCharset,src:a.url}).on("load error",c=function(a){b.remove(),c=null,a&&f("error"===a.type?404:200,a.type)}),d.head.appendChild(b[0])},abort:function(){c&&c()}}}});var Jb=[],Kb=/(=)\?(?=&|$)|\?\?/;n.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=Jb.pop()||n.expando+"_"+kb++;return this[a]=!0,a}}),n.ajaxPrefilter("json jsonp",function(b,c,d){var e,f,g,h=b.jsonp!==!1&&(Kb.test(b.url)?"url":"string"==typeof b.data&&0===(b.contentType||"").indexOf("application/x-www-form-urlencoded")&&Kb.test(b.data)&&"data");return h||"jsonp"===b.dataTypes[0]?(e=b.jsonpCallback=n.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,h?b[h]=b[h].replace(Kb,"$1"+e):b.jsonp!==!1&&(b.url+=(lb.test(b.url)?"&":"?")+b.jsonp+"="+e),b.converters["script json"]=function(){return g||n.error(e+" was not called"),g[0]},b.dataTypes[0]="json",f=a[e],a[e]=function(){g=arguments},d.always(function(){void 0===f?n(a).removeProp(e):a[e]=f,b[e]&&(b.jsonpCallback=c.jsonpCallback,Jb.push(e)),g&&n.isFunction(f)&&f(g[0]),g=f=void 0}),"script"):void 0}),n.parseHTML=function(a,b,c){if(!a||"string"!=typeof a)return null;"boolean"==typeof b&&(c=b,b=!1),b=b||d;var e=x.exec(a),f=!c&&[];return e?[b.createElement(e[1])]:(e=ca([a],b,f),f&&f.length&&n(f).remove(),n.merge([],e.childNodes))};var Lb=n.fn.load;n.fn.load=function(a,b,c){if("string"!=typeof a&&Lb)return Lb.apply(this,arguments);var d,e,f,g=this,h=a.indexOf(" ");return h>-1&&(d=n.trim(a.slice(h)),a=a.slice(0,h)),n.isFunction(b)?(c=b,b=void 0):b&&"object"==typeof b&&(e="POST"),g.length>0&&n.ajax({url:a,type:e||"GET",dataType:"html",data:b}).done(function(a){f=arguments,g.html(d?n("<div>").append(n.parseHTML(a)).find(d):a)}).always(c&&function(a,b){g.each(function(){c.apply(this,f||[a.responseText,b,a])})}),this},n.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(a,b){n.fn[b]=function(a){return this.on(b,a)}}),n.expr.filters.animated=function(a){return n.grep(n.timers,function(b){return a===b.elem}).length};function Mb(a){return n.isWindow(a)?a:9===a.nodeType&&a.defaultView}n.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=n.css(a,"position"),l=n(a),m={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=n.css(a,"top"),i=n.css(a,"left"),j=("absolute"===k||"fixed"===k)&&(f+i).indexOf("auto")>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),n.isFunction(b)&&(b=b.call(a,c,n.extend({},h))),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),"using"in b?b.using.call(a,m):l.css(m)}},n.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){n.offset.setOffset(this,a,b)});var b,c,d=this[0],e={top:0,left:0},f=d&&d.ownerDocument;if(f)return b=f.documentElement,n.contains(b,d)?(e=d.getBoundingClientRect(),c=Mb(f),{top:e.top+c.pageYOffset-b.clientTop,left:e.left+c.pageXOffset-b.clientLeft}):e},position:function(){if(this[0]){var a,b,c=this[0],d={top:0,left:0};return"fixed"===n.css(c,"position")?b=c.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),n.nodeName(a[0],"html")||(d=a.offset()),d.top+=n.css(a[0],"borderTopWidth",!0),d.left+=n.css(a[0],"borderLeftWidth",!0)),{top:b.top-d.top-n.css(c,"marginTop",!0),left:b.left-d.left-n.css(c,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent;while(a&&"static"===n.css(a,"position"))a=a.offsetParent;return a||Ea})}}),n.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c="pageYOffset"===b;n.fn[a]=function(d){return K(this,function(a,d,e){var f=Mb(a);return void 0===e?f?f[b]:a[d]:void(f?f.scrollTo(c?f.pageXOffset:e,c?e:f.pageYOffset):a[d]=e)},a,d,arguments.length)}}),n.each(["top","left"],function(a,b){n.cssHooks[b]=Ga(l.pixelPosition,function(a,c){return c?(c=Fa(a,b),Ba.test(c)?n(a).position()[b]+"px":c):void 0})}),n.each({Height:"height",Width:"width"},function(a,b){n.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){n.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return K(this,function(b,c,d){var e;return n.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?n.css(b,c,g):n.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),n.fn.extend({bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return 1===arguments.length?this.off(a,"**"):this.off(b,a||"**",c)},size:function(){return this.length}}),n.fn.andSelf=n.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return n});var Nb=a.jQuery,Ob=a.$;return n.noConflict=function(b){return a.$===n&&(a.$=Ob),b&&a.jQuery===n&&(a.jQuery=Nb),n},b||(a.jQuery=a.$=n),n});
 </script>
 <script>/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under the MIT license
 */
 if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){"use strict";var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1||b[0]>3)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4")}(jQuery),+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]};return!1}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one("bsTransitionEnd",function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b(),a.support.transition&&(a.event.special.bsTransitionEnd={bindType:a.support.transition.end,delegateType:a.support.transition.end,handle:function(b){if(a(b.target).is(this))return b.handleObj.handler.apply(this,arguments)}})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var c=a(this),e=c.data("bs.alert");e||c.data("bs.alert",e=new d(this)),"string"==typeof b&&e[b].call(c)})}var c='[data-dismiss="alert"]',d=function(b){a(b).on("click",c,this.close)};d.VERSION="3.3.7",d.TRANSITION_DURATION=150,d.prototype.close=function(b){function c(){g.detach().trigger("closed.bs.alert").remove()}var e=a(this),f=e.attr("data-target");f||(f=e.attr("href"),f=f&&f.replace(/.*(?=#[^\s]*$)/,""));var g=a("#"===f?[]:f);b&&b.preventDefault(),g.length||(g=e.closest(".alert")),g.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(g.removeClass("in"),a.support.transition&&g.hasClass("fade")?g.one("bsTransitionEnd",c).emulateTransitionEnd(d.TRANSITION_DURATION):c())};var e=a.fn.alert;a.fn.alert=b,a.fn.alert.Constructor=d,a.fn.alert.noConflict=function(){return a.fn.alert=e,this},a(document).on("click.bs.alert.data-api",c,d.prototype.close)}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof b&&b;e||d.data("bs.button",e=new c(this,f)),"toggle"==b?e.toggle():b&&e.setState(b)})}var c=function(b,d){this.$element=a(b),this.options=a.extend({},c.DEFAULTS,d),this.isLoading=!1};c.VERSION="3.3.7",c.DEFAULTS={loadingText:"loading..."},c.prototype.setState=function(b){var c="disabled",d=this.$element,e=d.is("input")?"val":"html",f=d.data();b+="Text",null==f.resetText&&d.data("resetText",d[e]()),setTimeout(a.proxy(function(){d[e](null==f[b]?this.options[b]:f[b]),"loadingText"==b?(this.isLoading=!0,d.addClass(c).attr(c,c).prop(c,!0)):this.isLoading&&(this.isLoading=!1,d.removeClass(c).removeAttr(c).prop(c,!1))},this),0)},c.prototype.toggle=function(){var a=!0,b=this.$element.closest('[data-toggle="buttons"]');if(b.length){var c=this.$element.find("input");"radio"==c.prop("type")?(c.prop("checked")&&(a=!1),b.find(".active").removeClass("active"),this.$element.addClass("active")):"checkbox"==c.prop("type")&&(c.prop("checked")!==this.$element.hasClass("active")&&(a=!1),this.$element.toggleClass("active")),c.prop("checked",this.$element.hasClass("active")),a&&c.trigger("change")}else this.$element.attr("aria-pressed",!this.$element.hasClass("active")),this.$element.toggleClass("active")};var d=a.fn.button;a.fn.button=b,a.fn.button.Constructor=c,a.fn.button.noConflict=function(){return a.fn.button=d,this},a(document).on("click.bs.button.data-api",'[data-toggle^="button"]',function(c){var d=a(c.target).closest(".btn");b.call(d,"toggle"),a(c.target).is('input[type="radio"], input[type="checkbox"]')||(c.preventDefault(),d.is("input,button")?d.trigger("focus"):d.find("input:visible,button:visible").first().trigger("focus"))}).on("focus.bs.button.data-api blur.bs.button.data-api",'[data-toggle^="button"]',function(b){a(b.target).closest(".btn").toggleClass("focus",/^focus(in)?$/.test(b.type))})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},c.DEFAULTS,d.data(),"object"==typeof b&&b),g="string"==typeof b?b:f.slide;e||d.data("bs.carousel",e=new c(this,f)),"number"==typeof b?e.to(b):g?e[g]():f.interval&&e.pause().cycle()})}var c=function(b,c){this.$element=a(b),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=null,this.sliding=null,this.interval=null,this.$active=null,this.$items=null,this.options.keyboard&&this.$element.on("keydown.bs.carousel",a.proxy(this.keydown,this)),"hover"==this.options.pause&&!("ontouchstart"in document.documentElement)&&this.$element.on("mouseenter.bs.carousel",a.proxy(this.pause,this)).on("mouseleave.bs.carousel",a.proxy(this.cycle,this))};c.VERSION="3.3.7",c.TRANSITION_DURATION=600,c.DEFAULTS={interval:5e3,pause:"hover",wrap:!0,keyboard:!0},c.prototype.keydown=function(a){if(!/input|textarea/i.test(a.target.tagName)){switch(a.which){case 37:this.prev();break;case 39:this.next();break;default:return}a.preventDefault()}},c.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},c.prototype.getItemIndex=function(a){return this.$items=a.parent().children(".item"),this.$items.index(a||this.$active)},c.prototype.getItemForDirection=function(a,b){var c=this.getItemIndex(b),d="prev"==a&&0===c||"next"==a&&c==this.$items.length-1;if(d&&!this.options.wrap)return b;var e="prev"==a?-1:1,f=(c+e)%this.$items.length;return this.$items.eq(f)},c.prototype.to=function(a){var b=this,c=this.getItemIndex(this.$active=this.$element.find(".item.active"));if(!(a>this.$items.length-1||a<0))return this.sliding?this.$element.one("slid.bs.carousel",function(){b.to(a)}):c==a?this.pause().cycle():this.slide(a>c?"next":"prev",this.$items.eq(a))},c.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},c.prototype.next=function(){if(!this.sliding)return this.slide("next")},c.prototype.prev=function(){if(!this.sliding)return this.slide("prev")},c.prototype.slide=function(b,d){var e=this.$element.find(".item.active"),f=d||this.getItemForDirection(b,e),g=this.interval,h="next"==b?"left":"right",i=this;if(f.hasClass("active"))return this.sliding=!1;var j=f[0],k=a.Event("slide.bs.carousel",{relatedTarget:j,direction:h});if(this.$element.trigger(k),!k.isDefaultPrevented()){if(this.sliding=!0,g&&this.pause(),this.$indicators.length){this.$indicators.find(".active").removeClass("active");var l=a(this.$indicators.children()[this.getItemIndex(f)]);l&&l.addClass("active")}var m=a.Event("slid.bs.carousel",{relatedTarget:j,direction:h});return a.support.transition&&this.$element.hasClass("slide")?(f.addClass(b),f[0].offsetWidth,e.addClass(h),f.addClass(h),e.one("bsTransitionEnd",function(){f.removeClass([b,h].join(" ")).addClass("active"),e.removeClass(["active",h].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger(m)},0)}).emulateTransitionEnd(c.TRANSITION_DURATION)):(e.removeClass("active"),f.addClass("active"),this.sliding=!1,this.$element.trigger(m)),g&&this.cycle(),this}};var d=a.fn.carousel;a.fn.carousel=b,a.fn.carousel.Constructor=c,a.fn.carousel.noConflict=function(){return a.fn.carousel=d,this};var e=function(c){var d,e=a(this),f=a(e.attr("data-target")||(d=e.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""));if(f.hasClass("carousel")){var g=a.extend({},f.data(),e.data()),h=e.attr("data-slide-to");h&&(g.interval=!1),b.call(f,g),h&&f.data("bs.carousel").to(h),c.preventDefault()}};a(document).on("click.bs.carousel.data-api","[data-slide]",e).on("click.bs.carousel.data-api","[data-slide-to]",e),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var c=a(this);b.call(c,c.data())})})}(jQuery),+function(a){"use strict";function b(b){var c,d=b.attr("data-target")||(c=b.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,"");return a(d)}function c(b){return this.each(function(){var c=a(this),e=c.data("bs.collapse"),f=a.extend({},d.DEFAULTS,c.data(),"object"==typeof b&&b);!e&&f.toggle&&/show|hide/.test(b)&&(f.toggle=!1),e||c.data("bs.collapse",e=new d(this,f)),"string"==typeof b&&e[b]()})}var d=function(b,c){this.$element=a(b),this.options=a.extend({},d.DEFAULTS,c),this.$trigger=a('[data-toggle="collapse"][href="#'+b.id+'"],[data-toggle="collapse"][data-target="#'+b.id+'"]'),this.transitioning=null,this.options.parent?this.$parent=this.getParent():this.addAriaAndCollapsedClass(this.$element,this.$trigger),this.options.toggle&&this.toggle()};d.VERSION="3.3.7",d.TRANSITION_DURATION=350,d.DEFAULTS={toggle:!0},d.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},d.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var b,e=this.$parent&&this.$parent.children(".panel").children(".in, .collapsing");if(!(e&&e.length&&(b=e.data("bs.collapse"),b&&b.transitioning))){var f=a.Event("show.bs.collapse");if(this.$element.trigger(f),!f.isDefaultPrevented()){e&&e.length&&(c.call(e,"hide"),b||e.data("bs.collapse",null));var g=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[g](0).attr("aria-expanded",!0),this.$trigger.removeClass("collapsed").attr("aria-expanded",!0),this.transitioning=1;var h=function(){this.$element.removeClass("collapsing").addClass("collapse in")[g](""),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return h.call(this);var i=a.camelCase(["scroll",g].join("-"));this.$element.one("bsTransitionEnd",a.proxy(h,this)).emulateTransitionEnd(d.TRANSITION_DURATION)[g](this.$element[0][i])}}}},d.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse in").attr("aria-expanded",!1),this.$trigger.addClass("collapsed").attr("aria-expanded",!1),this.transitioning=1;var e=function(){this.transitioning=0,this.$element.removeClass("collapsing").addClass("collapse").trigger("hidden.bs.collapse")};return a.support.transition?void this.$element[c](0).one("bsTransitionEnd",a.proxy(e,this)).emulateTransitionEnd(d.TRANSITION_DURATION):e.call(this)}}},d.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()},d.prototype.getParent=function(){return a(this.options.parent).find('[data-toggle="collapse"][data-parent="'+this.options.parent+'"]').each(a.proxy(function(c,d){var e=a(d);this.addAriaAndCollapsedClass(b(e),e)},this)).end()},d.prototype.addAriaAndCollapsedClass=function(a,b){var c=a.hasClass("in");a.attr("aria-expanded",c),b.toggleClass("collapsed",!c).attr("aria-expanded",c)};var e=a.fn.collapse;a.fn.collapse=c,a.fn.collapse.Constructor=d,a.fn.collapse.noConflict=function(){return a.fn.collapse=e,this},a(document).on("click.bs.collapse.data-api",'[data-toggle="collapse"]',function(d){var e=a(this);e.attr("data-target")||d.preventDefault();var f=b(e),g=f.data("bs.collapse"),h=g?"toggle":e.data();c.call(f,h)})}(jQuery),+function(a){"use strict";function b(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#[A-Za-z]/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}function c(c){c&&3===c.which||(a(e).remove(),a(f).each(function(){var d=a(this),e=b(d),f={relatedTarget:this};e.hasClass("open")&&(c&&"click"==c.type&&/input|textarea/i.test(c.target.tagName)&&a.contains(e[0],c.target)||(e.trigger(c=a.Event("hide.bs.dropdown",f)),c.isDefaultPrevented()||(d.attr("aria-expanded","false"),e.removeClass("open").trigger(a.Event("hidden.bs.dropdown",f)))))}))}function d(b){return this.each(function(){var c=a(this),d=c.data("bs.dropdown");d||c.data("bs.dropdown",d=new g(this)),"string"==typeof b&&d[b].call(c)})}var e=".dropdown-backdrop",f='[data-toggle="dropdown"]',g=function(b){a(b).on("click.bs.dropdown",this.toggle)};g.VERSION="3.3.7",g.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=b(e),g=f.hasClass("open");if(c(),!g){"ontouchstart"in document.documentElement&&!f.closest(".navbar-nav").length&&a(document.createElement("div")).addClass("dropdown-backdrop").insertAfter(a(this)).on("click",c);var h={relatedTarget:this};if(f.trigger(d=a.Event("show.bs.dropdown",h)),d.isDefaultPrevented())return;e.trigger("focus").attr("aria-expanded","true"),f.toggleClass("open").trigger(a.Event("shown.bs.dropdown",h))}return!1}},g.prototype.keydown=function(c){if(/(38|40|27|32)/.test(c.which)&&!/input|textarea/i.test(c.target.tagName)){var d=a(this);if(c.preventDefault(),c.stopPropagation(),!d.is(".disabled, :disabled")){var e=b(d),g=e.hasClass("open");if(!g&&27!=c.which||g&&27==c.which)return 27==c.which&&e.find(f).trigger("focus"),d.trigger("click");var h=" li:not(.disabled):visible a",i=e.find(".dropdown-menu"+h);if(i.length){var j=i.index(c.target);38==c.which&&j>0&&j--,40==c.which&&j<i.length-1&&j++,~j||(j=0),i.eq(j).trigger("focus")}}}};var h=a.fn.dropdown;a.fn.dropdown=d,a.fn.dropdown.Constructor=g,a.fn.dropdown.noConflict=function(){return a.fn.dropdown=h,this},a(document).on("click.bs.dropdown.data-api",c).on("click.bs.dropdown.data-api",".dropdown form",function(a){a.stopPropagation()}).on("click.bs.dropdown.data-api",f,g.prototype.toggle).on("keydown.bs.dropdown.data-api",f,g.prototype.keydown).on("keydown.bs.dropdown.data-api",".dropdown-menu",g.prototype.keydown)}(jQuery),+function(a){"use strict";function b(b,d){return this.each(function(){var e=a(this),f=e.data("bs.modal"),g=a.extend({},c.DEFAULTS,e.data(),"object"==typeof b&&b);f||e.data("bs.modal",f=new c(this,g)),"string"==typeof b?f[b](d):g.show&&f.show(d)})}var c=function(b,c){this.options=c,this.$body=a(document.body),this.$element=a(b),this.$dialog=this.$element.find(".modal-dialog"),this.$backdrop=null,this.isShown=null,this.originalBodyPad=null,this.scrollbarWidth=0,this.ignoreBackdropClick=!1,this.options.remote&&this.$element.find(".modal-content").load(this.options.remote,a.proxy(function(){this.$element.trigger("loaded.bs.modal")},this))};c.VERSION="3.3.7",c.TRANSITION_DURATION=300,c.BACKDROP_TRANSITION_DURATION=150,c.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},c.prototype.toggle=function(a){return this.isShown?this.hide():this.show(a)},c.prototype.show=function(b){var d=this,e=a.Event("show.bs.modal",{relatedTarget:b});this.$element.trigger(e),this.isShown||e.isDefaultPrevented()||(this.isShown=!0,this.checkScrollbar(),this.setScrollbar(),this.$body.addClass("modal-open"),this.escape(),this.resize(),this.$element.on("click.dismiss.bs.modal",'[data-dismiss="modal"]',a.proxy(this.hide,this)),this.$dialog.on("mousedown.dismiss.bs.modal",function(){d.$element.one("mouseup.dismiss.bs.modal",function(b){a(b.target).is(d.$element)&&(d.ignoreBackdropClick=!0)})}),this.backdrop(function(){var e=a.support.transition&&d.$element.hasClass("fade");d.$element.parent().length||d.$element.appendTo(d.$body),d.$element.show().scrollTop(0),d.adjustDialog(),e&&d.$element[0].offsetWidth,d.$element.addClass("in"),d.enforceFocus();var f=a.Event("shown.bs.modal",{relatedTarget:b});e?d.$dialog.one("bsTransitionEnd",function(){d.$element.trigger("focus").trigger(f)}).emulateTransitionEnd(c.TRANSITION_DURATION):d.$element.trigger("focus").trigger(f)}))},c.prototype.hide=function(b){b&&b.preventDefault(),b=a.Event("hide.bs.modal"),this.$element.trigger(b),this.isShown&&!b.isDefaultPrevented()&&(this.isShown=!1,this.escape(),this.resize(),a(document).off("focusin.bs.modal"),this.$element.removeClass("in").off("click.dismiss.bs.modal").off("mouseup.dismiss.bs.modal"),this.$dialog.off("mousedown.dismiss.bs.modal"),a.support.transition&&this.$element.hasClass("fade")?this.$element.one("bsTransitionEnd",a.proxy(this.hideModal,this)).emulateTransitionEnd(c.TRANSITION_DURATION):this.hideModal())},c.prototype.enforceFocus=function(){a(document).off("focusin.bs.modal").on("focusin.bs.modal",a.proxy(function(a){document===a.target||this.$element[0]===a.target||this.$element.has(a.target).length||this.$element.trigger("focus")},this))},c.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keydown.dismiss.bs.modal",a.proxy(function(a){27==a.which&&this.hide()},this)):this.isShown||this.$element.off("keydown.dismiss.bs.modal")},c.prototype.resize=function(){this.isShown?a(window).on("resize.bs.modal",a.proxy(this.handleUpdate,this)):a(window).off("resize.bs.modal")},c.prototype.hideModal=function(){var a=this;this.$element.hide(),this.backdrop(function(){a.$body.removeClass("modal-open"),a.resetAdjustments(),a.resetScrollbar(),a.$element.trigger("hidden.bs.modal")})},c.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},c.prototype.backdrop=function(b){var d=this,e=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var f=a.support.transition&&e;if(this.$backdrop=a(document.createElement("div")).addClass("modal-backdrop "+e).appendTo(this.$body),this.$element.on("click.dismiss.bs.modal",a.proxy(function(a){return this.ignoreBackdropClick?void(this.ignoreBackdropClick=!1):void(a.target===a.currentTarget&&("static"==this.options.backdrop?this.$element[0].focus():this.hide()))},this)),f&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),!b)return;f?this.$backdrop.one("bsTransitionEnd",b).emulateTransitionEnd(c.BACKDROP_TRANSITION_DURATION):b()}else if(!this.isShown&&this.$backdrop){this.$backdrop.removeClass("in");var g=function(){d.removeBackdrop(),b&&b()};a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one("bsTransitionEnd",g).emulateTransitionEnd(c.BACKDROP_TRANSITION_DURATION):g()}else b&&b()},c.prototype.handleUpdate=function(){this.adjustDialog()},c.prototype.adjustDialog=function(){var a=this.$element[0].scrollHeight>document.documentElement.clientHeight;this.$element.css({paddingLeft:!this.bodyIsOverflowing&&a?this.scrollbarWidth:"",paddingRight:this.bodyIsOverflowing&&!a?this.scrollbarWidth:""})},c.prototype.resetAdjustments=function(){this.$element.css({paddingLeft:"",paddingRight:""})},c.prototype.checkScrollbar=function(){var a=window.innerWidth;if(!a){var b=document.documentElement.getBoundingClientRect();a=b.right-Math.abs(b.left)}this.bodyIsOverflowing=document.body.clientWidth<a,this.scrollbarWidth=this.measureScrollbar()},c.prototype.setScrollbar=function(){var a=parseInt(this.$body.css("padding-right")||0,10);this.originalBodyPad=document.body.style.paddingRight||"",this.bodyIsOverflowing&&this.$body.css("padding-right",a+this.scrollbarWidth)},c.prototype.resetScrollbar=function(){this.$body.css("padding-right",this.originalBodyPad)},c.prototype.measureScrollbar=function(){var a=document.createElement("div");a.className="modal-scrollbar-measure",this.$body.append(a);var b=a.offsetWidth-a.clientWidth;return this.$body[0].removeChild(a),b};var d=a.fn.modal;a.fn.modal=b,a.fn.modal.Constructor=c,a.fn.modal.noConflict=function(){return a.fn.modal=d,this},a(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(c){var d=a(this),e=d.attr("href"),f=a(d.attr("data-target")||e&&e.replace(/.*(?=#[^\s]+$)/,"")),g=f.data("bs.modal")?"toggle":a.extend({remote:!/#/.test(e)&&e},f.data(),d.data());d.is("a")&&c.preventDefault(),f.one("show.bs.modal",function(a){a.isDefaultPrevented()||f.one("hidden.bs.modal",function(){d.is(":visible")&&d.trigger("focus")})}),b.call(f,g,this)})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.tooltip"),f="object"==typeof b&&b;!e&&/destroy|hide/.test(b)||(e||d.data("bs.tooltip",e=new c(this,f)),"string"==typeof b&&e[b]())})}var c=function(a,b){this.type=null,this.options=null,this.enabled=null,this.timeout=null,this.hoverState=null,this.$element=null,this.inState=null,this.init("tooltip",a,b)};c.VERSION="3.3.7",c.TRANSITION_DURATION=150,c.DEFAULTS={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1,viewport:{selector:"body",padding:0}},c.prototype.init=function(b,c,d){if(this.enabled=!0,this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.$viewport=this.options.viewport&&a(a.isFunction(this.options.viewport)?this.options.viewport.call(this,this.$element):this.options.viewport.selector||this.options.viewport),this.inState={click:!1,hover:!1,focus:!1},this.$element[0]instanceof document.constructor&&!this.options.selector)throw new Error("`selector` option must be specified when initializing "+this.type+" on the window.document object!");for(var e=this.options.trigger.split(" "),f=e.length;f--;){var g=e[f];if("click"==g)this.$element.on("click."+this.type,this.options.selector,a.proxy(this.toggle,this));else if("manual"!=g){var h="hover"==g?"mouseenter":"focusin",i="hover"==g?"mouseleave":"focusout";this.$element.on(h+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(i+"."+this.type,this.options.selector,a.proxy(this.leave,this))}}this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},c.prototype.getDefaults=function(){return c.DEFAULTS},c.prototype.getOptions=function(b){return b=a.extend({},this.getDefaults(),this.$element.data(),b),b.delay&&"number"==typeof b.delay&&(b.delay={show:b.delay,hide:b.delay}),b},c.prototype.getDelegateOptions=function(){var b={},c=this.getDefaults();return this._options&&a.each(this._options,function(a,d){c[a]!=d&&(b[a]=d)}),b},c.prototype.enter=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget).data("bs."+this.type);return c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c)),b instanceof a.Event&&(c.inState["focusin"==b.type?"focus":"hover"]=!0),c.tip().hasClass("in")||"in"==c.hoverState?void(c.hoverState="in"):(clearTimeout(c.timeout),c.hoverState="in",c.options.delay&&c.options.delay.show?void(c.timeout=setTimeout(function(){"in"==c.hoverState&&c.show()},c.options.delay.show)):c.show())},c.prototype.isInStateTrue=function(){for(var a in this.inState)if(this.inState[a])return!0;return!1},c.prototype.leave=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget).data("bs."+this.type);if(c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c)),b instanceof a.Event&&(c.inState["focusout"==b.type?"focus":"hover"]=!1),!c.isInStateTrue())return clearTimeout(c.timeout),c.hoverState="out",c.options.delay&&c.options.delay.hide?void(c.timeout=setTimeout(function(){"out"==c.hoverState&&c.hide()},c.options.delay.hide)):c.hide()},c.prototype.show=function(){var b=a.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){this.$element.trigger(b);var d=a.contains(this.$element[0].ownerDocument.documentElement,this.$element[0]);if(b.isDefaultPrevented()||!d)return;var e=this,f=this.tip(),g=this.getUID(this.type);this.setContent(),f.attr("id",g),this.$element.attr("aria-describedby",g),this.options.animation&&f.addClass("fade");var h="function"==typeof this.options.placement?this.options.placement.call(this,f[0],this.$element[0]):this.options.placement,i=/\s?auto?\s?/i,j=i.test(h);j&&(h=h.replace(i,"")||"top"),f.detach().css({top:0,left:0,display:"block"}).addClass(h).data("bs."+this.type,this),this.options.container?f.appendTo(this.options.container):f.insertAfter(this.$element),this.$element.trigger("inserted.bs."+this.type);var k=this.getPosition(),l=f[0].offsetWidth,m=f[0].offsetHeight;if(j){var n=h,o=this.getPosition(this.$viewport);h="bottom"==h&&k.bottom+m>o.bottom?"top":"top"==h&&k.top-m<o.top?"bottom":"right"==h&&k.right+l>o.width?"left":"left"==h&&k.left-l<o.left?"right":h,f.removeClass(n).addClass(h)}var p=this.getCalculatedOffset(h,k,l,m);this.applyPlacement(p,h);var q=function(){var a=e.hoverState;e.$element.trigger("shown.bs."+e.type),e.hoverState=null,"out"==a&&e.leave(e)};a.support.transition&&this.$tip.hasClass("fade")?f.one("bsTransitionEnd",q).emulateTransitionEnd(c.TRANSITION_DURATION):q()}},c.prototype.applyPlacement=function(b,c){var d=this.tip(),e=d[0].offsetWidth,f=d[0].offsetHeight,g=parseInt(d.css("margin-top"),10),h=parseInt(d.css("margin-left"),10);isNaN(g)&&(g=0),isNaN(h)&&(h=0),b.top+=g,b.left+=h,a.offset.setOffset(d[0],a.extend({using:function(a){d.css({top:Math.round(a.top),left:Math.round(a.left)})}},b),0),d.addClass("in");var i=d[0].offsetWidth,j=d[0].offsetHeight;"top"==c&&j!=f&&(b.top=b.top+f-j);var k=this.getViewportAdjustedDelta(c,b,i,j);k.left?b.left+=k.left:b.top+=k.top;var l=/top|bottom/.test(c),m=l?2*k.left-e+i:2*k.top-f+j,n=l?"offsetWidth":"offsetHeight";d.offset(b),this.replaceArrow(m,d[0][n],l)},c.prototype.replaceArrow=function(a,b,c){this.arrow().css(c?"left":"top",50*(1-a/b)+"%").css(c?"top":"left","")},c.prototype.setContent=function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},c.prototype.hide=function(b){function d(){"in"!=e.hoverState&&f.detach(),e.$element&&e.$element.removeAttr("aria-describedby").trigger("hidden.bs."+e.type),b&&b()}var e=this,f=a(this.$tip),g=a.Event("hide.bs."+this.type);if(this.$element.trigger(g),!g.isDefaultPrevented())return f.removeClass("in"),a.support.transition&&f.hasClass("fade")?f.one("bsTransitionEnd",d).emulateTransitionEnd(c.TRANSITION_DURATION):d(),this.hoverState=null,this},c.prototype.fixTitle=function(){var a=this.$element;(a.attr("title")||"string"!=typeof a.attr("data-original-title"))&&a.attr("data-original-title",a.attr("title")||"").attr("title","")},c.prototype.hasContent=function(){return this.getTitle()},c.prototype.getPosition=function(b){b=b||this.$element;var c=b[0],d="BODY"==c.tagName,e=c.getBoundingClientRect();null==e.width&&(e=a.extend({},e,{width:e.right-e.left,height:e.bottom-e.top}));var f=window.SVGElement&&c instanceof window.SVGElement,g=d?{top:0,left:0}:f?null:b.offset(),h={scroll:d?document.documentElement.scrollTop||document.body.scrollTop:b.scrollTop()},i=d?{width:a(window).width(),height:a(window).height()}:null;return a.extend({},e,h,i,g)},c.prototype.getCalculatedOffset=function(a,b,c,d){return"bottom"==a?{top:b.top+b.height,left:b.left+b.width/2-c/2}:"top"==a?{top:b.top-d,left:b.left+b.width/2-c/2}:"left"==a?{top:b.top+b.height/2-d/2,left:b.left-c}:{top:b.top+b.height/2-d/2,left:b.left+b.width}},c.prototype.getViewportAdjustedDelta=function(a,b,c,d){var e={top:0,left:0};if(!this.$viewport)return e;var f=this.options.viewport&&this.options.viewport.padding||0,g=this.getPosition(this.$viewport);if(/right|left/.test(a)){var h=b.top-f-g.scroll,i=b.top+f-g.scroll+d;h<g.top?e.top=g.top-h:i>g.top+g.height&&(e.top=g.top+g.height-i)}else{var j=b.left-f,k=b.left+f+c;j<g.left?e.left=g.left-j:k>g.right&&(e.left=g.left+g.width-k)}return e},c.prototype.getTitle=function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||("function"==typeof c.title?c.title.call(b[0]):c.title)},c.prototype.getUID=function(a){do a+=~~(1e6*Math.random());while(document.getElementById(a));return a},c.prototype.tip=function(){if(!this.$tip&&(this.$tip=a(this.options.template),1!=this.$tip.length))throw new Error(this.type+" `template` option must consist of exactly 1 top-level element!");return this.$tip},c.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},c.prototype.enable=function(){this.enabled=!0},c.prototype.disable=function(){this.enabled=!1},c.prototype.toggleEnabled=function(){this.enabled=!this.enabled},c.prototype.toggle=function(b){var c=this;b&&(c=a(b.currentTarget).data("bs."+this.type),c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c))),b?(c.inState.click=!c.inState.click,c.isInStateTrue()?c.enter(c):c.leave(c)):c.tip().hasClass("in")?c.leave(c):c.enter(c)},c.prototype.destroy=function(){var a=this;clearTimeout(this.timeout),this.hide(function(){a.$element.off("."+a.type).removeData("bs."+a.type),a.$tip&&a.$tip.detach(),a.$tip=null,a.$arrow=null,a.$viewport=null,a.$element=null})};var d=a.fn.tooltip;a.fn.tooltip=b,a.fn.tooltip.Constructor=c,a.fn.tooltip.noConflict=function(){return a.fn.tooltip=d,this}}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.popover"),f="object"==typeof b&&b;!e&&/destroy|hide/.test(b)||(e||d.data("bs.popover",e=new c(this,f)),"string"==typeof b&&e[b]())})}var c=function(a,b){this.init("popover",a,b)};if(!a.fn.tooltip)throw new Error("Popover requires tooltip.js");c.VERSION="3.3.7",c.DEFAULTS=a.extend({},a.fn.tooltip.Constructor.DEFAULTS,{placement:"right",trigger:"click",content:"",template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),c.prototype=a.extend({},a.fn.tooltip.Constructor.prototype),c.prototype.constructor=c,c.prototype.getDefaults=function(){return c.DEFAULTS},c.prototype.setContent=function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content").children().detach().end()[this.options.html?"string"==typeof c?"html":"append":"text"](c),a.removeClass("fade top bottom left right in"),a.find(".popover-title").html()||a.find(".popover-title").hide()},c.prototype.hasContent=function(){return this.getTitle()||this.getContent()},c.prototype.getContent=function(){var a=this.$element,b=this.options;return a.attr("data-content")||("function"==typeof b.content?b.content.call(a[0]):b.content)},c.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".arrow")};var d=a.fn.popover;a.fn.popover=b,a.fn.popover.Constructor=c,a.fn.popover.noConflict=function(){return a.fn.popover=d,this}}(jQuery),+function(a){"use strict";function b(c,d){this.$body=a(document.body),this.$scrollElement=a(a(c).is(document.body)?window:c),this.options=a.extend({},b.DEFAULTS,d),this.selector=(this.options.target||"")+" .nav li > a",this.offsets=[],this.targets=[],this.activeTarget=null,this.scrollHeight=0,this.$scrollElement.on("scroll.bs.scrollspy",a.proxy(this.process,this)),this.refresh(),this.process()}function c(c){return this.each(function(){var d=a(this),e=d.data("bs.scrollspy"),f="object"==typeof c&&c;e||d.data("bs.scrollspy",e=new b(this,f)),"string"==typeof c&&e[c]()})}b.VERSION="3.3.7",b.DEFAULTS={offset:10},b.prototype.getScrollHeight=function(){return this.$scrollElement[0].scrollHeight||Math.max(this.$body[0].scrollHeight,document.documentElement.scrollHeight)},b.prototype.refresh=function(){var b=this,c="offset",d=0;this.offsets=[],this.targets=[],this.scrollHeight=this.getScrollHeight(),a.isWindow(this.$scrollElement[0])||(c="position",d=this.$scrollElement.scrollTop()),this.$body.find(this.selector).map(function(){var b=a(this),e=b.data("target")||b.attr("href"),f=/^#./.test(e)&&a(e);return f&&f.length&&f.is(":visible")&&[[f[c]().top+d,e]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},b.prototype.process=function(){var a,b=this.$scrollElement.scrollTop()+this.options.offset,c=this.getScrollHeight(),d=this.options.offset+c-this.$scrollElement.height(),e=this.offsets,f=this.targets,g=this.activeTarget;if(this.scrollHeight!=c&&this.refresh(),b>=d)return g!=(a=f[f.length-1])&&this.activate(a);if(g&&b<e[0])return this.activeTarget=null,this.clear();for(a=e.length;a--;)g!=f[a]&&b>=e[a]&&(void 0===e[a+1]||b<e[a+1])&&this.activate(f[a])},b.prototype.activate=function(b){
 this.activeTarget=b,this.clear();var c=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',d=a(c).parents("li").addClass("active");d.parent(".dropdown-menu").length&&(d=d.closest("li.dropdown").addClass("active")),d.trigger("activate.bs.scrollspy")},b.prototype.clear=function(){a(this.selector).parentsUntil(this.options.target,".active").removeClass("active")};var d=a.fn.scrollspy;a.fn.scrollspy=c,a.fn.scrollspy.Constructor=b,a.fn.scrollspy.noConflict=function(){return a.fn.scrollspy=d,this},a(window).on("load.bs.scrollspy.data-api",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);c.call(b,b.data())})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.tab");e||d.data("bs.tab",e=new c(this)),"string"==typeof b&&e[b]()})}var c=function(b){this.element=a(b)};c.VERSION="3.3.7",c.TRANSITION_DURATION=150,c.prototype.show=function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.data("target");if(d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),!b.parent("li").hasClass("active")){var e=c.find(".active:last a"),f=a.Event("hide.bs.tab",{relatedTarget:b[0]}),g=a.Event("show.bs.tab",{relatedTarget:e[0]});if(e.trigger(f),b.trigger(g),!g.isDefaultPrevented()&&!f.isDefaultPrevented()){var h=a(d);this.activate(b.closest("li"),c),this.activate(h,h.parent(),function(){e.trigger({type:"hidden.bs.tab",relatedTarget:b[0]}),b.trigger({type:"shown.bs.tab",relatedTarget:e[0]})})}}},c.prototype.activate=function(b,d,e){function f(){g.removeClass("active").find("> .dropdown-menu > .active").removeClass("active").end().find('[data-toggle="tab"]').attr("aria-expanded",!1),b.addClass("active").find('[data-toggle="tab"]').attr("aria-expanded",!0),h?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu").length&&b.closest("li.dropdown").addClass("active").end().find('[data-toggle="tab"]').attr("aria-expanded",!0),e&&e()}var g=d.find("> .active"),h=e&&a.support.transition&&(g.length&&g.hasClass("fade")||!!d.find("> .fade").length);g.length&&h?g.one("bsTransitionEnd",f).emulateTransitionEnd(c.TRANSITION_DURATION):f(),g.removeClass("in")};var d=a.fn.tab;a.fn.tab=b,a.fn.tab.Constructor=c,a.fn.tab.noConflict=function(){return a.fn.tab=d,this};var e=function(c){c.preventDefault(),b.call(a(this),"show")};a(document).on("click.bs.tab.data-api",'[data-toggle="tab"]',e).on("click.bs.tab.data-api",'[data-toggle="pill"]',e)}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.affix"),f="object"==typeof b&&b;e||d.data("bs.affix",e=new c(this,f)),"string"==typeof b&&e[b]()})}var c=function(b,d){this.options=a.extend({},c.DEFAULTS,d),this.$target=a(this.options.target).on("scroll.bs.affix.data-api",a.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",a.proxy(this.checkPositionWithEventLoop,this)),this.$element=a(b),this.affixed=null,this.unpin=null,this.pinnedOffset=null,this.checkPosition()};c.VERSION="3.3.7",c.RESET="affix affix-top affix-bottom",c.DEFAULTS={offset:0,target:window},c.prototype.getState=function(a,b,c,d){var e=this.$target.scrollTop(),f=this.$element.offset(),g=this.$target.height();if(null!=c&&"top"==this.affixed)return e<c&&"top";if("bottom"==this.affixed)return null!=c?!(e+this.unpin<=f.top)&&"bottom":!(e+g<=a-d)&&"bottom";var h=null==this.affixed,i=h?e:f.top,j=h?g:b;return null!=c&&e<=c?"top":null!=d&&i+j>=a-d&&"bottom"},c.prototype.getPinnedOffset=function(){if(this.pinnedOffset)return this.pinnedOffset;this.$element.removeClass(c.RESET).addClass("affix");var a=this.$target.scrollTop(),b=this.$element.offset();return this.pinnedOffset=b.top-a},c.prototype.checkPositionWithEventLoop=function(){setTimeout(a.proxy(this.checkPosition,this),1)},c.prototype.checkPosition=function(){if(this.$element.is(":visible")){var b=this.$element.height(),d=this.options.offset,e=d.top,f=d.bottom,g=Math.max(a(document).height(),a(document.body).height());"object"!=typeof d&&(f=e=d),"function"==typeof e&&(e=d.top(this.$element)),"function"==typeof f&&(f=d.bottom(this.$element));var h=this.getState(g,b,e,f);if(this.affixed!=h){null!=this.unpin&&this.$element.css("top","");var i="affix"+(h?"-"+h:""),j=a.Event(i+".bs.affix");if(this.$element.trigger(j),j.isDefaultPrevented())return;this.affixed=h,this.unpin="bottom"==h?this.getPinnedOffset():null,this.$element.removeClass(c.RESET).addClass(i).trigger(i.replace("affix","affixed")+".bs.affix")}"bottom"==h&&this.$element.offset({top:g-b-f})}};var d=a.fn.affix;a.fn.affix=b,a.fn.affix.Constructor=c,a.fn.affix.noConflict=function(){return a.fn.affix=d,this},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var c=a(this),d=c.data();d.offset=d.offset||{},null!=d.offsetBottom&&(d.offset.bottom=d.offsetBottom),null!=d.offsetTop&&(d.offset.top=d.offsetTop),b.call(c,d)})})}(jQuery);</script>
  </head>
  <body id="page-top" class="html-doc">
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand doc-title" href="#page-top">Documentation </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
          
        </div><!--/.nav-collapse -->
      </div>
    </div>
    <div id="documentation-container" class="container">
      <div class="row">
        <div class="col-md-3">
          <div class="nav-container">
            <div class="nav-inner" id="scroll-spy" style="width: min-content; overflow: auto; top: 60px; bottom: 0; padding 10px 0 10px 0;">
              <span class="toc"></span>
              <ul class="nav"><li class="active"><a href="https://github.com/littlevgl/lvgl/wiki">Home</a></li><li><a href="#Porting">Porting</a></li><li><a href="#PC-simulator">PC simulator</a></li><li><a href="#Objects">Objects</a></li><li><a href="#Styles">Styles</a></li><li><a href="#Input-devices">Input devices</a></li><li><a href="#Colors">Colors</a></li><li><a href="#Fonts">Fonts</a></li><li><a href="#Drawing">Drawing</a></li><li><a href="#Animations">Animations</a> </li><li><a href="#Coding-Style-Guide">Coding Style Guide</a></li><li><a href="#Object-types">Object types</a><ul class="nav"><li><a href="#Arc">Arc (lv_arc)</a></li><li><a href="#Bar">Bar (lv_bar)</a></li><li><a href="#Base-object">Base object (lv_obj)</a></li><li><a href="#Button">Button (lv_btn)</a></li><li><a href="#Button-matrix">Button matrix (lv_btnm)</a></li><li><a href="#Calendar">Calendar (lv_calendar)</a></li><li><a href="#Chart">Chart (lv_chart)</a></li><li><a href="#Check-box">Check box (lv_cb)</a></li><li><a href="#Container">Container (lv_cont)</a></li><li><a href="#Drop-down-list">Drop down list (lv_ddlist)</a></li><li><a href="#Gauge">Gauge (lv_gauge)</a></li><li><a href="#Image">Image (lv_img)</a></li><li><a href="#Image-button">Image button (lv_imgbtn)</a></li><li><a href="#Keyboard">Keyboard (lv_kb)</a></li><li><a href="#List">List (lv_list)</a></li><li><a href="#LED">LED (lv_led)</a></li><li><a href="#Line">Line (lv_line)</a></li><li><a href="#Line-meter">Line meter (lv_lmeter)</a></li><li><a href="#Label">Label (lv_label)</a></li><li><a href="#Message-box">Message box (lv_mbox)</a></li><li><a href="#Page">Page (lv_page)</a></li><li><a href="#Preloader">Preloader (lv_preload)</a></li><li><a href="#Roller">Roller (lv_roller)</a></li><li><a href="#Slider">Slider (lv_slider)</a></li><li><a href="#Spinbox">Spinbox (lv_spinbox)</a></li><li><a href="#Switch">Switch (lv_sw)</a></li><li><a href="#Tab-view">Tab view (lv_tabview)</a></li><li><a href="#Text-area">Text area (lv_ta)</a></li><li><a href="#Window">Window (lv_window)</a></li></ul></li></ul>
              
            </div>
          </div>
        </div>


        <div class="col-md-9">
 <p class="page" id="Porting"></p><h1>Porting</h1>
 <p><em>Written for v5.2</em></p>
 <h2 id="system-architecture">System architecture</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/sys.png" />  </p>
 <p><strong>Application</strong>  </p>
 <p>Your application which creates the GUI and handles the specific tasks.</p>
 <p><strong>LittlevGL</strong>  </p>
 <p>The graphics library itself. Your application can communicate with the library to create a GUI. It contains a HAL (Hardware Abstraction Layer) interface to register your display and input device drivers. </p>
 <p><strong>Driver</strong>  </p>
 <p>Besides your specific drivers, it contains functions to drive your display, optionally to a GPU and to read the touchpad or buttons. </p>
 <hr>
 <p>There are <strong>two typical hardware set-ups</strong> depending on the MCU has an LCD/TFT driver periphery or not. In both cases, a frame buffer will be required to store the current image of the screen. </p>
 <p><strong>MCU with TFT/LCD driver</strong>  </p>
 <p>If your MCU has a TFT/LCD driver periphery then you can connect a display directly via RGB interface. In this case, the frame buffer can be in the internal RAM (if the MCU has enough RAM) or in the external RAM (if the MCU has a memory interface).  </p>
 <p><strong>External display controller</strong>  </p>
 <p>If the MCU doesn&#39;t have TFT/LCD driver then an external display controller (E.g. SSD1963, SSD1306, ILI9341) has to be used. In this case, the MCU can communicate with the display controller via Parallel port, SPI or sometimes I2C. The frame buffer is usually located in the display controller which saves a lot of RAM for the MCU. </p>
 <hr>
 <h2 id="requirements">Requirements</h2>
 <ul>
 <li><strong>16, 32 or 64 bit</strong> microcontroller or processor</li>
 <li><strong>16 MHz</strong> clock speed</li>
 <li><strong>8 kB RAM</strong> for static data and <strong>&gt;2 KB RAM</strong> for dynamic data (graphical objects)</li>
 <li><strong>64 kB program memory</strong> (flash)</li>
 <li><strong>Optionally ~1/10 screen sized memory</strong> for internal buffering (at 240 × 320, 16 bit colors it means 15 kB)</li>
 </ul>
 <p>The LittlevGL is designed to be highly portable and to not use any <strong>external resources</strong>:</p>
 <ul>
 <li>No external RAM required (but supported)</li>
 <li>No float numbers are used</li>
 <li>No GPU needed (but supported)</li>
 <li>Only a single frame buffer is required located in:<ul>
 <li>Internal RAM or</li>
 <li>External RAM or</li>
 <li>External display controller&#39;s memory</li>
 </ul>
 </li>
 </ul>
 <p>If you would like to <strong>reduce</strong> the required <strong>hardware resources</strong> you can:</p>
 <ul>
 <li>Disable the unused object types to save RAM and ROM</li>
 <li>Change the size of the graphical buffer to save RAM</li>
 <li>Use simpler styles to reduce the rendering time</li>
 </ul>
 <hr>
 <h2 id="project-set-up">Project set-up</h2>
 <h3 id="get-the-library">Get the library</h3>
 <p>The Littlev Graphics Library is available on GitHub: <a href="https://github.com/littlevgl/lvgl">https://github.com/littlevgl/lvgl</a>. You can clone or download the latest version of the library from here or you can use the <a href="https://littlevgl.com/download">Download</a> page as well. </p>
 <p>The graphics library is the <strong>lvgl</strong> directory which should be copied into your project.</p>
 <h3 id="config-file">Config file</h3>
 <p>There is a configuration header file for LittlevGL: <strong>lv_conf.h</strong>. It sets the library&#39;s basic behavior in compile time,  disable unused modules and features and adjust the size of memory buffers etc.</p>
 <p>Copy _lvgl/lv_conf_templ.h_ next to the <em>lvgl</em> directory and rename it to _lv_conf.h_. Open the file and delete the first <em>#if</em> and the last <em>#endif</em> to enable the content. In the config file comments explain the meaning of the options. Check at least these three config options and modify them according to your hardware:</p>
 <ol>
 <li><strong>LV_HOR_RES</strong> Your display&#39;s horizontal resolution</li>
 <li><strong>LV_VER_RES</strong> Your display&#39;s vertical resolution</li>
 <li><strong>LV_COLOR_PETH</strong> 8 for (RG332), 16 for (RGB565) or 32 for (RGB888 and ARGB8888). </li>
 </ol>
 <h3 id="initialization">Initialization</h3>
 <p>In order to use the graphics library you have to initialize it and the other components too. To order of the initialization is:</p>
 <ol>
 <li>Call _lv_init()_</li>
 <li>Initialize your drivers</li>
 <li>Register the display and input devices drivers in LittlevGL. (see below) </li>
 </ol>
 <hr>
 <h2 id="porting-the-library">Porting the library</h2>
 <p>To adopt LittlevGL into your project firstly you have to provide some functions and register them in the graphics library. </p>
 <h3 id="display-interface">Display interface</h3>
 <p>To set up a display an <strong>lv_disp_drv_t</strong> variable has to be initialized:</p>
 <pre class="hljs"><span class="hljs-keyword">lv_disp_drv_t</span> disp_drv;
 lv_disp_drv_init(&amp;disp_drv); <span class="hljs-comment">/*Basic initialization*/</span>
 disp_drv. ...=...; <span class="hljs-comment">/*Initialize the fields here. See below.*/</span>
 disp_drv_register(&amp;disp_drv); <span class="hljs-comment">/*Register the driver in LittlevGL*/</span></pre><p>You can configure the driver for different operation modes. To learn more about the drawing modes visit <a href="https://github.com/littlevgl/lvgl/wiki/Basics#Drawing-and-rendering">Drawing and rendering</a>.</p>
 <h4 id="internal-buffering-vdb-">Internal buffering (VDB)</h4>
 <p>The graphics library works with an internal buffering mechanism to create advances graphics features with only one frame buffer. The internal buffer is called VDB (Virtual Display Buffer) and its size can be adjusted in lv_conf.h with _LV_VDB_SIZE_. When _LV_VDB_SIZE_ &gt; 0 then the internal buffering is used and you have to provide a function which flushes the buffer&#39;s content to your display:</p>
 <pre class="hljs">disp_drv.disp_flush = my_disp_flush;
 ...
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">my_disp_flush</span><span class="hljs-params">(<span class="hljs-keyword">int32_t</span> x1, <span class="hljs-keyword">int32_t</span> y1, <span class="hljs-keyword">int32_t</span> x2, <span class="hljs-keyword">int32_t</span> y2, <span class="hljs-keyword">const</span> <span class="hljs-keyword">lv_color_t</span>* color_p)</span>
 </span>{
    <span class="hljs-comment">/*TODO Copy 'color_p' to the specified area*/</span>
    <span class="hljs-comment">/*Call 'lv_fluh_ready()' when ready*/</span>lv_flush_ready();
 }</pre><p>In the flush function, you can use DMA or any hardware to do the flushing in the background, but when the flushing is ready you have to 
 call </p>
 <pre class="hljs">lv_flush_ready();</pre><h5 id="hardware-acceleration-gpu-">Hardware acceleration (GPU)</h5>
 <p>First of all using GPU is totally optional. But if your MCU supports graphical acceleration then you can use it. The _mem_blend_ and _mem_fill_ fields of the display driver is used to interface with a GPU. 
 The GPU related functions can be used only if internal buffering (VDB) is enabled.</p>
 <pre class="hljs">disp_drv.mem_blend = my_mem_blend;     <span class="hljs-comment">/*Blends two color arrays using opacity*/</span>
 disp_drv.mem_fill = my_mem_fill;       <span class="hljs-comment">/*Fills an array with a color*/</span>
 ...
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">my_mem_blend</span><span class="hljs-params">(<span class="hljs-keyword">lv_color_t</span>* dest, <span class="hljs-keyword">constlv_color_t</span>* src, <span class="hljs-keyword">uint32_t</span> length, <span class="hljs-keyword">lv_opa_t</span> opa)</span>
 </span>{
  <span class="hljs-comment">/*TODO Copy 'src' to 'dest' but blend it with 'opa' alpha */</span>
 }

 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">my_mem_fill</span><span class="hljs-params">(<span class="hljs-keyword">lv_color_t</span>* dest, <span class="hljs-keyword">uint32_t</span> length, <span class="hljs-keyword">lv_color_t</span> color)</span>
 </span>{
  <span class="hljs-comment">/*TODO Fill 'length' pixels in 'dest' with 'color'*/</span>
 }</pre><h5 id="unbuffered-drawing">Unbuffered drawing</h5>
 <p>It is possible to draw directly to a frame buffer when the internal buffering is disabled (LV_VDB_SIZE = 0).</p>
 <pre class="hljs">disp_drv.disp_fill = my_disp_fill;<span class="hljs-comment">/*Fill an area in the frame buffer*/</span>
 disp_drv.disp_map = my_disp_map;<span class="hljs-comment">/*Copy a color_map (e.g. image) into the frame buffer*/</span>
 ...
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">my_disp_map</span><span class="hljs-params">(<span class="hljs-keyword">int32_t</span> x1,<span class="hljs-keyword">int32_t</span> y1,<span class="hljs-keyword">int32_t</span> x2,<span class="hljs-keyword">int32_t</span> y2,<span class="hljs-keyword">constlv_color_t</span>* color_p)</span>
 </span>{
  <span class="hljs-comment">/*TODO Copy 'color_p' to the specified area*/</span>
 }

 voidmy_disp_fill(<span class="hljs-keyword">int32_t</span> x1,<span class="hljs-keyword">int32_t</span> y1,<span class="hljs-keyword">int32_t</span> x2,<span class="hljs-keyword">int32_t</span> y2,<span class="hljs-keyword">lv_color_t</span> color)
 {
  <span class="hljs-comment">/*TODO Fill the specified area with 'color'*/</span>
 }</pre><p>Keep in mind this way during refresh some artifacts can be visible because the layers are drawn after each other. And some high-level graphics features like anti-aliasing, opacity or shadows aren&#39;t available in this configuration. </p>
 <p>If you use an external display controller which supports accelerated filling (e.g. RA8876) then you can use this feature in _disp_fill()_</p>
 <h3 id="input-device-interface">Input device interface</h3>
 <p>To set up an input device an <strong>lv_indev_drv_t</strong> variable has to be initialized:</p>
 <pre class="hljs"><span class="hljs-keyword">lv_indev_drv_t</span> indev_drv;lv_indev_drv_init(&amp;indev_drv);  <span class="hljs-comment">/*Basic initialization*/</span>
 indev_drv.type =...<span class="hljs-comment">/*See below.*/</span>
 indev_drv.read =...<span class="hljs-comment">/*See below.*/</span>
 lv_indev_drv_register(&amp;indev_drv);  <span class="hljs-comment">/*Register the driver in LittlevGL*/</span></pre><p><strong>type</strong> can be </p>
 <ul>
 <li>LV_INDEV_TYPE_POINTER: touchpad or mouse</li>
 <li>LV_INDEV_TYPE_KEYPAD: keyboard</li>
 <li>LV_INDEV_TYPE_ENCODER: left, right, push</li>
 <li>LV_INDEV_TYPE_BUTTON: external buttons pressing the screen</li>
 </ul>
 <p><strong>read</strong> is a function pointer which will be called periodically to report the current state of an input device. It can also buffer data and return <em>false</em> when no more data to be read or <em>true</em> when the buffer is not empty.</p>
 <p>To learn more about input devices visit <a href="https://littlevgl.com/basics#input-devices">Input devices</a></p>
 <h4 id="touchpad-mouse-or-any-pointer">Touchpad, mouse or any pointer</h4>
 <pre class="hljs">indev_drv.type = LV_INDEV_TYPE_POINTER;
 indev_drv.read = my_input_read;</pre><p>The read function should look like this:</p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">bool</span> <span class="hljs-title">my_input_read</span><span class="hljs-params">(<span class="hljs-keyword">lv_indev_data_t</span>*data)</span>
 </span>{
    data-&gt;point.x = touchpad_x;
    data-&gt;point.y = touchpad_y;
    data-&gt;state = LV_INDEV_STATE_PR <span class="hljs-keyword">or</span> LV_INDEV_STATE_REL;
    <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-comment">/*No buffering so no more data read*/</span>
 }</pre><blockquote>
 <p><strong>IMPORTANT NOTE:</strong> Touchpad drivers must return the last X/Y coordinates even when the state is <code>LV_INDEV_STATE_REL</code>.</p>
 </blockquote>
 <h4 id="keypad-or-keyboard">Keypad or keyboard</h4>
 <pre class="hljs">indev_drv.type = LV_INDEV_TYPE_KEYPAD;
 indev_drv.read = my_input_read;</pre><p>The read function should look like this:</p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">bool</span> <span class="hljs-title">keyboard_read</span><span class="hljs-params">(<span class="hljs-keyword">lv_indev_data_t</span>*data)</span></span>{
  data-&gt;key = last_key();
  <span class="hljs-keyword">if</span>(key_pressed()){
    data-&gt;state = LV_INDEV_STATE_PR;
  }
  <span class="hljs-keyword">else</span>{
    data-&gt;state = LV_INDEV_STATE_REL;
  }
  <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-comment">/*No buffering so no more data read*/</span>
 }</pre><p>To use a keyboard:</p>
 <ul>
 <li>Register a <em>read</em> function (like above) with _LV_INDEV_TYPE_KEYPAD_ type.</li>
 <li>_USE_LV_GROUP_ has to be enabled in _lv_conf.h_</li>
 <li>An object group has to be created: _lv_group_create()_ and objects have to be added: _lv_group_add_obj()_</li>
 <li>The created group has to be assigned to an input device: _lv_indev_set_group(my_indev, group1);_</li>
 <li>Use _LV_GROUP_KEY_..._ to navigate among the objects in the group</li>
 </ul>
 <p>Visit <a href="https://github.com/littlevgl/lvgl/wiki/Input-devices#touchpad-less-navigation">Touchpad-less navigation</a> to learn more.</p>
 <h4 id="encoder">Encoder</h4>
 <pre class="hljs">indev_drv.type = LV_INDEV_TYPE_ENCODER;
 indev_drv.read = my_input_read;</pre><p>The read function should look like this:</p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">bool</span> <span class="hljs-title">encoder_read</span><span class="hljs-params">(<span class="hljs-keyword">lv_indev_data_t</span>*data)</span></span>{
  data-&gt;enc_diff = enc_get_new_moves();
  <span class="hljs-keyword">if</span>(enc_pressed()){
    data-&gt;state = LV_INDEV_STATE_PR;
  }
  <span class="hljs-keyword">else</span>{
    data-&gt;state = LV_INDEV_STATE_REL;
  }

  <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-comment">/*No buffering so no more data read*/</span>
 }</pre><ul>
 <li>To use an <code>ENCODER</code>, similarly to the <code>KEYPAD</code>, the objects should be added to groups</li>
 </ul>
 <h4 id="button">Button</h4>
 <pre class="hljs">indev_drv.type = LV_INDEV_TYPE_BUTTON;
 indev_drv.read = my_input_read;</pre><p>The read function should look like this:</p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">bool</span> <span class="hljs-title">button_read</span><span class="hljs-params">(<span class="hljs-keyword">lv_indev_data_t</span>*data)</span></span>{
    <span class="hljs-keyword">static</span> <span class="hljs-keyword">uint32_t</span> last_btn = <span class="hljs-number">0</span>;   <span class="hljs-comment">/*Store the last pressed button*/</span> 
    <span class="hljs-keyword">int</span> btn_pr = my_btn_read();     <span class="hljs-comment">/*Get the ID (0,1,2...) of the pressed button*/</span>
    <span class="hljs-keyword">if</span>(btn_pr &gt;= <span class="hljs-number">0</span>) {               <span class="hljs-comment">/*Is there a button press?*/</span>  
       last_btn = btn_pr;           <span class="hljs-comment">/*Save the ID of the pressed button*/</span>
       data-&gt;state = LV_INDEV_STATE_PR;  <span class="hljs-comment">/*Set the pressed state*/</span>
    } <span class="hljs-keyword">else</span> {
       data-&gt;state = LV_INDEV_STATE_REL; <span class="hljs-comment">/*Set the released state*/</span>
    }

    data-&gt;btn = last_btn;            <span class="hljs-comment">/*Set the last button*/</span>         

    <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;                    <span class="hljs-comment">/*No buffering so no more data read*/</span>
 }</pre><ul>
 <li>The buttons need to be assigned to pixels on the screen using <code>lv_indev_set_button_points(indev, points_array)</code>. Where _points_array_ look like <code>const lv_point_t points_array[] = {{12,30},{60,90}, ...}</code>   </li>
 </ul>
 <h3 id="tick-interface">Tick interface</h3>
 <p>The LittlevGL uses a system tick. Call the <code>lv_tick_inc(tick_period)</code> function periodically and tell the call period in milliseconds. For example if called in every milliseconds: <code>lv_tick_inc(1)</code>.</p>
 <h3 id="task-handling">Task handling</h3>
 <p>To handle the tasks of LittlevGL you need to call <code>lv_task_handler()</code> periodically in one of the following:</p>
 <ul>
 <li><em>while(1)</em> of <em>main()</em> function </li>
 <li>timer interrupt periodically</li>
 <li>an OS task periodically</li>
 </ul>
 <p>The timing is not critical but it should be about 5 milliseconds to keep the system responsive.</p>
 <p>Example:</p>
 <pre class="hljs"><span class="hljs-keyword">while</span>(<span class="hljs-number">1</span>) {
  lv_task_handler();
  my_delay_ms(<span class="hljs-number">5</span>);
 }</pre><p>The MCU can go to <strong>sleep</strong> when no user input happens. In this case the main <code>while(1)</code> should look like this:</p>
 <pre class="hljs"><span class="hljs-keyword">while</span>(<span class="hljs-number">1</span>) {
  <span class="hljs-comment">/*Normal operation in 1 sec*/</span> 
  <span class="hljs-keyword">if</span>(lv_indev_get_inactive_time(<span class="hljs-literal">NULL</span>) &lt; <span class="hljs-number">1000</span>) {    
    lv_task_handler();
  } 
  <span class="hljs-comment">/*Sleep after 1 sec inactivity*/</span>
  <span class="hljs-keyword">else</span> {                                         
    timer_stop();               <span class="hljs-comment">/*Stop the timer where lv_tick_inc() is called*/</span>
    sleep();            <span class="hljs-comment">/*Sleep the MCU*/</span>
  }
  my_delay_ms(<span class="hljs-number">5</span>);
 }</pre><p>You should also add these lines to your input device read function if a press happens:</p>
 <pre class="hljs"><span class="hljs-comment">/*Force task execution on wake-up*/</span>
 lv_tick_inc(LV_REFR_PERIOD);
 timer_start();               <span class="hljs-comment">/*Restart the timer where lv_tick_inc() is called*/</span>
 lv_task_handler();</pre><p>In addition to <code>lv_indev_get_inactive_time()</code> you can check <code>lv_anim_count_running()</code> to see if every animations are finished.</p>
 <h3 id="using-with-an-operating-system">Using with an operating system</h3>
 <p>LittlevGL is not thread-safe by default. Despite it, it&#39;s quite simple to use LittlevGL inside an operating system. </p>
 <p>The <strong>simple scenario</strong> is to don&#39;t use the operating system&#39;s tasks but use <code>lv_task</code>s. An _lv_task_ is a function called periodically in <code>lv_task_handler</code>. In the _lv_task_ you can get the state of the sensors, buffers etc and call LittlevGL functions to refresh the GUI. To create an _lv_task_ use: <code>lv_task_create(my_func, period_ms, LV_TASK_PRIO_LOWEST/LOW/MID/HIGH/HIGHEST, custom_ptr)</code></p>
 <p>If you need to <strong>use other task or threads</strong> you need one mutex which should be taken before calling <code>lv_task_handler</code> and released after it. In addition, you have to use to that mutex in other tasks and threads around every LittlevGL (<code>lv_...</code>) related code. This way you can use LittlevGL in a real multitasking environment. Just use a mutex to avoid concurrent calling of LittlevGL functions.</p>
 <h3 id="porting-example">Porting example</h3>
 <p>Here you will find an example porting code: <a href="https://github.com/littlevgl/lv_examples/blob/beta/lv_tutorial/0_porting/lv_tutorial_porting.c">Porting tutorial</a>.</p>
 <p class="page" id="PC-simulator"></p><h1>PC simulator</h1>
 <p><em>Written for v5.1</em></p>
 <p>You can try out the Littlev Graphics Library <strong>using only your PC</strong> without any development board. Write a code, run it on the PC and see the result on the monitor. It is cross-platform: Windows, Linux and OSX are supported!</p>
 <ul>
 <li><p>Needs only few minutes setup</p>
 </li>
 <li><p>Costs $0. No PCB cost and no pay for any software</p>
 </li>
 <li><p>A TFT display is simulated and shown on the monitor of your PC</p>
 </li>
 <li><p>The touch pad is replaced by your mouse</p>
 </li>
 <li><p>The written code is portable, you can simply copy it when using an embedded hardware</p>
 </li>
 </ul>
 <h4 id="install-eclipse-cdt">Install Eclipse CDT</h4>
 <p>Eclipse CDT is C/C++ IDE. You can use other IDEs as well but in this tutorial the configuration for Eclipse CDT is shown.</p>
 <p>Eclipse is a Java based software therefore be sure <strong>Java Runtime Environment</strong> is installed on your system.   </p>
 <p>On Debian-based distros (e.g. Ubuntu): <code>sudo apt-get install default-jre</code></p>
 <p>You can download Eclipse&#39;s CDT from: <a href="http://www.eclipse.org/downloads/">https://eclipse.org/cdt/</a>. Start the installer and choose <em>Eclipse CDT</em> from the list.</p>
 <h4 id="install-sdl-2">Install SDL 2</h4>
 <p>The PC simulator uses the <a href="https://www.libsdl.org/download-2.0.php">SDL 2</a> cross platform library to simulate a TFT display and a touch pad. </p>
 <h5 id="linux">Linux</h5>
 <p>On <strong>Linux</strong> you can easily install SDL2 using a terminal:</p>
 <ol>
 <li>Find the current version of SDL2: <code>apt-cache search libsdl2 (e.g. libsdl2-2.0-0)</code></li>
 <li>Install SDL2: <code>sudo apt-get install libsdl2-2.0-0</code> (replace with the found version)</li>
 <li>Install SDL2 development package: <code>sudo apt-get install libsdl2-dev</code></li>
 <li>If build essentials are not installed yet: <code>sudo apt-get install build-essential</code></li>
 </ol>
 <h5 id="windows">Windows</h5>
 <p>If you are using <strong>Windows</strong> firstly you need to install MinGW (<a href="http://mingw-w64.org/doku.php/download">64 bit version</a>). After it do the following steps to add SDL2:</p>
 <ol>
 <li>Download the development libraries of SDL.<br>Go to <a href="https://www.libsdl.org/download-2.0.php">https://www.libsdl.org/download-2.0.php</a> and download <em>Development Libraries: SDL2-devel-2.0.5-mingw.tar.gz</em></li>
 <li>Uncompress the file and go to _x86_64-w64-mingw32_ directory (for 64 bit MinGW) or to <em>i686-w64-mingw32</em> (for 32 bit MinGW)</li>
 <li>Copy _...<em>mingw32/include/SDL2</em> folder to _C:/MinGW/.../x86_64-w64-mingw32/include_</li>
 <li>Copy _...<em>mingw32/lib/</em> content to _C:/MinGW/.../x86_64-w64-mingw32/lib_</li>
 <li>Copy _...<em>mingw32/bin/SDL2.dll</em> to _{eclipse_worksapce}/pc_simulator/Debug/_.  Do it later when Eclipse is installed. </li>
 </ol>
 <p>Note: If you will use <strong>Microsoft Visual Studio</strong> instead of Eclipse then you don&#39;t have to install MinGW. </p>
 <h5 id="osx">OSX</h5>
 <p>On <strong>OSX</strong> you can easily install SDL2 with brew: <code>brew install sdl2</code></p>
 <p>If something is not working I suggest <a href="http://lazyfoo.net/tutorials/SDL/01_hello_SDL/index.php">this tutorial</a> to get started with SDL.</p>
 <h4 id="pre-configured-project">Pre-configured project</h4>
 <p>A pre-configured graphics library project (based on the latest release) is always available in PC simulator project. You can find it on <a href="https://github.com/littlevgl/proj_pc">GitHub</a> or on the <a href="https://littlevgl.com/download">Download</a> page. The project is configured for Eclipse CDT. </p>
 <h4 id="add-the-pre-configured-project-to-eclipse-cdt">Add the pre-configured project to Eclipse CDT</h4>
 <p>Run Eclipse CDT. It will show a dialogue about the <strong>workspace path</strong>. Before accepting it check that path and copy (and unzip) the downloaded pre-configured project there. Now you can accept the workspace path. Of course you can modify this path but in that case copy the project to that location.</p>
 <p>Close the start up window and go to <strong>File-&gt;Import</strong> and choose <strong>General-&gt;Existing project into Workspace</strong>. <strong>Browse the root directory</strong> of the project and click <strong>Finish</strong></p>
 <p>On <strong>Windows</strong> you have to do two additional things:</p>
 <ul>
 <li>Copy the <strong>SDL2.dll</strong> into the project&#39;s Debug folder </li>
 <li>Righ click on the project -&gt; Project properties -&gt; C/C++ Build -&gt; Settings -&gt; Libraries -&gt; Add ... and add <em>mingw32</em> above SDLmain and SDL. (The order is important: mingw32, SDLmain, SDL)</li>
 </ul>
 <h4 id="compile-and-run">Compile and Run</h4>
 <p>Now you are ready to run the Littlev Graphics Library on your PC. Click on the Hammer Icon on the top menu bar to Build the project. If you have done everything right you will not get any errors. Note that on some systems additional steps might be required to &quot;see&quot; SDL 2 from Eclipse but in most of cases the configurtions in the downloaded project is enough.</p>
 <p>After a success build click on the Play button on the top menu bar to run the project. Now a window should appear in the middle of your screen.</p>
 <p>Now everything is ready to use the Littlev Graphics Library in the practice or begin the development on your PC.</p>
 <h4 id="next-step">Next step</h4>
 <p>To create your first LittlevGL GUI you should read the pages below <a href="#Porting">Porting</a> in the sidebar.</p>
 <p class="page" id="Objects"></p><h1>Objects</h1>
 <p><em>Written for v5.1</em></p>
 <p>In the Littlev Graphics Library the <strong>basic building blocks</strong> of a user interface are the objects. For example:</p>
 <ul>
 <li><a href="#Button">Button</a></li>
 <li><a href="#Label">Label</a></li>
 <li><a href="#Image">Image</a></li>
 <li><a href="#List">List</a></li>
 <li><a href="#Chart">Chart</a></li>
 <li><a href="#Text-area">Text area</a></li>
 </ul>
 <p>Click to check all the existing <a href="https://github.com/littlevgl/lvgl/wiki/Object-types">object types</a>. </p>
 <h4 id="object-attributes">Object attributes</h4>
 <h5 id="basic-attributes">Basic attributes</h5>
 <p>The objects have basic attributes which are common independently from their type:</p>
 <ul>
 <li>Position</li>
 <li>Size</li>
 <li>Parent</li>
 <li>Drag enable</li>
 <li>Click enable etc.</li>
 </ul>
 <p>You can set/get this attributes with <code>lv_obj_set_...</code> and <code>lv_obj_get_...</code> functions. For example:</p>
 <pre class="hljs"><span class="hljs-comment">/*Set basic object attributes*/</span>
 lv_obj_set_size(btn1, <span class="hljs-number">100</span>, <span class="hljs-number">50</span>);                        <span class="hljs-comment">/*Button size*/</span>
 lv_obj_set_pos(btn1, <span class="hljs-number">20</span>,<span class="hljs-number">30</span>);                        <span class="hljs-comment">/*Button position*/</span></pre><p>To see all the available functions visit the Base object&#39;s <a href="#Base-object">documentation</a>.</p>
 <h5 id="specific-attributes">Specific attributes</h5>
 <p>The object types have special attributes. For example a slider have:</p>
 <ul>
 <li>Min. max. values</li>
 <li>Current value</li>
 <li>Callback function for new value set </li>
 <li>Styles</li>
 </ul>
 <p>For these attributes every object type have unique API functions. For example for a slider: </p>
 <pre class="hljs"><span class="hljs-comment">/*Set slider specific attributes*/</span>
 lv_slider_set_range(slider1, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>);            <span class="hljs-comment">/*Set min. and max. values*/</span>
 lv_slider_set_value(slider1, <span class="hljs-number">40</span>);            <span class="hljs-comment">/*Set the current value (position)*/</span>
 lv_slider_set_action(slider1, my_action);        <span class="hljs-comment">/*Set a callback function*/</span></pre><h4 id="object-s-working-mechanisms">Object&#39;s working mechanisms</h4>
 <h5 id="parent-child-structure">Parent-child structure</h5>
 <p>A parent can be considered as the container of its children. Every object has exactly one parent object (except screens) but a parent can have unlimited number of children. There is no limitation for the type of the parent but there typically parent (e.g. button) and typical child (e.g. label) objects.</p>
 <h5 id="screen-the-most-basic-parent">Screen – the most basic parent</h5>
 <p>The screen is a special object which has no parent object. Always there is an active screen. By default, the library creates and loads one. To get the currently active screen use the <code>lv_scr_act()</code> function.</p>
 <p>A screen can be created with any object type, for example, a basic object or an image to make a wallpaper.</p>
 <h5 id="moving-together">Moving together</h5>
 <p>If the position of the parent is changed the children will move with the parent. Therefore all positions are relative to the parent. So the (0;0) coordinates mean the objects will remain in the top left-hand corner of the parent independently from the position of the parent.</p>
 <p><img src="https://littlevgl.com/docs/par_child1.png" />  </p>
 <pre class="hljs"><span class="hljs-keyword">lv_obj_t</span> * par = lv_obj_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);     <span class="hljs-comment">/*Create a parent object on the current screen*/</span>
 lv_obj_set_size(par, <span class="hljs-number">100</span>, <span class="hljs-number">80</span>);                        <span class="hljs-comment">/*Set the size of the parent*/</span>

 <span class="hljs-keyword">lv_obj_t</span> * obj1 = lv_obj_create(par, <span class="hljs-literal">NULL</span>);            <span class="hljs-comment">/*Create an object on the previously created parent object*/</span>
 lv_obj_set_pos(obj1, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>);                    <span class="hljs-comment">/*Set the position of the new object*/</span></pre><p>Modify the position of the parent:</p>
 <p><img src="https://littlevgl.com/docs/par_child2.png" />  </p>
 <pre class="hljs">lv_obj_set_pos(par, <span class="hljs-number">50</span>, <span class="hljs-number">50</span>);        <span class="hljs-comment">/*Move the parent. The child will move with it.*/</span></pre><h5 id="visibility-only-on-parent">Visibility only on parent</h5>
 <p>If a child partially or totally out of its parent then the parts outside will not be visible.</p>
 <p><img src="https://littlevgl.com/docs/par_child3.png" />  </p>
 <pre class="hljs">lv_obj_set_x(obj1, <span class="hljs-number">-30</span>);        <span class="hljs-comment">/*Move the child a little bit of the parent*/</span></pre><h4 id="create-delete-objects">Create - delete objects</h4>
 <p>In the graphics library objects can be created and deleted dynamically in run-time. It means only the currently created objects consume RAM. For example, if you need a chart you can create it only when it is required and delete after it is used.</p>
 <p>Every objects type has its own <strong>create</strong> function with an unified prototype. It needs two parameters: a pointer the parent object and optionally a pointer to an other object with the same type. If the second parameter is not <em>NULL</em> then this objects will be copied to the new one. To create a screen give <em>NULL</em> as parent. The return value of the create function is a pointer to the created object. Independently from the object type a common variable type <strong>lv_obj_t</strong> is used. This pointer can be used later to set or get the attributes of the object. The create functions look like this:</p>
 <pre class="hljs"><span class="hljs-keyword">lv_obj_t</span> * lv_type_create(<span class="hljs-keyword">lv_obj_t</span> * parent, <span class="hljs-keyword">lv_obj_t</span> * copy);</pre><p>There is a common <strong>delete</strong> function for all object types. It deletes the object and all of its children.</p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_obj_del</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * obj)</span></span>;</pre><p>You can delete only the children of an object but leave the object itself &quot;alive&quot;:</p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_obj_clean</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * obj)</span></span>;</pre><h4 id="layers">Layers</h4>
 <p>The earlier created object (and its children) will be drawn earlier (nearer to the background). In other words, the lastly created object will be on the top among its siblings. It is very important, the order is calculated among the objects on the same level (&quot;siblings&quot;).</p>
 <p>Layers can be added easily by creating 2 objects (which can be transparent) firstly &#39;A&#39; and secondly &#39;B&#39;. &#39;A&#39; and every object on it will be in the background and can be covered by &#39;B&#39; and its children.</p>
 <p><img src="https://littlevgl.com/docs/par_child4.png" />  </p>
 <pre class="hljs"><span class="hljs-comment">/*Create a screen*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * scr = lv_obj_create(<span class="hljs-literal">NULL</span>, <span class="hljs-literal">NULL</span>);
 lv_scr_load(scr);                                   <span class="hljs-comment">/*Load the screen*/</span>

 <span class="hljs-comment">/*Create 2 buttons*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * btn1 = lv_btn_create(scr, <span class="hljs-literal">NULL</span>);         <span class="hljs-comment">/*Create a button on the screen*/</span>
 lv_btn_set_fit(btn1, <span class="hljs-literal">true</span>, <span class="hljs-literal">true</span>);                   <span class="hljs-comment">/*Enable to automatically set the size according to the content*/</span>
 lv_obj_set_pos(btn1, <span class="hljs-number">60</span>, <span class="hljs-number">40</span>);                          <span class="hljs-comment">/*Set the position of the button*/</span>

 <span class="hljs-keyword">lv_obj_t</span> * btn2 = lv_btn_create(scr, btn1);         <span class="hljs-comment">/*Copy the first button*/</span>
 lv_obj_set_pos(btn2, <span class="hljs-number">180</span>, <span class="hljs-number">80</span>);                         <span class="hljs-comment">/*Set the position of the button*/</span>

 <span class="hljs-comment">/*Add labels to the buttons*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * label1 = lv_label_create(btn1, <span class="hljs-literal">NULL</span>);    <span class="hljs-comment">/*Create a label on the first button*/</span>
 lv_label_set_text(label1, <span class="hljs-string">"Button 1"</span>);              <span class="hljs-comment">/*Set the text of the label*/</span>

 <span class="hljs-keyword">lv_obj_t</span> * label2 = lv_label_create(btn2, <span class="hljs-literal">NULL</span>);      <span class="hljs-comment">/*Create a label on the second button*/</span>
 lv_label_set_text(label2, <span class="hljs-string">"Button 2"</span>);                <span class="hljs-comment">/*Set the text of the label*/</span>

 <span class="hljs-comment">/*Delete the second label*/</span>
 lv_obj_del(label2);</pre><p class="page" id="Styles"></p><h1>Styles</h1>
 <p><em>Written for v5.1</em></p>
 <p>To set the appearance of the objects styles can be used. A style is a structure variable with attributes like colors, paddings, visibility, and others. There is common style type: <strong>lv_style_t</strong>.</p>
 <p>By setting the fields of an <code>lv_style_t</code> structure you can influence the appearance of the objects using that style.</p>
 <p>The objects store only a pointer to a style so the style cannot be a local variable which is destroyed after the function exists. <strong>You should use static, global or dynamically allocated variables.</strong></p>
 <pre class="hljs"><span class="hljs-keyword">lv_style_t</span> style_1;             <span class="hljs-comment">/*OK! Global variables for styles are fine*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_2;      <span class="hljs-comment">/*OK! Static variables outside the functions are fine*/</span>
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">my_screen_create</span><span class="hljs-params">(<span class="hljs-keyword">void</span>)</span> 
 </span>{
  <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_3;    <span class="hljs-comment">/*OK! Static variables in the functions are fine*/</span>
  <span class="hljs-keyword">lv_style_t</span> style_1;           <span class="hljs-comment">/*WRONG! Styles can't be local variables*/</span>

  ...
 }</pre><h2 id="style-properties">Style properties</h2>
 <p>A style has 5 main parts: common, body, text, image and line. An object will use that fields which are relevant for it. For example, Lines don&#39;t care about the letter_space. To see which fields are used by an object type see their documentation.</p>
 <p>The fields of a style structure are the followings:</p>
 <ul>
 <li><strong>Common properties</strong><ul>
 <li><strong>glass</strong> 1: Do not inherit this style (see below)</li>
 </ul>
 </li>
 <li><strong>Body style properties</strong> Used by the rectangle-like objects<ul>
 <li><strong>body.empty</strong> Do not fill the rectangle (just draw border and/or shadow)</li>
 <li><strong>body.main_colo</strong>r Main color (top color)</li>
 <li><strong>body.grad_color</strong> Gradient color (bottom color)</li>
 <li><strong>body.radius</strong> Corner radius. (set to LV_RADIUS_CIRCLE to draw circle)</li>
 <li><strong>body.opa</strong> Opacity (0..255 or LV_OPA_TRANSP, LV_OPA_10, LV_OPA_20 ... LV_OPA_COVER)</li>
 <li><strong>body.border.color</strong> Border color</li>
 <li><strong>body.border.width</strong> Border width</li>
 <li><strong>body.border.part</strong> Border parts (LV_BORDER_LEFT/RIGHT/TOP/BOTTOM/FULL or &#39;OR&#39;ed values)</li>
 <li><strong>body.border.opa</strong> Border opacity</li>
 <li><strong>body.shadow.color</strong> Shadow color</li>
 <li><strong>body.shadow.width</strong> Shadow width</li>
 <li><strong>body.shadow.type</strong> Shadow type (LV_SHADOW_BOTTOM or LV_SHADOW_FULL)</li>
 <li><strong>body.padding.hor</strong> Horizontal padding</li>
 <li><strong>body.padding.ver</strong> Vertical padding</li>
 <li><strong>body.padding.inner</strong> Inner padding</li>
 </ul>
 </li>
 <li><strong>Text style properties</strong> Used by the objects which show texts<ul>
 <li><strong>text.color</strong> Text color</li>
 <li><strong>text.font</strong> Pointer to a font</li>
 <li><strong>text.opa</strong> Text opacity (0..255 or LV_OPA_TRANSP, LV_OPA_10, LV_OPA_20 ... LV_OPA_COVER)</li>
 <li><strong>text.letter_space</strong> Letter space</li>
 <li><strong>text.line_space</strong> Line space</li>
 </ul>
 </li>
 <li><strong>Image style properties</strong> Used by image-like objects or icons on objects<ul>
 <li><strong>image.color</strong> Color for image re-coloring based on the pixels brightness</li>
 <li><strong>image.intense</strong> Re-color intensity (0..255 or LV_OPA_TRANSP, LV_OPA_10, LV_OPA_20 ... LV_OPA_COVER)</li>
 <li><strong>image.opa</strong> Image opacity (0..255 or LV_OPA_TRANSP, LV_OPA_10, LV_OPA_20 ... LV_OPA_COVER)</li>
 </ul>
 </li>
 <li><strong>Line style properties</strong> Used by objects containing lines or line-like elements<ul>
 <li><strong>line.color</strong> Line color</li>
 <li><strong>line.width</strong> Line width</li>
 <li><strong>line.opa</strong> Line opacity (0..255 or LV_OPA_TRANSP, LV_OPA_10, LV_OPA_20 ... LV_OPA_COVER)</li>
 </ul>
 </li>
 </ul>
 <h2 id="using-styles">Using styles</h2>
 <p>Every object type has a unique function to set its style or styles.</p>
 <p>If the object has only one style - like a label - the <code>lv_label_set_style(label1, &amp;style)</code>function can be used to set a new style.</p>
 <p>If the object has more styles (like a button have 5 styles for each state) <code>lv_btn_set_style(obj, LV_BTN_STYLE_..., &amp;rel_style</code>) function can be used to set a new style.</p>
 <p>The styles and the style properties used by an object type are described in their documentation.</p>
 <p>If you <strong>modify a style which is used</strong> by one or more objects then the objects have to be notified about the style is changed. You have two options to do that:</p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_obj_refresh_style</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * obj)</span></span>;        <span class="hljs-comment">/*Notify an object about its style is modified*/</span>
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_obj_report_style_mod</span><span class="hljs-params">(<span class="hljs-keyword">void</span> * style)</span></span>;        <span class="hljs-comment">/*Notify all object if a style is modified.(NULL to notify all objects)*/</span></pre><p>If the <strong>style of an object is NULL then its style will be inherited from its parent&#39;s style</strong>. It makes easier to create a consistent design. Don&#39;t forget a style describes a lot of properties at the same time. So for example, if you set a button&#39;s style and create a label on it with NULL style then the label will be rendered according to the buttons styles. In other words, the button makes sure its children will look well on it.</p>
 <p>Setting the //glass style property will prevent inheriting that style//. You should use it if the style is transparent so that its children use colors and others from its parent.</p>
 <h2 id="built-in-styles">Built-in styles</h2>
 <p>There are several built-in styles in the library:</p>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/style-built-in.png" /></p>
 <p>As you can see there is a style for screens, for buttons, plain and pretty styles and transparent styles as well. The <code>lv_style_transp</code>, <code>lv_style_transp_fit</code> and <code>lv_style_transp_tight</code> differ only in paddings: for <code>lv_style_transp_tight</code> all padings are zero, for <code>lv_style_transp_fit</code> only hor and ver paddings are zero.</p>
 <p>The built in styles are global lv_style_t variables so you can use them like: lv_btn_set_style(obj, LV_BTN_STYLE_REL, &amp;lv_style_btn_rel)</p>
 <p>You can modify the built-in styles or you can create new styles. When creating new styles it is recommended to first copy a built-in style to be sure all fields are initialized with a proper value. The lv_style_copy(&amp;dest_style, &amp;src_style) can be used to copy styles.</p>
 <h2 id="style-animations">Style animations</h2>
 <p>You can animate styles using <code>lv_style_anim_create(&amp;anim)</code>. Before calling this function you have to initialize an <code>lv_style_anim_</code>t variable. The animation will fade a <code>style_1</code> to <code>style_2</code>.</p>
 <pre class="hljs"><span class="hljs-keyword">lv_style_anim_t</span> a;    <span class="hljs-comment">/*Will be copied, can be local variable*/</span>
 a.style_anim = &amp; style_to_anim;     <span class="hljs-comment">/*Pointer to style to animate*/</span>
 a.style_start = &amp; style_1;          <span class="hljs-comment">/*Pointer to the initial style (only pointer saved) */</span>
 a.style_end = &amp; style_2;            <span class="hljs-comment">/*Pointer to the target style (only pointer saved) */</span>
 a.act_time = <span class="hljs-number">0</span>;                     <span class="hljs-comment">/*Set negative to make a delay*/</span>
 a.time = <span class="hljs-number">1000</span>;                      <span class="hljs-comment">/*Time of animation in milliseconds*/</span>
 a.playback = <span class="hljs-number">0</span>;                     <span class="hljs-comment">/*1: play the animation backward too*/</span>
 a.playback_pause = <span class="hljs-number">0</span>;               <span class="hljs-comment">/*Wait before playback [ms]*/</span>
 a.repeat = <span class="hljs-number">0</span>;                       <span class="hljs-comment">/*1: repeat the animation*/</span>
 a.repeat_pause = <span class="hljs-number">0</span>;                 <span class="hljs-comment">/*Wait before repeat [ms]*/</span>
 a.end_cb = <span class="hljs-literal">NULL</span>;                    <span class="hljs-comment">/*Call this function when the animation ready*/</span></pre><h2 id="style-example">Style example</h2>
 <p>The example below demonstrates the above-described style usage</p>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/style-example.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style1;
 lv_style_copy(&amp;style1, &amp;lv_style_plain);    <span class="hljs-comment">/*Copy a built-in style to initialize the new style*/</span>
 style1.body.main_color = LV_COLOR_WHITE;
 style1.body.grad_color = LV_COLOR_BLUE;
 style1.body.radius = <span class="hljs-number">10</span>;
 style1.body.border.color = LV_COLOR_GRAY;
 style1.body.border.width = <span class="hljs-number">2</span>;
 style1.body.border.opa = LV_OPA_50;
 style1.body.padding.hor = <span class="hljs-number">5</span>;            <span class="hljs-comment">/*Horizontal padding, used by the bar indicator below*/</span>
 style1.body.padding.ver = <span class="hljs-number">5</span>;            <span class="hljs-comment">/*Vertical padding, used by the bar indicator below*/</span>
 style1.text.color = LV_COLOR_RED;

 <span class="hljs-comment">/*Create a simple object*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *obj1 = lv_obj_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_style(obj1, &amp;style1);                        <span class="hljs-comment">/*Apply the created style*/</span>
 lv_obj_set_pos(obj1, <span class="hljs-number">20</span>, <span class="hljs-number">20</span>);                           <span class="hljs-comment">/*Set the position*/</span>

 <span class="hljs-comment">/*Create a label on the object. The label's style is NULL by default*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *label = lv_label_create(obj1, <span class="hljs-literal">NULL</span>);
 lv_obj_align(label, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);       <span class="hljs-comment">/*Align the label to the middle*/</span>

 <span class="hljs-comment">/*Create a bar*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *bar1 = lv_bar_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_bar_set_style(bar1, LV_BAR_STYLE_INDIC, &amp;style1);    <span class="hljs-comment">/*Modify the indicator's style*/</span>
 lv_bar_set_value(bar1, <span class="hljs-number">70</span>);                             <span class="hljs-comment">/*Set the bar's value*/</span></pre><h2 id="themes">Themes</h2>
 <p>To create styles for your GUI is challenging because you need a deeper understanding of the library and you need to have some design skills. In addition, it takes a lot of time to create so many styles.</p>
 <p>To speed up the design part themes are introduced. A theme is a style collection which contains the required styles for every object type. For example 5 styles for buttons to describe their 5 possible states. 
 Check the <a href="https://littlevgl.com/themes">Existing themes</a>.</p>
 <p>To be more specific a theme is a structure variable which contains a lot of lv_style_t * fields. For buttons:</p>
 <pre class="hljs">theme.btn.rel       <span class="hljs-comment">/*Released button style*/</span>
 theme.btn.pr        <span class="hljs-comment">/*Pressed button style*/</span>
 theme.btn.tgl_rel   <span class="hljs-comment">/*Toggled released button style*/</span>
 theme.btn.tgl_pr    <span class="hljs-comment">/*Toggled pressed button style*/</span>
 theme.btn.ina       <span class="hljs-comment">/*Inactive button style*/</span></pre><p>A theme can initialized by: <code>lv_theme_xxx_init(hue, font)</code>. Where xxx is the name of the theme, <em>hue</em> is a Hue value from HSV color space (0..360) and <em>font</em> is the font applied in the theme (<code>NULL</code> to use the <code>LV_FONT_DEFAULT</code> default font)</p>
 <p>When a theme is initialized its styles can be used like this:</p>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/theme-example.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a default slider*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *slider = lv_slider_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_slider_set_value(slider, <span class="hljs-number">70</span>);
 lv_obj_set_pos(slider, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>);

 <span class="hljs-comment">/*Initialize the alien theme with a redish hue*/</span>
 <span class="hljs-keyword">lv_theme_t</span> *th = lv_theme_alien_init(<span class="hljs-number">10</span>, <span class="hljs-literal">NULL</span>);

 <span class="hljs-comment">/*Create a new slider and apply the themes styles*/</span>
 slider = lv_slider_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_slider_set_value(slider, <span class="hljs-number">70</span>);
 lv_obj_set_pos(slider, <span class="hljs-number">10</span>, <span class="hljs-number">50</span>);
 lv_slider_set_style(slider, LV_SLIDER_STYLE_BG, th-&gt;slider.bg);
 lv_slider_set_style(slider, LV_SLIDER_STYLE_INDIC, th-&gt;slider.indic);
 lv_slider_set_style(slider, LV_SLIDER_STYLE_KNOB, th-&gt;slider.knob);</pre><p>You can ask the library to apply the styles from a theme when you create new objects. To do this use <code>lv_theme_set_current(th)</code>;</p>
 <p class="page" id="Input-devices"></p><h1>Input devices</h1>
 <p><em>Written for v5.1</em></p>
 <p>To interact with the created object <em>Input devices</em> are required. For example Touchpad, Mouse, Keyboard or even an Encoder. To learn how to add an input device, read the <a href="https://github.com/littlevgl/lvgl/wiki/Porting">Porting guide</a>. </p>
 <p>When you register an input device driver the library adds some extra information to it to describe the state of the input device in more detail. When a user action (e.g. a button press) happens and an action (callback) function is triggered always there is an input device which triggered that action. You can get this input device with </p>
 <pre class="hljs"><span class="hljs-keyword">lv_indev_t</span> *indev = lv_indev_get_act();</pre><p>It might be important when you need to know some special information about the input device like the currently pressed point, or dragging an object or not etc.  </p>
 <p>The input devices have a very simple API:</p>
 <pre class="hljs"><span class="hljs-comment">/*Get the last point on a display input*/</span>
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_indev_get_point</span><span class="hljs-params">(<span class="hljs-keyword">lv_indev_t</span> * indev, <span class="hljs-keyword">point_t</span> * point)</span></span>;

 <span class="hljs-comment">/*Check if there is dragging on input device or not */</span>
 <span class="hljs-function"><span class="hljs-keyword">bool</span> <span class="hljs-title">lv_indev_is_dragging</span><span class="hljs-params">(<span class="hljs-keyword">lv_indev_t</span> * indev)</span></span>;

 <span class="hljs-comment">/*Get the vector of dragging on a input device*/</span>
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_indev_get_vect</span><span class="hljs-params">(<span class="hljs-keyword">lv_indev_t</span> * indev, <span class="hljs-keyword">point_t</span> * point)</span></span>;

 <span class="hljs-comment">/*Do nothing until the next release*/</span>
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_indev_wait_release</span><span class="hljs-params">(<span class="hljs-keyword">lv_indev_t</span> * indev)</span></span>;

 <span class="hljs-comment">/*Do nothing until the next release*/</span>
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_indev_wait_release</span><span class="hljs-params">(<span class="hljs-keyword">lv_indev_t</span> * indev)</span></span>;

 <span class="hljs-comment">/*Reset one or all (use NULL) input devices*/</span>
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_indev_reset</span><span class="hljs-params">(<span class="hljs-keyword">lv_indev_t</span> * indev)</span></span>;

 <span class="hljs-comment">/*Reset the long pressed state of an input device*/</span>
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_indev_reset_lpr</span><span class="hljs-params">(<span class="hljs-keyword">lv_indev_t</span> * indev)</span></span>;

 <span class="hljs-comment">/*Set a cursor for a pointer input device*/</span>
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_indev_set_cursor</span><span class="hljs-params">(<span class="hljs-keyword">lv_indev_t</span> * indev, <span class="hljs-keyword">lv_obj_t</span> * cur_obj)</span></span>;

 <span class="hljs-comment">/*Set a destination group for a keypad input device*/</span>
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_indev_set_group</span><span class="hljs-params">(<span class="hljs-keyword">lv_indev_t</span> * indev, <span class="hljs-keyword">lv_group_t</span> * group)</span></span>;</pre><hr>
 <h3 id="touchpad-less-navigation">Touchpad-less navigation</h3>
 <p>The objects can be grouped in order to easily <strong>control</strong> them <strong>without touchpad or mouse</strong>. It allows you to use</p>
 <ul>
 <li>Keyboard or keypad</li>
 <li>Hardware buttons</li>
 <li>Encoder</li>
 </ul>
 <p>to navigate among objects.</p>
 <p>Firstly you have to <strong>create an object group</strong> with <code>lv_group_t *group = lv_group_create()</code> and add objects to it with <code>lv_group_add_obj(group, obj)</code>. In a group always there is a <em>focused</em> object. All the button press will be &quot;sent&quot; to the currently focused object. </p>
 <p>To navigate among the objects in a group (change the focused object) and interact with them an _LV_INDEV_TYPE_KEYPAD_ typed input device is required. In its <em>read</em> function you can tell the library which key is pressed or released. To learn how to add an input device, read the <a href="https://github.com/littlevgl/lvgl/wiki/Porting">Porting guide</a>. </p>
 <p>Besides you have to <strong>assign the group to the input device</strong> with  </p>
 <pre class="hljs">lv_indev_set_group(indev, group)</pre><p>There are some special <strong>control characters</strong> which can be used in the <em>read</em> function:</p>
 <ul>
 <li><strong>LV_GROUP_KEY_NEXT</strong> Focus on the next object</li>
 <li><strong>LV_GROUP_KEY_PREV</strong> Focus on the previous object</li>
 <li><strong>LV_GROUP_KEY_UP</strong> Increment the value, move up or click the focused object (move up means e.g. select an upper list element)</li>
 <li><strong>LV_GROUP_KEY_DOWN</strong> Decrement the value or move down on the focused object (move down means e.g. select a lower list element)</li>
 <li><strong>LV_GROUP_KEY_RIGHT</strong> Increment the value or click the focused object</li>
 <li><strong>LV_GROUP_KEY_LEFT</strong> Decrement the value of the focused object</li>
 <li><strong>LV_GROUP_KEY_ENTER</strong> Click the focused object or a selected element (e.g. list element)</li>
 <li><strong>LV_GROUP_KEY_ESC</strong> Close the object (e.g. drop-down list)</li>
 </ul>
 <p>In some cases (e.g. when a pop-up window appears) it is useful to freeze the focus on an object. It means the _LV_GROUP_KEY_NEXT/PREV_ will be ignored. You can do it with <code>lv_group_focus_freeze(group,true)</code>.</p>
 <p>The <strong>style of the object in focus</strong> is modified by a function. By default, it makes the object&#39;s colors orangish but you can also specify your own style updater function in each group with </p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_group_set_style_mod_cb</span><span class="hljs-params">(group, style_mod_cb)</span>. </span></pre><p>The _style_mod_cb_ needs an <code>lv_style_t *</code> parameter which is a copy of the focused object&#39;s style. In the callback, you can mix some colors to the current ones, and modify parameters but <strong>it is not permitted to set attributes which modify the size</strong> (like _letter_space_, <em>padding</em> etc.)</p>
 <p class="page" id="Colors"></p><h1>Colors</h1>
 <p><em>Written for v5.1</em></p>
 <p>The color module handles all color related functions like changing color depth, creating colors from hex code, converting between color depths, mixing colors etc. </p>
 <p>The following variable types are defined by the color module:</p>
 <ul>
 <li><strong>lv_color1_t</strong> Store monochrome color. For compatibility it also has R,G,B fields but they are always the same (1 byte)</li>
 <li><strong>lv_color8_t</strong> A structure to store R (3 bit),G (3 bit),B (2 bit) components for 8 bit colors (1 byte)</li>
 <li><strong>lv_color16_t</strong> A structure to store R (5 bit),G (6 bit),B (5 bit) components for 16 bit colors (2 byte)</li>
 <li><strong>lv_color24_t</strong> A structure to store R (8 bit),G (8 bit), B (8 bit) components for 24 bit colors (4 byte)</li>
 <li><strong>lv_color_t</strong> Equal to color1/8/16/24_t according to color depth settings</li>
 <li><strong>lv_color_int_t</strong> uint8_t, uint16_t or uint32_t according to color depth setting. Used to build color arrays from plain numbers.</li>
 <li><strong>lv_opa_t</strong> A simple uint8_t type to describe opacity.</li>
 </ul>
 <p>The _lv_color_t_, _lv_color1_t__lv_color8_t_, _lv_color16_t_ and _lv_color24_t_ types have got four fields:</p>
 <ul>
 <li><strong>red</strong> red channel</li>
 <li><strong>green</strong> green channel</li>
 <li><strong>blue</strong> blue channel</li>
 <li><strong>full</strong> red + green + blue as one number</li>
 </ul>
 <p>You can set the <strong>current color depth</strong> in _lv_conf.h_ by setting the _LV_COLOR_DEPTH_ define to 1 (monochrome), 8, 16 or 24.</p>
 <p>You can <strong>convert a color from the current color depth</strong> to an other. The converter functions return with a number so you have to use the <em>full</em> field:</p>
 <pre class="hljs"><span class="hljs-keyword">lv_color_t</span> c;
 c.red   = <span class="hljs-number">0x38</span>;
 c.green = <span class="hljs-number">0x70</span>;
 c.blue  = <span class="hljs-number">0xCC</span>;

 <span class="hljs-keyword">lv_color1_t</span> c1;
 c1.full = lv_color_to1(c);        <span class="hljs-comment">/*Return 1 for light colors, 0 for dark colors*/</span>

 <span class="hljs-keyword">lv_color8_t</span> c8;
 c8.full = lv_color_to8(c);        <span class="hljs-comment">/*Give a 8 bit number with the converted color*/</span> 

 <span class="hljs-keyword">lv_color16_t</span> c16;
 c16.full = lv_color_to16(c);     <span class="hljs-comment">/*Give a 16 bit number with the converted color*/</span>

 <span class="hljs-keyword">lv_color24_t</span> c24;
 c24.full = lv_color_to24(c);    <span class="hljs-comment">/*Give a 32 bit number with the converted color*/</span></pre><p>You can <strong>create a color</strong> with the current color depth using the <strong>LV_COLOR_MAKE</strong> macro. It takes 3 arguments (red, green, blue) as 8 bit numbers. For example to create light red color: <code>my_color = COLOR_MAKE(0xFF,0x80,0x80)</code>. Colors can be created from <strong>HEX codes</strong> too: <code>my_color = LV_COLOR_HEX(0xFF8080)</code> or <code>my_color = LV_COLOR_HEX3(0xF88)</code>.</p>
 <p><strong>Mixing two colors</strong> is possible with <code>mixed_color = lv_color_mix(color1, color2, ratio)</code>. Ration can be 0..255. 0 results fully color2, 255 result fully color1. </p>
 <p>To describe <strong>opacity</strong> the _lv_opa_t_ type is created as wrapper to _uint8_t_. Some defines are also introduced: </p>
 <ul>
 <li><strong>LV_OPA_TRANSP</strong> Value: 0, means the opacity makes the color fully transparent</li>
 <li><strong>LV_OPA_10</strong> Value: 25, means the color covers only a little</li>
 <li><strong>LV_OPA_20 ... OPA_80</strong> come logically</li>
 <li><strong>LV_OPA_90</strong> Value: 229, means the color near fully covers </li>
 <li><strong>LV_OPA_COVER</strong> Value: 255, means the color fully covers </li>
 </ul>
 <p>You can also use the _LV_OPA_*_ defines in _lv_color_mix() as ratio._</p>
 <p>The color module defines the <strong>most basic colors</strong>:   </p>
 <ul>
 <li><img src="https://placehold.it/15/000000/000000?text=+" /> <code>LV_COLOR_BLACK</code></li>
 <li><img src="https://placehold.it/15/808080/000000?text=+" /> <code>LV_COLOR_GRAY</code></li>
 <li><img src="https://placehold.it/15/c0c0c0/000000?text=+" /> <code>LV_COLOR_SILVER</code></li>
 <li><img src="https://placehold.it/15/ff0000/000000?text=+" /> <code>LV_COLOR_RED</code></li>
 <li><img src="https://placehold.it/15/800000/000000?text=+" /> <code>LV_COLOR_MARRON</code></li>
 <li><img src="https://placehold.it/15/00ff00/000000?text=+" /> <code>LV_COLOR_LIME</code></li>
 <li><img src="https://placehold.it/15/008000/000000?text=+" /> <code>LV_COLOR_GREEN</code></li>
 <li><img src="https://placehold.it/15/808000/000000?text=+" /> <code>LV_COLOR_OLIVE</code></li>
 <li><img src="https://placehold.it/15/0000ff/000000?text=+" /> <code>LV_COLOR_BLUE</code></li>
 <li><img src="https://placehold.it/15/000080/000000?text=+" /> <code>LV_COLOR_NAVY</code></li>
 <li><img src="https://placehold.it/15/008080/000000?text=+" /> <code>LV_COLOR_TAIL</code></li>
 <li><img src="https://placehold.it/15/00ffff/000000?text=+" /> <code>LV_COLOR_CYAN</code></li>
 <li><img src="https://placehold.it/15/00ffff/000000?text=+" /> <code>LV_COLOR_AQUA</code></li>
 <li><img src="https://placehold.it/15/800080/000000?text=+" /> <code>LV_COLOR_PURPLE</code></li>
 <li><img src="https://placehold.it/15/ff00ff/000000?text=+" /> <code>LV_COLOR_MAGENTA</code></li>
 <li><img src="https://placehold.it/15/ffa500/000000?text=+" /> <code>LV_COLOR_ORANGE</code></li>
 <li><img src="https://placehold.it/15/ffff00/000000?text=+" /> <code>LV_COLOR_YELLOW</code></li>
 </ul>
 <p>as well as <code>LV_COLOR_WHITE</code>.</p>
 <p class="page" id="Fonts"></p><h1>Fonts</h1>
 <p><em>Written for v5.1</em></p>
 <p>In LittlevGL fonts are bitmaps and other descriptors to store the images of the letters (glyph) and some additional information. A font is stored in a <strong>lv_font_t</strong> variable and can be set it in style&#39;s <em>text.font</em> field. </p>
 <p>The fonts have a <strong>bpp (Bit-Per-Pixel)</strong> property. It shows how much bit is used to describe a pixel in the font. The value stored for a pixel determines the pixel&#39;s opacity. This way the image of the letters (especially on the edges) can be smooth and even. The possible bpp values are 1, 2, 4 and 8 (higher value means better quality). The bpp also affects the required memory size to store the font. E.g. bpp = 4 makes the font&#39;s memory size 4 times greater compared to bpp = 1.  </p>
 <h4 id="built-in-fonts">Built-in fonts</h4>
 <p>There are several built-in fonts which can be enabled in lv_conf.h by _USE_LV_FONT_..._ defines. There are built-in fonts in <strong>different sizes</strong>:</p>
 <ul>
 <li>10 px</li>
 <li>20 px</li>
 <li>30 px</li>
 <li>40 px</li>
 </ul>
 <p>You can enable the fonts with 1, 2, 4 or 8 values to set its bpp (e.g. <code>#define USE_LV_FONT_DEJAVU_20 4</code> in <code>lv_conf.h</code>). </p>
 <p>The built-in fonts exist with <strong>multiply character-sets</strong> in each size:</p>
 <ul>
 <li>ASCII (Unicode 32..126)</li>
 <li>Latin supplement (Unicode 160..255)</li>
 <li>Cyrillic (Unicode 1024..1279)</li>
 </ul>
 <p>The built-in fonts use the <em>Dejavu</em> font.</p>
 <p>The built-in fonts are <strong>global variables</strong> with names like: </p>
 <ul>
 <li><code>lv_font_dejavu_20</code> (20 px ASCII font)</li>
 <li><code>lv_font_dejavu_20_latin_sup</code> (20 px Latin supplement font)</li>
 <li><code>lv_font_dejavu_20_cyrillic</code> (20 px Cyrillic font)</li>
 </ul>
 <h4 id="unicode-support">Unicode support</h4>
 <p>The LittlevGL supports Unicode letter from <strong>UTF-8</strong> coded characters. You need to configure your editor to save your code/text as UTF-8 (usually this the default) and enable _LV_TXT_UTF8_ in lv_conf.h. Without enabled _LV_TXT_UTF8_ only ASCII fonts and symbols can be used (see the symbols below)</p>
 <p>After it the texts will be decoded to determine the Unicode values. To display the letters your font needs to contain the image (glyph) of the characters. </p>
 <p>You can assign more fonts to create a <strong>larger character-set</strong>. To do this choose a base font (typically the ASCII font) and add the extensions to it: <code>lv_font_add(child, parent)</code>. Only fonts with the same height can be assigned.</p>
 <p>The built-in fonts are already added to the same sized ASCII font. For example if _USE_LV_FONT_DEJAVU_20_ and _USE_LV_FONT_DEJAVU_20_LATIN_SUP_ are enabled in <code>lv_conf.h</code> then the <em>&quot;abcÁÖÜ&quot;</em> text can be rendered when using _lv_font_dejavu_20_.</p>
 <h4 id="symbol-fonts">Symbol fonts</h4>
 <p>The symbol fonts are special fonts which contain symbols instead of letters. There are <strong>built-in symbol fonts</strong> as well and they are also assigned to the ASCII font with the same size. In a text, a symbol can be referenced like _SYMBOL_LEFT_, _SYMBOL_RIGHT_ etc. You can mix these symbol names with strings: </p>
 <pre class="hljs">lv_label_set_text(label1,<span class="hljs-string">"Right "</span>SYMBOL_RIGHT);</pre><p>The symbols can be used without UTF-8 support as well. (_LV_TXT_UTF8 0_)</p>
 <p>The list above shows the existing symbols:</p>
 <p><img src="https://littlevgl.com/docs/symbols.png" /></p>
 <h4 id="add-new-font">Add new font</h4>
 <p>If you want to <strong>add new fonts to the library</strong> you can use the <a href="https://littlevgl.com/ttf-font-to-c-array">Online Font Converter Tool</a>. It can create a C array from a TTF file which can be copied copy to your project. You can specify the height, the range of characters and the bpp. Optionally you can enumerate the characters to include only them into the final font. To use the generated font declare it with _LV_FONT_DECLARE(my_font_name)_. After that, the font can be used as the built-in fonts.</p>
 <h4 id="font-example">Font example</h4>
 <p><img src="https://littlevgl.com/docs/example-fonts.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a new style for the label*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style;
 lv_style_copy(&amp;style, &amp;lv_style_plain);
 style.text.color = LV_COLOR_BLUE;
 style.text.font = &amp;lv_font_dejavu_40;   <span class="hljs-comment">/*Unicode and symbol fonts already assigned by the library*/</span>

 <span class="hljs-keyword">lv_obj_t</span> *label;

 <span class="hljs-comment">/*Use ASCII and Unicode letters*/</span>
 label = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_pos(label, <span class="hljs-number">20</span>, <span class="hljs-number">20</span>);
 lv_label_set_style(label, &amp;style);
 lv_label_set_text(label, <span class="hljs-string">"aeuois\n"</span>
                         <span class="hljs-string">"äéüöíß"</span>);

 <span class="hljs-comment">/*Mix text and symbols*/</span>
 label = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_pos(label, <span class="hljs-number">20</span>, <span class="hljs-number">100</span>);
 lv_label_set_style(label, &amp;style);
 lv_label_set_text(label, <span class="hljs-string">"Right "</span>SYMBOL_RIGHT);</pre><p class="page" id="Drawing"></p><h1>Drawing</h1>
 <p><em>Written for v5.1</em></p>
 <p>In <em>LittlevGL</em> you can think in graphical objects and don&#39;t care about how the drawing happens. You can set the size, position or any attribute of the object an the library will refresh the old (invalid) areas and redraw the new ones. However, you should know the basic drawing methods to know which one you should choose. </p>
 <h3 id="buffered-and-unbuffered-drawing">Buffered and unbuffered drawing</h3>
 <h4 id="unbuffered-drawing">Unbuffered drawing</h4>
 <p>The unbuffered drawing puts the pixels directly to the display (frame buffer). Therefore during the drawing process, some flickering might be visible because firstly the background has to be drawn and then the objects on it. For this reason, this type is not suitable when scrolling, dragging and animations are used. On the other hand, it has the smallest memory footprint because no extra graphics buffer is required.   </p>
 <p>To use unbuffered drawing set _LV_VDB_SIZE_ to 0 in _lv_conf.h_ and register the _disp_map_ and _disp_fill_functions. Here you can learn more about <a href="https://github.com/littlevgl/lvgl/wiki/Porting">Porting</a>.</p>
 <h4 id="buffered-drawing">Buffered drawing</h4>
 <p>The buffered drawing is similar to double buffering when two screen sized buffers are used (one for rendering and an other to display the last ready frame). However, LittlevGL&#39;s buffered drawing algorithm uses only one frame buffer and a small graphical buffer called Virtual Display Buffer (VDB). For VDB size ~1/10 screen size is typically enough. For a 320 × 240 screen with 16-bit colors, it means only 15 kB extra RAM.   </p>
 <p>With buffered drawing there is no flickering because the image is created firstly in the memory (VDB), therefore scrolling, dragging and animations can be used. In addition, it enables the use of other graphical effects like anti-aliasing, transparency (opacity) and shadows.   </p>
 <p>To use buffered drawing set _LV_VDB_SIZE_ to &gt; LV_HOR_RES in _lv_conf.h_ and register a _disp_flush_ function. </p>
 <p>In buffered mode, you can use <strong>double VDB</strong> to parallelly execute rendering into one VDB and copying pixels to your frame buffer from an other. The copy should use DMA or other hardware acceleration to work in the background to let the CPU to do other things. In _lv_conf.h_ the _LV_VDB_DOUBLE 1_ enables this feature.</p>
 <h4 id="buffered-vs-unbuffered-drawing">Buffered vs Unbuffered drawing</h4>
 <p>Keep in mind it&#39;s not sure that the unbuffered drawing is faster. During the rendering process, a pixel is overwritten multiple times (e.g. background, button, text are above each other). This way in unbuffered mode the library needs to access the external memory or display controller several times which is slower than writing/reading the internal RAM.</p>
 <p>The following table summarizes the differences between the two drawing methods:</p>
 <table>
 <thead>
 <tr>
 <th></th>
 <th>Unbuffered drawing</th>
 <th>Buffered drawing</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Memory usage</td>
 <td>No extra</td>
 <td>&gt;~1/10 screen</td>
 </tr>
 <tr>
 <td>Quality</td>
 <td>Flickering</td>
 <td>Flawless</td>
 </tr>
 <tr>
 <td>Antialiasing</td>
 <td>Not supported</td>
 <td>Supported</td>
 </tr>
 <tr>
 <td>Transparency</td>
 <td>Not supported</td>
 <td>Supported</td>
 </tr>
 <tr>
 <td>Shadows</td>
 <td>Not supported</td>
 <td>Supported</td>
 </tr>
 </tbody>
 </table>
 <h3 id="anti-aliasing">Anti-aliasing</h3>
 <p>In lv_conf.h you can enable the anti-aliasing with _LV_ANTIALIAS 1_. The anti-aliasing is supported only in buffered mode (LV_VDB_SIZE &gt; LV_HOR_RES). </p>
 <p>The anti-aliasing algorithm puts some translucent pixels (pixels with opacity) to make lines and curves (including corners with radius) smooth and even. Because it only puts some extra pixels anti-aliasing requires only a few extra computational power(~1,1x extra time compared to not anti-aliased configuration)</p>
 <p>As described in <a href="https://littlevgl.com/basics#fonts">Font section</a> the fonts can be anti-aliased by using a different font with higher bpp (Bit-Per-Pixel). This way the pixels of a font can be not only 0 or 1 but can be translucent. The supported bpp-s are 1, 2, 4 and 8. Keep in mind a font with higher bpp requires more ROM.</p>
 <p class="page" id="Animations"></p><h1>Animations</h1>
 <p><em>Written for v5.1</em></p>
 <p>You can automatically change the value (animate) of a variable between a start and an end value using an <strong>animator function</strong> with <code>void func(void* var,int32_t value)</code> prototype. The animation will happen by the periodical calling of the animator function with the corresponding value parameter.</p>
 <p>To <strong>create an animation</strong> you have to initializes an _lv_anim_t_ variable (there is a template in <a href="https://github.com/littlevgl/lvgl/blob/master/lv_misc/lv_anim.h">lv_anim.h</a>):</p>
 <pre class="hljs"><span class="hljs-keyword">lv_anim_t</span> a;                                
 a.var = button1;                             <span class="hljs-comment">/*Variable to animate*/</span>                        
 a.start = <span class="hljs-number">100</span>;                                 <span class="hljs-comment">/*Start value*/</span>
 a.end = <span class="hljs-number">300</span>;                                 <span class="hljs-comment">/*End value*/</span>
 a.fp = (<span class="hljs-keyword">lv_anim_fp_t</span>)lv_obj_set_height;                                 <span class="hljs-comment">/*Function to be used to animate*/</span>
 a.path = lv_anim_path_linear;                                            <span class="hljs-comment">/*Path of animation*/</span>
 a.end_cb = <span class="hljs-literal">NULL</span>;                               <span class="hljs-comment">/*Callback when the animation is ready*/</span>
 a.act_time = <span class="hljs-number">0</span>;                                 <span class="hljs-comment">/*Set &lt; 0 to make a delay [ms]*/</span>
 a.time = <span class="hljs-number">200</span>;                                 <span class="hljs-comment">/*Animation length [ms]*/</span>
 a.playback = <span class="hljs-number">0</span>;                                 <span class="hljs-comment">/*1: animate in reverse direction too when the normal is ready*/</span>
 a.playback_pause = <span class="hljs-number">0</span>;                                 <span class="hljs-comment">/*Wait before playback [ms]*/</span>
 a.repeat = <span class="hljs-number">0</span>;                                 <span class="hljs-comment">/*1: Repeat the animation (with or without playback)*/</span>
 a.repeat_pause = <span class="hljs-number">0</span>;                             <span class="hljs-comment">/*Wait before repeat [ms]*/</span>

 lv_anim_create(&amp;a);                          <span class="hljs-comment">/*Start the animation*/</span></pre><p>The <code>anim_create(&amp;a)</code> will register the animation and immediately <strong>applies the <em>start</em></strong> value regardless to the set delay.</p>
 <p>You can determinate the <strong>path of animation</strong>. In most simple case it is linear which means the current value between <em>start</em> and <em>end</em>  is changed linearly. A path is a function which calculates the next value to set based on the current state of the animation. Currently, there are two built-in paths: </p>
 <ul>
 <li><strong>lv_anim_path_linear</strong> linear animation</li>
 <li><strong>lv_anim_path_step</strong> change in one step at the end</li>
 </ul>
 <p>By default, you can set the animation time. But in some cases, the <strong>animation speed</strong> is more practical. The <code>lv_anim_speed_to_time(speed, start, end)</code> function calculates the required time in milliseconds to reach the end value from a start value with the given speed. The speed is interpreted in <em>unit/sec</em> dimension. For example <code>lv_anim_speed_to_time(20,0,100)</code> will give 5000 milliseconds.</p>
 <p>You can apply <strong>multiple different animations</strong> on the same variable at the same time. (For example animate the x and y coordinates with _lv_obj_set_x_ end _lv_obj_set_y_). But only one animation can exist with a given variable and function pair. Therefore the _lv_anim_create()_ function will delete the already existing variable-function animations. </p>
 <p>You can <strong>delete an animation</strong> by <code>lv_anim_del(var, func)</code> with providing the animated variable and its animator function.</p>
 <p class="page" id="Coding-Style-Guide"></p><h1>Coding Style Guide</h1>
 <p><em>Revision 2</em></p>
 <h2 id="file-format">File format</h2>
 <p>Use <a href="https://github.com/littlevgl/lvgl/blob/master/lv_misc/lv_templ.c">lv_misc/lv_templ.c</a> and <a href="https://github.com/littlevgl/lvgl/blob/master/lv_misc/lv_templ.h">lv_misc/lv_templ.h</a></p>
 <h2 id="naming-conventions">Naming conventions</h2>
 <ul>
 <li>Words are separated by &#39;_&#39;</li>
 <li>In variable and function names use only lower case letters (e.g. <em>height_tmp</em>)</li>
 <li>In enums and defines use only upper case letters (e.g. <em>e.g. MAX_LINE_NUM</em>)</li>
 <li>Global names (API):<ul>
 <li>starts with <em>lv</em></li>
 <li>followed by module name: <em>btn</em>, <em>label</em>, <em>style</em> etc.</li>
 <li>followed by the action (for functions): <em>set</em>, <em>get</em>, <em>refr</em> etc.</li>
 <li>closed with the subject: <em>name</em>, <em>size</em>, <em>state</em> etc. </li>
 </ul>
 </li>
 <li>Typedefs<ul>
 <li>prefer <code>typedef struct</code> and <code>typedef enum</code> instead of  <code>struct name</code> and <code>enum name</code></li>
 <li>always end <code>typedef struct</code> and <code>typedef enum</code> type names with <code>_t</code></li>
 </ul>
 </li>
 <li>Abbreviations:<ul>
 <li>Use abbreviations on public names only if they become longer than 32 characters </li>
 <li>Use only very straightforward (e.g. pos: position) or well-established (e.g. pr: press) abbreviations </li>
 </ul>
 </li>
 </ul>
 <h2 id="coding-guide">Coding guide</h2>
 <ul>
 <li>Functions:<ul>
 <li>Try to write function shorter than is 50 lines </li>
 <li>Always shorter than 100 lines (except very straightforwards) </li>
 </ul>
 </li>
 <li>Variables:<ul>
 <li>One line, one declaration (BAD: char x, y;)</li>
 <li>Use <code>&lt;stdint.h&gt;</code> (<em>uint8_t</em>, <em>int32_t</em> etc)</li>
 <li>Declare variables when needed (not all at function start)</li>
 <li>Use the smallest required scope</li>
 <li>Variables in a file (outside functions) are always <em>static</em></li>
 <li>Do not use global variables (use functions to set/get static variables)</li>
 </ul>
 </li>
 </ul>
 <h2 id="comments">Comments</h2>
 <p>Before every function have a comment like this:</p>
 <pre class="hljs"><span class="hljs-comment">/**
 * Return with the screen of an object
 * @param obj pointer to an object
 * @return pointer to a screen
 */</span>
 <span class="hljs-keyword">lv_obj_t</span> * lv_obj_get_scr(<span class="hljs-keyword">lv_obj_t</span> * obj); </pre><p>Always use <code>/* Something */</code> format and NOT <code>//Something</code></p>
 <p>Write readable code to avoid descriptive comments like: 
 <code>x++; /* Add 1 to x */</code>. 
 The code should show clearly what you are doing.</p>
 <p>You should write <strong>why</strong> have you done this: 
 <code>x++; /*Because of closing &#39;\0&#39; of the string */</code></p>
 <p>Short &quot;code summaries&quot; of a few lines are accepted. E.g. <code>/*Calculate the new coordinates*/</code></p>
 <p>In comments use ` ` when referring to a variable. E.g. <code>/*Update the value of `x_act`*/</code></p>
 <h3 id="formatting">Formatting</h3>
 <p>Here is example to show bracket placing and using of white spaces:</p>
 <pre class="hljs"><span class="hljs-comment">/**
 * Set a new text for a label. Memory will be allocated to store the text by the label.
 * @param label pointer to a label object
 * @param text '\0' terminated character string. NULL to refresh with the current text.
 */</span>
 <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">lv_label_set_text</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * label, <span class="hljs-keyword">const</span> <span class="hljs-keyword">char</span> * text)</span>
 </span>{   <span class="hljs-comment">/* Main brackets of functions in new line*/</span>

    <span class="hljs-keyword">if</span>(label == <span class="hljs-literal">NULL</span>) <span class="hljs-keyword">return</span>; <span class="hljs-comment">/*No bracket only if the command is inline with the if statement*/</span>

    lv_obj_inv(label);

    <span class="hljs-keyword">lv_label_ext_t</span> * ext = lv_obj_get_ext(label);

    <span class="hljs-comment">/*Comment before a section */</span>
    <span class="hljs-keyword">if</span>(text == ext-&gt;txt || text == <span class="hljs-literal">NULL</span>) {  <span class="hljs-comment">/*Bracket of statements start inline*/</span>
        lv_label_refr_text(label);
        <span class="hljs-keyword">return</span>;   
    }

    ...
 }</pre><p>Use 4 spaces indentation instead of tab.</p>
 <p>You can use <strong>astyle</strong> to format the code. The required config flies are: <code>docs/astyle_c</code> and <code>docs/astyle_h</code>.
 To format the source files: 
 <code>$ find . -type f -name &quot;*.c&quot; | xargs astyle --options=docs/astyle_c</code></p>
 <p>To format the header files:
 <code>$ find . -type f -name &quot;*.h&quot; | xargs astyle --options=docs/astyle_h</code></p>
 <p>Append <code>-n</code> to the end to skip creation of backup file OR use <code>$ find . -type f -name &quot;*.bak&quot;  -delete</code> (for source file&#39;s backups) and <code>find . -type f -name &quot;*.orig&quot; -delete</code> (for header file&#39;s backups)</p>
 <p class="page" id="Object-types"></p><h1>Object types</h1>
 <p><em>Written for v5.1</em></p>
 <p>The following pages contain detailed documentation for each of the objects in the Littlev Graphics Library.</p>
 <ul>
 <li><a href="#Base-object">Base object (lv_obj)</a></li>
 <li><a href="#Label">Label (lv_label)</a></li>
 <li><a href="#Image">Image (lv_img)</a></li>
 <li><a href="#Line">Line (lv_line)</a></li>
 <li><a href="#Arc">Arc (lv_arc)</a></li>
 <li><a href="#Container">Container (lv_cont)</a></li>
 <li><a href="#Page">Page (lv_page)</a></li>
 <li><a href="#Window">Window (lv_window)</a></li>
 <li><a href="#Tab-view">Tab view (lv_tabview)</a></li>
 <li><a href="#Bar">Bar (lv_bar)</a></li>
 <li><a href="#Line-meter">Line meter (lv_lmeter)</a></li>
 <li><a href="#Gauge">Gauge (lv_gauge)</a></li>
 <li><a href="#Chart">Chart (lv_chart)</a></li>
 <li><a href="#LED">LED (lv_led)</a></li>
 <li><a href="#Preloader">Preloader (lv_preload)</a></li>
 <li><a href="#Message-box">Message box (lv_mbox)</a></li>
 <li><a href="#Text-area">Text area (lv_ta)</a></li>
 <li><a href="#Calendar">Calendar (lv_calendar)</a></li>
 <li><a href="#Button">Button (lv_btn)</a></li>
 <li><a href="#Image-button">Image button (lv_imgbtn)</a></li>
 <li><a href="#Button-matrix">Button matrix (lv_btnm)</a></li>
 <li><a href="#Keyboard">Keyboard (lv_kb)</a></li>
 <li><a href="#List">List (lv_list)</a></li>
 <li><a href="#Drop-down-list">Drop down list (lv_ddlist)</a></li>
 <li><a href="#Roller">Roller (lv_roller)</a></li>
 <li><a href="#Check-box">Check box (lv_cb)</a></li>
 <li><a href="#Switch">Switch (lv_sw)</a></li>
 <li><a href="#Slider">Slider (lv_slider)</a></li>
 </ul>
 <p class="page" id="Arc"></p><h1>Arc (lv_arc)</h1>
 <p><em>Written for v5.2</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Arc object <strong>draws an arc</strong> within <strong>start and end angles</strong> and with a given <strong>tickness</strong>.</p>
 <p>To set the angles use the <code>lv_arc_set_angles(arc, start_angle, end_angle)</code> function. The zero degree is at the bottom of the object and the degrees are increasing in a counter-clockwise direction. The angles should be in [0;360] range.</p>
 <p>To <strong>set the style</strong> of an Arc object use <code>lv_arc_set_style(arc, LV_ARC_STYLE_MAIN, &amp;style)</code></p>
 <h2 id="style-usage">Style usage</h2>
 <ul>
 <li><strong>line.rounded</strong> make the endpoints rounded (opacity won&#39;t work properly if set to 1)</li>
 <li><strong>line.width</strong> the thickness of the arc</li>
 <li><strong>line.color</strong> the color of the arc.</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>The <strong>width and height</strong> of the Arc should be the <strong>same</strong></li>
 <li>Currently the Arc object <strong>does not support anti-aliasing</strong>.</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/arc-lv_arc.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create style for the Arcs*/</span>
 <span class="hljs-keyword">lv_style_t</span> style;
 lv_style_copy(&amp;style, &amp;lv_style_plain);
 style.line.color = LV_COLOR_BLUE;           <span class="hljs-comment">/*Arc color*/</span>
 style.line.width = <span class="hljs-number">8</span>;                       <span class="hljs-comment">/*Arc width*/</span>

 <span class="hljs-comment">/*Create an Arc*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * arc = lv_arc_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_arc_set_style(arc, LV_ARC_STYLE_MAIN, &amp;style);          <span class="hljs-comment">/*Use the new style*/</span>
 lv_arc_set_angles(arc, <span class="hljs-number">90</span>, <span class="hljs-number">60</span>);
 lv_obj_set_size(arc, <span class="hljs-number">150</span>, <span class="hljs-number">150</span>);
 lv_obj_align(arc, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);

 <span class="hljs-comment">/*Copy the previous Arc and set different angles and size*/</span>
 arc = lv_arc_create(lv_scr_act(), arc);
 lv_arc_set_angles(arc, <span class="hljs-number">90</span>, <span class="hljs-number">20</span>);
 lv_obj_set_size(arc, <span class="hljs-number">125</span>, <span class="hljs-number">125</span>);
 lv_obj_align(arc, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);

 <span class="hljs-comment">/*Copy the previous Arc and set different angles and size*/</span>
 arc = lv_arc_create(lv_scr_act(), arc);
 lv_arc_set_angles(arc, <span class="hljs-number">90</span>, <span class="hljs-number">310</span>);
 lv_obj_set_size(arc, <span class="hljs-number">100</span>, <span class="hljs-number">100</span>);
 lv_obj_align(arc, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);</pre><p class="page" id="Bar"></p><h1>Bar (lv_bar)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Bar objects have got two main parts: a <strong>background</strong> which is the object itself and an <strong>indicator</strong> which shape is similar to the background but its width/height can be adjusted. </p>
 <p>The orientation of the bar can be <strong>vertical or horizontal</strong> according to the width/height ratio. Logically on horizontal bars the indicator width, on vertical bars the indicator height can be changed. </p>
 <p>A <strong>new value</strong> can be set by: <code>lv_bar_set_value(bar, new_value)</code>. The value is interpreted in <strong>range</strong> (minimum and maximum values) which can be modified with: <code>lv_bar_set_range(bar, min, max)</code>. The default range is: 1..100.</p>
 <p>The setting of a new value can happen with an <strong>animation</strong> from the current value to the desired. In this case use <code>lv_bar_set_value_anim(bar, new_value, anim_time)</code>.</p>
 <h2 id="style-usage">Style usage</h2>
 <ul>
 <li><strong>background</strong> is a <a href="https://littlevgl.com/object-types/base-obj-lv_obj">Base object</a> therefore it uses its style elements. Its default style is: <code>LV_STYLE_PRETTY</code>.  </li>
 <li><strong>indicator</strong> is similar to the background. Its styles can be set by: <code>lv_bar_set_style_indic(bar,&amp;style_indic)</code>. It uses the <em>hpad</em> and <em>vpad</em> style elements to keep space from the background. Its default style is: <code>LV_STYLE_PRETTY_COLOR</code>.</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>The indicator is not a real object; it is only drawn by the bar.</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/bar-lv_bar.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a default bar*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * bar1 = lv_bar_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_size(bar1, <span class="hljs-number">200</span>, <span class="hljs-number">30</span>);
 lv_obj_align(bar1, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_RIGHT, <span class="hljs-number">-20</span>, <span class="hljs-number">30</span>);
 lv_bar_set_value(bar1, <span class="hljs-number">70</span>);

 <span class="hljs-comment">/*Create a label right to the bar*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * bar1_label = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_label_set_text(bar1_label, <span class="hljs-string">"Default"</span>);
 lv_obj_align(bar1_label, bar1, LV_ALIGN_OUT_LEFT_MID, <span class="hljs-number">-10</span>, <span class="hljs-number">0</span>);

 <span class="hljs-comment">/*Create a bar and an indicator style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_bar;
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_indic;

 lv_style_copy(&amp;style_bar, &amp;lv_style_pretty);
 style_bar.body.main_color = LV_COLOR_BLACK;
 style_bar.body.grad_color = LV_COLOR_GRAY;
 style_bar.body.radius = LV_RADIUS_CIRCLE;
 style_bar.body.border.color = LV_COLOR_WHITE;

 lv_style_copy(&amp;style_indic, &amp;lv_style_pretty);
 style_indic.body.grad_color =  LV_COLOR_GREEN;
 style_indic.body.main_color=  LV_COLOR_LIME;
 style_indic.body.radius = LV_RADIUS_CIRCLE;
 style_indic.body.shadow.width = <span class="hljs-number">10</span>;
 style_indic.body.shadow.color = LV_COLOR_LIME;
 style_indic.body.padding.hor = <span class="hljs-number">3</span>;           <span class="hljs-comment">/*Make the indicator a little bit smaller*/</span>
 style_indic.body.padding.ver = <span class="hljs-number">3</span>;

 <span class="hljs-comment">/*Create a second bar*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * bar2 = lv_bar_create(lv_scr_act(), bar1);
 lv_bar_set_style(bar2, LV_BAR_STYLE_BG, &amp;style_bar);
 lv_bar_set_style(bar2, LV_BAR_STYLE_INDIC, &amp;style_indic);
 lv_obj_align(bar2, bar1, LV_ALIGN_OUT_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">30</span>); <span class="hljs-comment">/*Align below 'bar1'*/</span>

 <span class="hljs-comment">/*Create a second label*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * bar2_label = lv_label_create(lv_scr_act(), bar1_label);
 lv_label_set_text(bar2_label, <span class="hljs-string">"Modified"</span>);
 lv_obj_align(bar2_label, bar2, LV_ALIGN_OUT_LEFT_MID, <span class="hljs-number">-10</span>, <span class="hljs-number">0</span>);</pre><p class="page" id="Base-object"></p><h1>Base object (lv_obj)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Base Object contains the <strong>most basic attributes</strong> of the objects:</p>
 <ul>
 <li>Coordinates</li>
 <li>Parent object</li>
 <li>Children</li>
 <li>Style</li>
 <li>Attributes like Click enable, Drag enable etc.</li>
 </ul>
 <p>You can set the <strong>x and y coordinates</strong> relative to the parent with <code>lv_obj_set_x(obj, new_x)</code> and <code>lv_obj_set_y(obj, new_y)</code> or in one function with <code>lv_obj_set_pos(obj, new_x, new_y)</code>. </p>
 <p>The <strong>object size</strong> can be modified with <code>lv_obj_set_width(obj, new_width)</code> and <code>lv_obj_set_height(obj, new_height)</code> or in one function with <code>lv_obj_set_size(obj, new_width, new_height)</code>. </p>
 <p>You can <strong>align</strong>  the object to an other with <code>lv_obj_align(obj1, obj2, LV_ALIGN_TYPE, x_shift, y_shift)</code>. The last two argument means an x and y shift after the alignment. The second argument is another object on which to align the first (<code>NULL</code> means: align to the parent). The third argument is the type of alignment:
 <img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/align.png" /></p>
 <p>The alignment types build like: <code>LV_ALIGN_OUT_TOP_MID</code>. For example to align a text below an image: <code>lv_obj_align(text, image, LV_ALIGN_OUT_BOTTOM_MID, 0, 10)</code>. Or to align a text in the middle of its parent: <code>lv_obj_align(text, NULL, LV_ALIGN_CENTER, 0, 0)</code>. </p>
 <p>You can set a <strong>new parent</strong> for an object with <code>lv_obj_set_parent(obj, new_parent)</code>.</p>
 <p>To get the children of an object use <code>lv_obj_get_child(obj, child_prev)</code> (from last to first) or <code>lv_obj_get_child_back(obj, child_prev)</code> (from first to last). To get the first child pass <em>NULL</em> as the second parameter and then the previous child (return value). The function will return with <em>NULL</em> when there are no more children.</p>
 <p>When you have created a <strong>screen</strong> like <code>lv_obj_create(NULL, NULL)</code> you can <strong>load</strong> it with <code>lv_scr_load(screen1)</code>. The <code>lv_scr_act()</code> function gives you a pointer to the <strong>current screen</strong>.</p>
 <p>There are <strong>two layers</strong> automatically generated layers:</p>
 <ul>
 <li>top layer</li>
 <li>system layer</li>
 </ul>
 <p>They are independent of the screens so objects created an that layers will be shown on every screen. The <em>top layer</em> is above every object on the screen and  <em>system layer</em> is above top layer too. You can add any pop-up windows <em>top layer</em> freely. But the <em>system layer</em> restricted to system level things (e.g. mouse cursor will be moved here). The <code>lv_layer_top()</code> and <code>lv_layer_sys()</code> functions gives a pointer to the top or system layer.</p>
 <p>You can set a <strong>new style</strong> for an object with the <code>lv_obj_set_style(obj, &amp;new_style)</code> function. If <code>NULL</code> is set as style then the object will inherit its parent&#39;s style. If you <strong>modify a style</strong> you have to <strong>notify the objects</strong> who are using the modified styled. You can use either <code>lv_obj_refresh_style(obj)</code> or to notify all object with a given style <code>lv_obj_report_style_mod(&amp;style)</code>. Set _lv_obj_report_style_mod_&#39;s parameter to <code>NULL</code> to notify all objects. </p>
 <p>There are some attributes which can be enabled/disabled by <code>lv_obj_set_...(obj, true/false)</code>:</p>
 <ul>
 <li><strong>hidden</strong> Hide the object. It will not be drawn and won&#39;t occupy space, Its children will be hidden too.</li>
 <li><strong>click</strong> Enabled to click the object via an input device (e.g. touch pad). If disabled then object behind this one will be checked during the input device click handling (useful with typically not clickable objects like Labels)</li>
 <li><strong>top</strong> If enabled then when this object or any of its children is clicked then this object comes to the foreground.</li>
 <li><strong>drag</strong> Enable dragging (moving by an input device)</li>
 <li><strong>drag_throw</strong> Enable &quot;throwing&quot; with dragging like the object would have momentum</li>
 <li><strong>drag_parent</strong> If enabled then the object&#39;s parent will be moved during dragging. </li>
 </ul>
 <p>There are some specific actions which happen automatically in the library. To prevent one or more that kind of actions you can <strong>protect the object</strong> against them. The following protections exists:</p>
 <ul>
 <li><strong>LV_PROTECT_NONE</strong> No protection</li>
 <li><strong>LV_PROTECT_POS</strong>  Prevent automatic positioning (e.g.  Layout in <a href="#Container">lv_cont</a>)</li>
 <li><strong>LV_PROTECT_FOLLOW</strong> Prevent the object be followed in automatic ordering (e.g. Layout in <a href="#Container">lv_cont</a>)</li>
 <li><strong>LV_PROTECT_PARENT</strong> Prevent automatic parent change</li>
 <li><strong>LV_PROTECT_CHILD_CHG</strong> Disable the child change signal. Used by the library</li>
 </ul>
 <p>The <code>lv_obj_set/clr_protect(obj, LV_PROTECT_...)</code> sets/clears the protection. You can use <em>&#39;OR&#39;ed</em> values of protection types too.</p>
 <p>There are <strong>built-in animations</strong> for the objects. The following animation types exist:</p>
 <ul>
 <li><strong>LV_ANIM_FLOAT_TOP</strong> Float from/to the top</li>
 <li><strong>LV_ANIM_FLOAT_LEFT</strong> Float from/to the left</li>
 <li><strong>LV_ANIM_FLOAT_BOTTOM</strong> Float from/to the bottom</li>
 <li><strong>LV_ANIM_FLOAT_RIGHT</strong> Float from/to the right</li>
 <li><strong>LV_ANIM_GROW_H</strong> Grow/shrink  horizontally</li>
 <li><strong>LV_ANIM_GROW_V</strong> Grow/shrink  vertically</li>
 </ul>
 <p>The <code>lv_obj_animate(obj, anim_type, time, delay, callback)</code> applies an animation on <em>obj</em>. To determinate the direction of the animation _OR_ _ANIM_IN_ or _ANIM_OUT_ with the animation type. The default is _ANIM_IN_ if not specified. You can learn more about the <a href="https://github.com/littlevgl/lvgl/wiki/Animations">animations</a>.</p>
 <h2 id="style-usage">Style usage</h2>
 <p>All <em>style.body</em> properties are used. Default for screens  _lv_style_plain_  and _lv_style_plain_color_ for normal objects</p>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/base-obj-lv_obj.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a simple base object*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * obj1;
 obj1 = lv_obj_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_size(obj1, <span class="hljs-number">150</span>, <span class="hljs-number">40</span>);
 lv_obj_set_style(obj1, &amp;lv_style_plain_color);
 lv_obj_align(obj1, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_MID, <span class="hljs-number">0</span>, <span class="hljs-number">40</span>);

 <span class="hljs-comment">/*Copy the previous object and enable drag*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * obj2;
 obj2 = lv_obj_create(lv_scr_act(), obj1);
 lv_obj_set_style(obj2, &amp;lv_style_pretty_color);
 lv_obj_set_drag(obj2, <span class="hljs-literal">true</span>);
 lv_obj_align(obj2, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);

 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_shadow;
 lv_style_copy(&amp;style_shadow, &amp;lv_style_pretty);
 style_shadow.body.shadow.width = <span class="hljs-number">6</span>;
 style_shadow.body.radius = LV_RADIUS_CIRCLE;

 <span class="hljs-comment">/*Copy the previous object (drag is already enabled)*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * obj3;
 obj3 = lv_obj_create(lv_scr_act(), obj2);
 lv_obj_set_style(obj3, &amp;style_shadow);
 lv_obj_align(obj3, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">-40</span>);</pre><p class="page" id="Button"></p><h1>Button (lv_btn)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>Buttons can react on user <strong>press</strong>, <strong>release</strong> or <strong>long press</strong> via callback functions (<code>lv_action_t</code> function pointers). You can set the callback functions with: <code>lv_btn_set_action(btn, ACTION_TYPE, callback_func)</code>. The possible action types are:</p>
 <ul>
 <li>LV_BTN_ACTION_CLICK: the button is released after pressing (clicked)</li>
 <li>LV_BTN_ACTION_PR: the button is pressed</li>
 <li>LV_BTN_ACTION_LONG_PR: the button is long pressed</li>
 <li>LV_BTN_ACTION_LONG_PR_REPEAT: the button is long pressed and this action is triggered periodically</li>
 </ul>
 <p>Buttons can be in one of the <strong>five possible states</strong>:</p>
 <ul>
 <li>LV_BTN_STATE_REL Released state</li>
 <li>LV_BTN_STATE_PR Pressed state</li>
 <li>LV_BTN_STATE_TGL_REL Toggled released state (On state)</li>
 <li>LV_BTN_STATE_TGL_PR Toggled pressed state (On pressed state)</li>
 <li>LV_BTN_STATE_INA Inactive state</li>
 </ul>
 <p>The buttons can be configured as <strong>toggle button</strong> with <code>lv_btn_set_toggle(btn, true)</code>. In this case on release, the button goes to toggled released state.</p>
 <p>You can set the button&#39;s state manually by: <code>lv_btn_set_state(btn, LV_BTN_STATE_TGL_REL)</code>.</p>
 <p>A button can go to <strong>Inactive state</strong> only manually (by _lv_btn_set_state()_). In an Inactive state, none of the action will be called.  </p>
 <p>Similarly to <a href="#Container">Containers</a> buttons also have <strong>layout</strong> and <strong>auto fit</strong>:</p>
 <ul>
 <li><code>lv_btn_set_layout(btn, LV_LAYOUT_...)</code>set a layout. The default is LV_LAYOUT_CENTER. So if you add a label then it will be automatically aligned to the middle.</li>
 <li><code>lv_btn_set_fit(btn, hor_en, ver_en)</code> enables to set the button width and/or height automatically according to the children.</li>
 </ul>
 <h2 id="style-usage">Style usage</h2>
 <p>A button van have 5 independent styles for the 5 state. You ca set them via: <code>lv_btn_set_style(btn, LV_BTN_STYLE_..., &amp;style)</code>. The styles uses the <em>style.body</em> properties.</p>
 <ul>
 <li><strong>LV_BTN_STYLE_REL</strong> style of the released state. Default: _lv_style_btn_rel_</li>
 <li><strong>LV_BTN_STYLE_PR</strong> style of the pressed state. Default: _lv_style_btn_pr_</li>
 <li><strong>LV_BTN_STYLE_TGL_REL</strong> style of the toggled released state. Default: _lv_style_btn_tgl_rel_</li>
 <li><strong>LV_BTN_STYLE_TGL_PR</strong> style of the toggled pressed state. Default: _lv_style_btn_tgl_pr_</li>
 <li><strong>LV_BTN_STYLE_INA</strong> style of the inactive state. Default: _lv_style_btn_ina_</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>If a button is dragged its click and long press action will not be called</li>
 <li>If a button was long pressed and its long press action was set then its click action will not be called</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/button-lv_btn.png" /></p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">btn_click_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * btn)</span>
 </span>{
    <span class="hljs-keyword">uint8_t</span> id = lv_obj_get_free_num(btn);

    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"Button %d is released\n"</span>, id);

    <span class="hljs-comment">/* The button is released.
     * Make something here */</span>

    <span class="hljs-keyword">return</span> LV_RES_OK; <span class="hljs-comment">/*Return OK if the button is not deleted*/</span>
 }

 .
 .
 .

 <span class="hljs-comment">/*Create a title label*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * label = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"Default buttons"</span>);
 lv_obj_align(label, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_MID, <span class="hljs-number">0</span>, <span class="hljs-number">5</span>);

 <span class="hljs-comment">/*Create a normal button*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * btn1 = lv_btn_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_cont_set_fit(btn1, <span class="hljs-literal">true</span>, <span class="hljs-literal">true</span>); <span class="hljs-comment">/*Enable resizing horizontally and vertically*/</span>
 lv_obj_align(btn1, label, LV_ALIGN_OUT_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">10</span>);
 lv_obj_set_free_num(btn1, <span class="hljs-number">1</span>);   <span class="hljs-comment">/*Set a unique number for the button*/</span>
 lv_btn_set_action(btn1, LV_BTN_ACTION_CLICK, btn_click_action);

 <span class="hljs-comment">/*Add a label to the button*/</span>
 label = lv_label_create(btn1, <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"Normal"</span>);

 <span class="hljs-comment">/*Copy the button and set toggled state. (The release action is copied too)*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * btn2 = lv_btn_create(lv_scr_act(), btn1);
 lv_obj_align(btn2, btn1, LV_ALIGN_OUT_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">10</span>);
 lv_btn_set_state(btn2, LV_BTN_STATE_TGL_REL);  <span class="hljs-comment">/*Set toggled state*/</span>
 lv_obj_set_free_num(btn2, <span class="hljs-number">2</span>);               <span class="hljs-comment">/*Set a unique number for the button*/</span>

 <span class="hljs-comment">/*Add a label to the toggled button*/</span>
 label = lv_label_create(btn2, <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"Toggled"</span>);

 <span class="hljs-comment">/*Copy the button and set inactive state.*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * btn3 = lv_btn_create(lv_scr_act(), btn1);
 lv_obj_align(btn3, btn2, LV_ALIGN_OUT_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">10</span>);
 lv_btn_set_state(btn3, LV_BTN_STATE_INA);   <span class="hljs-comment">/*Set inactive state*/</span>
 lv_obj_set_free_num(btn3, <span class="hljs-number">3</span>);               <span class="hljs-comment">/*Set a unique number for the button*/</span>

 <span class="hljs-comment">/*Add a label to the inactive button*/</span>
 label = lv_label_create(btn3, <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"Inactive"</span>);</pre><p class="page" id="Button-matrix"></p><h1>Button matrix (lv_btnm)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Button Matrix objects can display <strong>multiple buttons</strong> according to a descriptor string array, called <em>map</em>. You can specify the map with <code>lv_btnm_set_map(btnm, my_map)</code>. </p>
 <p>The <strong>declaration of a map</strong> looks like <code>const char * map[] = {&quot;btn1&quot;, &quot;btn2&quot;, &quot;btn3&quot;, &quot;&quot;}</code>. Note that <strong>the last element has to be an empty string</strong>!  </p>
 <p>The first character of a string can be a <strong>control character</strong> to specify some attributes:</p>
 <ul>
 <li><strong>bit 7..6</strong> Always <em>0b10</em> to differentiate the control byte from the textual characters</li>
 <li><strong>bit 5</strong> Inactive button</li>
 <li><strong>bit 4</strong> Hidden button</li>
 <li><strong>bit 3</strong> No long press for the button</li>
 <li><strong>bit 2..0</strong> Relative width compared to the buttons in the same row. [1..7]</li>
 </ul>
 <p>It is recommended to specify the <strong>control byte as an octal number</strong>. For example <code>&quot;\213button&quot;</code>. The octal number always starts with _2_ (bit 7..6) the middle part is the attributes (bit 5..3) and the last part is the width (bit 2..0). So the example describes a 3 unit wide, hidden button.</p>
 <p>Use &quot;\n&quot; in the map  to make <strong>line break</strong>: <code>{&quot;btn1&quot;, &quot;btn2&quot;, &quot;\n&quot;, &quot;btn3&quot;, &quot;&quot;}</code>. The button&#39;s width is recalculated in every line.</p>
 <p>The <code>lv_btnm_set_action(btnm, btnm_action)</code> specifies an action to call when a button is released. </p>
 <p>You can enable the <strong>buttons to toggle</strong> when they are clicked. There can only be one toggled button at a time. The <code>lv_btnm_set_toggle(btnm, true, id)</code> enables the toggling and sets the _id_th button to the toggled state.</p>
 <h2 id="style-usage">Style usage</h2>
 <p>The Button matrix works with 6 styles: a background and 5 button styles for each states. You can set the styles with <code>lv_btnm_set_style(btn, LV_BTNM_STYLE_..., &amp;style)</code>. The background and the buttons use the <em>style.body</em> properties. The labels use the <em>style.text</em> properties of the button styles.</p>
 <ul>
 <li><strong>LV_BTNM_STYLE_BG</strong> Background style. Uses all <em>style.body</em> properties including <em>padding</em> Default: _lv_style_pretty_</li>
 <li><strong>LV_BTNM_STYLE_BTN_REL</strong> style of the released  buttons. Default: _lv_style_btn_rel_</li>
 <li><strong>LV_BTNM_STYLE_BTN_PR</strong> style of the pressed buttons. Default: _lv_style_btn_pr_</li>
 <li><strong>LV_BTNM_STYLE_BTN_TGL_REL</strong> style of the toggled released  buttons. Default: _lv_style_btn_tgl_rel_</li>
 <li><strong>LV_BTNM_STYLE_BTN_TGL_PR</strong> style of the toggled pressed  buttons. Default: _lv_style_btn_tgl_pr_</li>
 <li><strong>LV_BTNM_STYLE_BTN_INA</strong> style of the inactive  buttons. Default: _lv_style_btn_ina_</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>The Button matrix object is <strong>very light weighted</strong>. It creates only the Background Base object and draws the buttons on it instead of creating a lot of real button.</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/button-matrix-lv_btnm.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Called when a button is released ot long pressed*/</span>
 <span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">btnm_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * btnm, <span class="hljs-keyword">const</span> <span class="hljs-keyword">char</span> *txt)</span>
 </span>{
    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"Button: %s released\n"</span>, txt);

    <span class="hljs-keyword">return</span> LV_RES_OK; <span class="hljs-comment">/*Return OK because the button matrix is not deleted*/</span>
 }


 .
 .
 .

 <span class="hljs-comment">/*Create a button descriptor string array*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">const</span> <span class="hljs-keyword">char</span> * btnm_map[] = {<span class="hljs-string">"1"</span>, <span class="hljs-string">"2"</span>, <span class="hljs-string">"3"</span>, <span class="hljs-string">"4"</span>, <span class="hljs-string">"5"</span>, <span class="hljs-string">"\n"</span>,
                           <span class="hljs-string">"6"</span>, <span class="hljs-string">"7"</span>, <span class="hljs-string">"8"</span>, <span class="hljs-string">"9"</span>, <span class="hljs-string">"0"</span>, <span class="hljs-string">"\n"</span>,
                           <span class="hljs-string">"\202Action1"</span>, <span class="hljs-string">"Action2"</span>, <span class="hljs-string">""</span>};




 <span class="hljs-comment">/*Create a default button matrix*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * btnm1 = lv_btnm_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_btnm_set_map(btnm1, btnm_map);
 lv_btnm_set_action(btnm1, btnm_action);
 lv_obj_set_size(btnm1, LV_HOR_RES, LV_VER_RES / <span class="hljs-number">2</span>);

 <span class="hljs-comment">/*Create a new style for the button matrix back ground*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_bg;
 lv_style_copy(&amp;style_bg, &amp;lv_style_plain);
 style_bg.body.main_color = LV_COLOR_SILVER;
 style_bg.body.grad_color = LV_COLOR_SILVER;
 style_bg.body.padding.hor = <span class="hljs-number">0</span>;
 style_bg.body.padding.ver = <span class="hljs-number">0</span>;
 style_bg.body.padding.inner = <span class="hljs-number">0</span>;

 <span class="hljs-comment">/*Create 2 button styles*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_btn_rel;
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_btn_pr;
 lv_style_copy(&amp;style_btn_rel, &amp;lv_style_btn_rel);
 style_btn_rel.body.main_color = LV_COLOR_MAKE(<span class="hljs-number">0x30</span>, <span class="hljs-number">0x30</span>, <span class="hljs-number">0x30</span>);
 style_btn_rel.body.grad_color = LV_COLOR_BLACK;
 style_btn_rel.body.border.color = LV_COLOR_SILVER;
 style_btn_rel.body.border.width = <span class="hljs-number">1</span>;
 style_btn_rel.body.border.opa = LV_OPA_50;
 style_btn_rel.body.radius = <span class="hljs-number">0</span>;

 lv_style_copy(&amp;style_btn_pr, &amp;style_btn_rel);
 style_btn_pr.body.main_color = LV_COLOR_MAKE(<span class="hljs-number">0x55</span>, <span class="hljs-number">0x96</span>, <span class="hljs-number">0xd8</span>);
 style_btn_pr.body.grad_color = LV_COLOR_MAKE(<span class="hljs-number">0x37</span>, <span class="hljs-number">0x62</span>, <span class="hljs-number">0x90</span>);
 style_btn_pr.text.color = LV_COLOR_MAKE(<span class="hljs-number">0xbb</span>, <span class="hljs-number">0xd5</span>, <span class="hljs-number">0xf1</span>);

 <span class="hljs-comment">/*Create a second button matrix with the new styles*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * btnm2 = lv_btnm_create(lv_scr_act(), btnm1);
 lv_btnm_set_style(btnm2, LV_BTNM_STYLE_BG, &amp;style_bg);
 lv_btnm_set_style(btnm2, LV_BTNM_STYLE_BTN_REL, &amp;style_btn_rel);
 lv_btnm_set_style(btnm2, LV_BTNM_STYLE_BTN_PR, &amp;style_btn_pr);
 lv_obj_align(btnm2, btnm1, LV_ALIGN_OUT_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);</pre><p class="page" id="Calendar"></p><h1>Calendar (lv_calendar)</h1>
 <p><em>Written for v5.2</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Calendar object is a classic calendar which can:</p>
 <ul>
 <li>highlight the current day and week</li>
 <li>highlight any user-defined dates</li>
 <li>display the name of the days</li>
 <li>go the next/previous month by button click</li>
 </ul>
 <p>The set and get dates in the calendar the <code>lv_calendar_date_t</code> type is used which is a structure with <code>year</code>, <code>month</code> and <code>day</code> fields.</p>
 <p>To set the <strong>current date</strong> use the <code>lv_calendar_set_today_date(calendar, &amp;today_date)</code> function.</p>
 <p>To set the <strong>shown date</strong> use <code>lv_calendar_set_shown_date(calendar, &amp;shown_date)</code>;</p>
 <p>The list of <strong>highlighted dates</strong> should be stired in a <code>lv_calendar_date_t</code> array and passed this array can be passed to <code>lv_calendar_set_hoghlighted_dates(calendar, &amp;highlighted_dates)</code>.<br>Only the arrays pointer will be saved so the array should be a static or global variable. </p>
 <p>The <strong>name of the days</strong> can be adjusted with <code>lv_calendar_set_day_names(calendar, day_names)</code> where <code>day_names</code> looks like <code>const char * day_names[7] = {&quot;Su&quot;, &quot;Mo&quot;, ...};</code></p>
 <p>A<strong>action to select a date</strong> will be supported in <code>v5.3</code> and now available in the <code>dev-5.3</code> branch for experimental usage.</p>
 <h2 id="style-usage">Style usage</h2>
 <ul>
 <li><strong>LV_CALENDAR_STYLE_BG</strong> Style of the background using the <code>body</code> properties and the style of the data numbers using the <code>text</code> properties. </li>
 <li><strong>LV_CALENDAR_STYLE_HEADER</strong> Style of the header where the current year and month is displayed. <code>body</code> and <code>text</code> properties are used.</li>
 <li><strong>LV_CALENDAR_STYLE_HEADER_PR</strong> Pressed header style, used when the next/prev. month button is being pressed. <code>text</code> properties are used by the arrows.</li>
 <li><strong>LV_CALENDAR_STYLE_DAY_NAMES</strong> Style of the day names. <code>text</code> properties are used by the day texts and <code>body.padding.ver</code> determines the space above the day names.</li>
 <li><strong>LV_CALENDAR_STYLE_HIGHLIGHTED_DAYS</strong> <code>text</code> properties are used to adjust the style of the highlights days</li>
 <li><strong>LV_CALENDAR_STYLE_INACTIVE_DAYS</strong> <code>text</code> properties are used to adjust the style of the visible days of previous/next month.</li>
 <li><strong>LV_CALENDAR_STYLE_WEEK_BOX</strong> <code>body</code> properties are used to set the style of the week box</li>
 <li><strong>LV_CALENDAR_STYLE_TODAY_BOX</strong> <code>body</code> and <code>text</code> properties are used to set the style of the today box</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/calendar-lv_calendar.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a Calendar object*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * calendar = lv_calendar_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_size(calendar, <span class="hljs-number">240</span>, <span class="hljs-number">220</span>);
 lv_obj_align(calendar, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);

 <span class="hljs-comment">/*Create a style for the current week*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_week_box;
 lv_style_copy(&amp;style_week_box, &amp;lv_style_plain);
 style_week_box.body.border.width = <span class="hljs-number">1</span>;
 style_week_box.body.border.color = LV_COLOR_HEX3(<span class="hljs-number">0x333</span>);
 style_week_box.body.empty = <span class="hljs-number">1</span>;
 style_week_box.body.radius = LV_RADIUS_CIRCLE;
 style_week_box.body.padding.ver = <span class="hljs-number">3</span>;
 style_week_box.body.padding.hor = <span class="hljs-number">3</span>;

 <span class="hljs-comment">/*Create a style for today*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_today_box;
 lv_style_copy(&amp;style_today_box, &amp;lv_style_plain);
 style_today_box.body.border.width = <span class="hljs-number">2</span>;
 style_today_box.body.border.color = LV_COLOR_NAVY;
 style_today_box.body.empty = <span class="hljs-number">1</span>;
 style_today_box.body.radius = LV_RADIUS_CIRCLE;
 style_today_box.body.padding.ver = <span class="hljs-number">3</span>;
 style_today_box.body.padding.hor = <span class="hljs-number">3</span>;
 style_today_box.text.color= LV_COLOR_BLUE;

 <span class="hljs-comment">/*Create a style for the highlighted days*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_highlighted_day;
 lv_style_copy(&amp;style_highlighted_day, &amp;lv_style_plain);
 style_highlighted_day.body.border.width = <span class="hljs-number">2</span>;
 style_highlighted_day.body.border.color = LV_COLOR_NAVY;
 style_highlighted_day.body.empty = <span class="hljs-number">1</span>;
 style_highlighted_day.body.radius = LV_RADIUS_CIRCLE;
 style_highlighted_day.body.padding.ver = <span class="hljs-number">3</span>;
 style_highlighted_day.body.padding.hor = <span class="hljs-number">3</span>;
 style_highlighted_day.text.color= LV_COLOR_BLUE;

 <span class="hljs-comment">/*Apply the styles*/</span>
 lv_calendar_set_style(calendar, LV_CALENDAR_STYLE_WEEK_BOX, &amp;style_week_box);
 lv_calendar_set_style(calendar, LV_CALENDAR_STYLE_TODAY_BOX, &amp;style_today_box);
 lv_calendar_set_style(calendar, LV_CALENDAR_STYLE_HIGHLIGHTED_DAYS, &amp;style_highlighted_day);


 <span class="hljs-comment">/*Set the today*/</span>
 <span class="hljs-keyword">lv_calendar_date_t</span> today;
 today.year = <span class="hljs-number">2018</span>;
 today.month = <span class="hljs-number">10</span>;
 today.day = <span class="hljs-number">23</span>;

 lv_calendar_set_today_date(calendar, &amp;today);
 lv_calendar_set_showed_date(calendar, &amp;today);

 <span class="hljs-comment">/*Highlight some days*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_calendar_date_t</span> highlihted_days[<span class="hljs-number">3</span>];       <span class="hljs-comment">/*Only it's pointer will be saved so should be static*/</span>
 highlihted_days[<span class="hljs-number">0</span>].year = <span class="hljs-number">2018</span>;
 highlihted_days[<span class="hljs-number">0</span>].month = <span class="hljs-number">10</span>;
 highlihted_days[<span class="hljs-number">0</span>].day = <span class="hljs-number">6</span>;

 highlihted_days[<span class="hljs-number">1</span>].year = <span class="hljs-number">2018</span>;
 highlihted_days[<span class="hljs-number">1</span>].month = <span class="hljs-number">10</span>;
 highlihted_days[<span class="hljs-number">1</span>].day = <span class="hljs-number">11</span>;

 highlihted_days[<span class="hljs-number">2</span>].year = <span class="hljs-number">2018</span>;
 highlihted_days[<span class="hljs-number">2</span>].month = <span class="hljs-number">11</span>;
 highlihted_days[<span class="hljs-number">2</span>].day = <span class="hljs-number">22</span>;

 lv_calendar_set_highlighted_dates(calendar, highlihted_days, <span class="hljs-number">3</span>);</pre><p class="page" id="Chart"></p><h1>Chart (lv_chart)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>Charts have a rectangle-like background with horizontal and vertical division lines. You can add any number of <strong>series</strong> to the charts by <code>lv_chart_add_series(chart, color)</code>. It allocates data for a <code>lv_chart_series_t</code> structure which contains the chosen <em>color</em> and an array for the data. </p>
 <p>You have several options to set the data of series:</p>
 <ol>
 <li>Set the values manually in the array like <code>ser1-&amp;gt;points[3] = 7</code> and refresh the chart with <code>lv_chart_refresh(chart)</code>.</li>
 <li>Use the <code>lv_chart_set_next(chart, ser, value)</code> function to shift all data to left and set a new data on the most right position.</li>
 <li>Initialize all points to a given value with: <code>lv_chart_init_points(chart, ser, value)</code>.</li>
 <li>Set all points from an array with: <code>lv_chart_set_points(chart, ser, value_array)</code>.</li>
 </ol>
 <p>There are four <strong>data display types</strong>:</p>
 <ul>
 <li>LV_CHART_TYPE_NONE: do not display the points. It can be used if you would like to add your own draw method.</li>
 <li>LV_CHART_TYPE_LINE: draw lines between the points</li>
 <li>LV_CHART_TYPE_COL: Draw columns</li>
 <li>LV_CHART_TYPE_POINT: Draw points</li>
 </ul>
 <p>You can specify the display type with <code>lv_chart_set_type(chart, TYPE)</code>. The <code>LV_CHART_TYPE_LINE | LV_CHART_TYPE_POINT</code> type is also valid to draw both lines and points.</p>
 <p>You can specify a the <strong>min. and max. values in y</strong> directions with <code>lv_chart_set_range(chart, y_min, y_max)</code>. The value of the points will be scaled proportionally. The default range is: 0..100.</p>
 <p>The <strong>number of points</strong> in the  data lines can be modified by <code>lv_chart_set_point_count(chart, point_num)</code>. The default value is 10.</p>
 <p>The <strong>number of horizontal and vertical division lines</strong>  can be modified by <code>lv_chart_set_div_line_count(chart, hdiv_num, vdiv_num)</code>. The default settings are 3 horizontal and 5 vertical division lines.</p>
 <p>To set the <strong>line width</strong> and <strong>point radius</strong> use the <code>lv_chart_set_series_width(chart, size)</code> function. The default value is: 2.</p>
 <p>The *<em>opacity of the data lines</em> can be specified by <code>lv_chart_set_series_opa(chart, opa)</code>. The default value is: OPA_COVER.</p>
 <p>You can apply a <strong>dark color fade</strong> on the bottom of columns and points by <code>lv_chart_set_series_darking(chart, effect)</code> function. The default dark level is OPA_50.</p>
 <h2 id="style-usage">Style usage</h2>
 <ul>
 <li><strong>style.body</strong> properties set the background&#39;s appearance</li>
 <li><strong>style.line</strong> properties set the division lines&#39; appearance</li>
 </ul>
 <p>The series related parameters can be set directly for each chart with <code>lv_chart_set_series_width()</code>, <code>lv_chart_set_series_opa()</code> and  <code>lv_chart_set_series_dark()</code>.</p>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/chart-lv_chart.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a style for the chart*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style;
 lv_style_copy(&amp;style, &amp;lv_style_pretty);
 style.body.shadow.width = <span class="hljs-number">6</span>;
 style.body.shadow.color = LV_COLOR_GRAY;
 style.line.color = LV_COLOR_GRAY;

 <span class="hljs-comment">/*Create a chart*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * chart;
 chart = lv_chart_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_size(chart, <span class="hljs-number">200</span>, <span class="hljs-number">150</span>);
 lv_obj_set_style(chart, &amp;style);
 lv_obj_align(chart, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
 lv_chart_set_type(chart, LV_CHART_TYPE_POINT | LV_CHART_TYPE_LINE);   <span class="hljs-comment">/*Show lines and points too*/</span>
 lv_chart_set_series_opa(chart, LV_OPA_70);                            <span class="hljs-comment">/*Opacity of the data series*/</span>
 lv_chart_set_series_width(chart, <span class="hljs-number">4</span>);                                  <span class="hljs-comment">/*Line width and point radious*/</span>

 lv_chart_set_range(chart, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>);

 <span class="hljs-comment">/*Add two data series*/</span>
 <span class="hljs-keyword">lv_chart_series_t</span> * ser1 = lv_chart_add_series(chart, LV_COLOR_RED);
 <span class="hljs-keyword">lv_chart_series_t</span> * ser2 = lv_chart_add_series(chart, LV_COLOR_GREEN);

 <span class="hljs-comment">/*Set the next points on 'dl1'*/</span>
 lv_chart_set_next(chart, ser1, <span class="hljs-number">10</span>);
 lv_chart_set_next(chart, ser1, <span class="hljs-number">50</span>);
 lv_chart_set_next(chart, ser1, <span class="hljs-number">70</span>);
 lv_chart_set_next(chart, ser1, <span class="hljs-number">90</span>);

 <span class="hljs-comment">/*Directly set points on 'dl2'*/</span>
 ser2-&gt;points[<span class="hljs-number">0</span>] = <span class="hljs-number">90</span>;
 ser2-&gt;points[<span class="hljs-number">1</span>] = <span class="hljs-number">70</span>;
 ser2-&gt;points[<span class="hljs-number">2</span>] = <span class="hljs-number">65</span>;
 ser2-&gt;points[<span class="hljs-number">3</span>] = <span class="hljs-number">65</span>;
 ser2-&gt;points[<span class="hljs-number">4</span>] = <span class="hljs-number">65</span>;
 ser2-&gt;points[<span class="hljs-number">5</span>] = <span class="hljs-number">65</span>;

 lv_chart_refresh(chart); <span class="hljs-comment">/*Required after direct set*/</span></pre><p class="page" id="Check-box"></p><h1>Check box (lv_cb)</h1>
 <h2 id="overview">Overview</h2>
 <p>The Check Box objects are built from a Button <strong>background</strong> which contains an also Button <strong>bullet</strong> and a <strong>label</strong> to realize a classical check box. The <strong>text</strong> can be modified by the <code>lv_cb_set_text(cb, &quot;New text&quot;)</code> function.</p>
 <p>An <strong>action</strong> can assigned by <code>lv_cb_set_action(cb, action)</code>.</p>
 <p>You can manually <strong>check / un-check</strong> the Check box  via <code>lv_cb_set_checked(cb, state)</code>.</p>
 <h2 id="style-usage">Style usage</h2>
 <p>The Check box styles can be modified with <code>lv_cb_set_style(cb, LV_CB_STYLE_..., &amp;style)</code>.</p>
 <ul>
 <li><strong>LV_CB_STYLE_BG</strong> Background style. Uses all <em>style.body</em> properties. The label&#39;s style comes from  <em>style.text</em>. Default: _lv_style_transp_</li>
 <li><strong>LV_CB_STYLE_BOX_REL</strong> Style of the released box. Uses the <em>style.body</em> properties. Default: _lv_style_btn_rel_</li>
 <li><strong>LV_CB_STYLE_BOX_PR</strong> Style of the pressed box. Uses the <em>style.body</em> properties. Default: _lv_style_btn_pr_</li>
 <li><strong>LV_CB_STYLE_BOX_TGL_REL</strong> Style of the checked released box. Uses the <em>style.body</em> properties. Default: _lv_style_btn_tgl_rel_</li>
 <li><strong>LV_CB_STYLE_BOX_TGL_PR</strong> Style of the checked released box. Uses the <em>style.body</em> properties. Default: _lv_style_btn_tgl_pr_</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/check-box-lv_cb.png" /></p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">cb_release_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * cb)</span>
 </span>{
    <span class="hljs-comment">/*A check box is clicked*/</span>
    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"%s state: %d\n"</span>, lv_cb_get_text(cb), lv_cb_is_checked(cb));

    <span class="hljs-keyword">return</span> LV_RES_OK;
 }

 .
 .
 .


 <span class="hljs-comment">/********************************************
 * Create a container for the check boxes
 ********************************************/</span>

 <span class="hljs-comment">/*Create  border style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_border;
 lv_style_copy(&amp;style_border, &amp;lv_style_pretty_color);
 style_border.glass = <span class="hljs-number">1</span>;
 style_border.body.empty = <span class="hljs-number">1</span>;

 <span class="hljs-comment">/*Create a container*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * cont;
 cont = lv_cont_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_cont_set_layout(cont, LV_LAYOUT_COL_L);      <span class="hljs-comment">/*Arrange the children in a column*/</span>
 lv_cont_set_fit(cont, <span class="hljs-literal">true</span>, <span class="hljs-literal">true</span>);              <span class="hljs-comment">/*Fit the size to the content*/</span>
 lv_obj_set_style(cont, &amp;style_border);

 <span class="hljs-comment">/**************************
 * Create check boxes
 *************************/</span>

 <span class="hljs-comment">/*Create check box*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * cb;
 cb = lv_cb_create(cont, <span class="hljs-literal">NULL</span>);
 lv_cb_set_text(cb, <span class="hljs-string">"Potato"</span>);
 lv_cb_set_action(cb, cb_release_action);

 <span class="hljs-comment">/*Copy the previous check box*/</span>
 cb = lv_cb_create(cont, cb);
 lv_cb_set_text(cb, <span class="hljs-string">"Onion"</span>);

 <span class="hljs-comment">/*Copy the previous check box*/</span>
 cb = lv_cb_create(cont, cb);
 lv_cb_set_text(cb, <span class="hljs-string">"Carrot"</span>);

 <span class="hljs-comment">/*Copy the previous check box*/</span>
 cb = lv_cb_create(cont, cb);
 lv_cb_set_text(cb, <span class="hljs-string">"Salad"</span>);

 <span class="hljs-comment">/*Align the container to the middle*/</span>
 lv_obj_align(cont, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);</pre><p class="page" id="Container"></p><h1>Container (lv_cont)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The containers are <strong>rectangle-like object</strong> with some special features. </p>
 <p>You can apply a <strong>layout</strong> on the containers to automatically order their children. The layout spacing comes from style.body.padding.hor/ver/inner properties. The possible layout options:</p>
 <ul>
 <li>LV_LAYOUT_OFF: Do not align the children</li>
 <li>LV_LAYOUT_CENTER: Align children to the center in column and keep <em>pad.inner</em> space between them </li>
 <li>LV_LAYOUT_COL_L: Align children in a left justified column. Keep <em>pad.hor</em> space on the left, <em>pad.ver</em> space on the top and <em>pad.inner</em> space between the children.</li>
 <li>LV_LAYOUT_COL_M: Align children in centered column. Keep <em>pad.ver</em> space on the top and <em>pad.inner</em> space between the children.</li>
 <li>LV_LAYOUT_COL_R: Align children in a right justified column. Keep <em>pad.hor</em> space on the right, <em>pad.ver</em> space on the top and <em>pad.inner</em> space between the children.</li>
 <li>LV_LAYOUT_ROW_T: Align children in a top justified row. Keep <em>pad.hor</em> space on the left, <em>pad.ver</em> space on the top and <em>pad.inner</em> space between the children.</li>
 <li>LV_LAYOUT_ROW_M: Align children in centered row. Keep <em>pad.hor</em> space on the left and <em>pad.inner</em> space between the children.</li>
 <li>LV_LAYOUT_ROW_B: Align children in a bottom justified row. Keep <em>pad.hor</em> space on the left, <em>pad.ver</em> space on the bottom and <em>pad.inner</em> space between the children.</li>
 <li>LV_LAYOUT_PRETTY: Put as may objects as possible in a row (with at least <em>pad.inner</em> space and <em>pad.hor</em> space on the sides) and begin a new row. Divide the space in each line equally between the children. Keep <em>pad.ver</em> space on the top and <em>pad.inner</em> space between the lines.</li>
 <li>LV_LAYOUT_GRID: Similar to PRETTY LAYOUT but not divide horizontal space equally just let <em>pad.hor</em> space</li>
 </ul>
 <p>You can enable an <strong>auto fit</strong> feature which automatically set the container size to include all children. It will keep <em>pad.hor</em> space on the left and right and <em>pad.ver</em> space on the top an bottom. The auto fit can be enable horizontally, vertically or in both direction with <code>lv_cont_set_fit(cont, true, true)</code> function. The second parameter is the horizontal, the third parameter is the vertical fit enable.</p>
 <h2 id="style-usage">Style usage</h2>
 <ul>
 <li><strong>style.body</strong> properties are used.</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>You <strong>can&#39;t set the child position with hor/ver fit enabled</strong>. Let&#39;s imagine what happens. If you change the position of the only child when fit is enabled the the container will move/fit &quot;around&quot; the new position. If you have more objects on a container then you can align them relative to each other.  As a workaround you can create a small transparent object on the container. It will fix the container to not &quot;follow&quot; the children.</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/container-lv_cont.png" /></p>
 <pre class="hljs"><span class="hljs-keyword">lv_obj_t</span> * box1;
 box1 = lv_cont_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_style(box1, &amp;lv_style_pretty);
 lv_cont_set_fit(box1, <span class="hljs-literal">true</span>, <span class="hljs-literal">true</span>);

 <span class="hljs-comment">/*Add a text to the container*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * txt = lv_label_create(box1, <span class="hljs-literal">NULL</span>);
 lv_label_set_text(txt, <span class="hljs-string">"Lorem ipsum dolor\n"</span>
                       <span class="hljs-string">"sit amet, consectetur\n"</span>
                       <span class="hljs-string">"adipiscing elit, sed do\n"</span>
                       <span class="hljs-string">"eiusmod tempor incididunt\n"</span>
                       <span class="hljs-string">"ut labore et dolore\n"</span>
                       <span class="hljs-string">"magna aliqua."</span>);

 lv_obj_align(box1, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_LEFT, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>);      <span class="hljs-comment">/*Align the container*/</span>

 <span class="hljs-comment">/*Create a style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style;
 lv_style_copy(&amp;style, &amp;lv_style_pretty_color);
 style.body.shadow.width = <span class="hljs-number">6</span>;
 style.body.padding.hor = <span class="hljs-number">5</span>;                                 <span class="hljs-comment">/*Set a great horizontal padding*/</span>

 <span class="hljs-comment">/*Create an other container*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * box2;
 box2 = lv_cont_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_style(box2, &amp;style);     <span class="hljs-comment">/*Set the new style*/</span>
 lv_cont_set_fit(box2, <span class="hljs-literal">true</span>, <span class="hljs-literal">false</span>); <span class="hljs-comment">/*Do not enable the vertical fit */</span>
 lv_obj_set_height(box2, <span class="hljs-number">55</span>);        <span class="hljs-comment">/*Set a fix height*/</span>

 <span class="hljs-comment">/*Add a text to the new container*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * txt2 = lv_label_create(box2, <span class="hljs-literal">NULL</span>);
 lv_label_set_text(txt2, <span class="hljs-string">"No vertical fit 1...\n"</span>
                        <span class="hljs-string">"No vertical fit 2...\n"</span>
                        <span class="hljs-string">"No vertical fit 3...\n"</span>
                        <span class="hljs-string">"No vertical fit 4..."</span>);

 <span class="hljs-comment">/*Align the container to the bottom of the previous*/</span>
 lv_obj_align(box2, box1, LV_ALIGN_OUT_BOTTOM_MID, <span class="hljs-number">30</span>, <span class="hljs-number">-30</span>);</pre><p class="page" id="Drop-down-list"></p><h1>Drop down list (lv_ddlist)</h1>
 <p><em>Written for v5.3, revision 2</em></p>
 <h2 id="overview">Overview</h2>
 <p>Drop Down Lists allow you to simply <strong>select one option from more</strong>. The Drop Down List is closed by default an show the currently selected text. If you click on it the this list opens and all the options are shown.</p>
 <p>The <strong>options</strong> are passed to the Drop Down List as a <strong>string</strong> with <code>lv_ddlist_set_options(ddlist, options)</code>. The options should be separated by <code>\n</code>. For example: <code>&quot;First\nSecond\nThird&quot;</code>.</p>
 <p>You can <strong>select an option manually</strong> with <code>lv_ddlist_set_selected(ddlist, id)</code>, where _id_ is the index of an option.</p>
 <p>A <strong>callback function</strong> can be specified with <code>lv_ddlist_set_action(ddlist, my_action)</code> to call when a new option is selected.</p>
 <p>By default the list&#39;s <strong>height</strong> is adjusted automatically to show all options. The <code>lv_ddlist_set_fix_height(ddlist, h)</code> sets a fixed height for the opened list.</p>
 <p>The <strong>width</strong> is also adjusted automatically. To prevent this apply <code>lv_ddlist_set_hor_fit(ddlist, false)</code> and set the width manually by <code>lv_obj_set_width(ddlist, width)</code>.</p>
 <p>Similarly to <a href="#Page">Page</a> with fix height the Drop Down List supports various <strong>scrollbar display modes</strong>. It can be set by <code>lv_ddlist_set_sb_mode(ddlist, LV_SB_MODE_...)</code>.</p>
 <p>The Drop Down List open/close animation time is adjusted by <code>lv_ddlist_set_anim_time(ddlist, anim_time)</code>. Zero animation time means no animation.</p>
 <p><strong>New in v5.3</strong> is the ability to enable an arrow on the side of the drop down list. To use this feature you can call <code>lv_ddlist_set_draw_arrow(ddlist, true)</code>.</p>
 <h2 id="style-usage">Style usage</h2>
 <p>The <code>lv_ddlist_set_style(ddlist, LV_DDLIST_STYLE_..., &amp;style)</code> set the styles of a Drop Down List.</p>
 <ul>
 <li><strong>LV_DDLIST_STYLE_BG</strong> Style of the background. All <em>style.body</em> properties are used. It is used for the label&#39;s style from <em>style.text</em>. Default: _lv_style_pretty_</li>
 <li><strong>LV_DDLIST_STYLE_SEL</strong> Style of the selected option.  The <em>style.body</em> properties are used. The selected option will be recolored with <em>text.color</em>. Default: _lv_style_plain_color_</li>
 <li><strong>LV_DDLIST_STYLE_SB</strong> Style of the scrollbar. The <em>style.body</em> properties are used. Default: _lv_style_plain_color_</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/drop-down-list-lv_ddlist.png" /></p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">ddlist_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * ddlist)</span>
 </span>{
    <span class="hljs-keyword">uint8_t</span> id = lv_obj_get_free_num(ddlist);

    <span class="hljs-keyword">char</span> sel_str[<span class="hljs-number">32</span>];
    lv_ddlist_get_selected_str(ddlist, sel_str);
    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"Ddlist %d new option: %s \n"</span>, id, sel_str);

    <span class="hljs-keyword">return</span> LV_RES_OK; <span class="hljs-comment">/*Return OK if the drop down list is not deleted*/</span>
 }


 .
 .
 .

 <span class="hljs-comment">/*Create a drop down list*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * ddl1 = lv_ddlist_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_ddlist_set_options(ddl1, <span class="hljs-string">"Apple\n"</span>
                            <span class="hljs-string">"Banana\n"</span>
                            <span class="hljs-string">"Orange\n"</span>
                            <span class="hljs-string">"Melon\n"</span>
                            <span class="hljs-string">"Grape\n"</span>
                            <span class="hljs-string">"Raspberry"</span>);
 lv_obj_align(ddl1, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_LEFT, <span class="hljs-number">30</span>, <span class="hljs-number">10</span>);
 lv_obj_set_free_num(ddl1, <span class="hljs-number">1</span>);               <span class="hljs-comment">/*Set a unique ID*/</span>
 lv_ddlist_set_action(ddl1, ddlist_action);  <span class="hljs-comment">/*Set a function to call when anew option is chosen*/</span>

 <span class="hljs-comment">/*Create a style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_bg;
 lv_style_copy(&amp;style_bg, &amp;lv_style_pretty);
 style_bg.body.shadow.width = <span class="hljs-number">4</span>; <span class="hljs-comment">/*Enable the shadow*/</span>
 style_bg.text.color = LV_COLOR_MAKE(<span class="hljs-number">0x10</span>, <span class="hljs-number">0x20</span>, <span class="hljs-number">0x50</span>);

 <span class="hljs-comment">/*Copy the drop down list and set the new style_bg*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * ddl2 = lv_ddlist_create(lv_scr_act(), ddl1);
 lv_obj_align(ddl2, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_RIGHT, <span class="hljs-number">-30</span>, <span class="hljs-number">10</span>);
 lv_obj_set_free_num(ddl2, <span class="hljs-number">2</span>);       <span class="hljs-comment">/*Set a unique ID*/</span>
 lv_obj_set_style(ddl2, &amp;style_bg);</pre><p class="page" id="Gauge"></p><h1>Gauge (lv_gauge)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The gauge is a meter with <strong>scale labels</strong> and <strong>needles</strong>. You can use the <code>lv_gauge_set_scale(gauge, angle, line_num, label_cnt)</code> function to adjust the scale angle and the number of the scale lines and labels. The default settings are:  220 degrees, 6 scale labels and 21 lines.</p>
 <p>The gauge can show <strong>more then one needles</strong> . Use the <code>lv_gauge_set_needle_count(gauge, needle_num, color_array)</code> function to set the number of needles and an array with colors for each needle. (The array must be static or global variable).</p>
 <p>You can use <code>lv_gauge_set_value(gauge, needle_id, value)</code> to <strong>set the value of a needle</strong>.</p>
 <p>To set a <strong>critical value</strong> use <code>lv_gauge_set_critical_value(gauge, value)</code>. The scale color ill be changed to <em>line.color</em> after this value. (default: 80)</p>
 <p>The <strong>range</strong> of the gauge can be specified by <code>lv_gauge_set_range(gauge, min, max)</code>.</p>
 <h2 id="style-usage">Style usage</h2>
 <p>The gauge uses one style which can be set by <code>lv_gauge_set_style(gauge, &amp;style)</code>. The gauge&#39;s properties are derived from the following style attributes:</p>
 <ul>
 <li><strong>body.main_color</strong> line&#39;s color at the beginning of the scale</li>
 <li><strong>body.grad_color</strong> line&#39;s color at the end of the scale (gradient with main color)</li>
 <li><strong>body.padding.hor</strong> line length</li>
 <li><strong>body.padding.inner</strong> label distance from the scale lines </li>
 <li><strong>line.width</strong> line width</li>
 <li><strong>line.color</strong> line&#39;s color after the critical value</li>
 <li><strong>text.font/color/letter_space</strong> label attributes</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/gauge-lv_gauge.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style;
 lv_style_copy(&amp;style, &amp;lv_style_pretty_color);
 style.body.main_color = LV_COLOR_HEX3(<span class="hljs-number">0x666</span>);     <span class="hljs-comment">/*Line color at the beginning*/</span>
 style.body.grad_color =  LV_COLOR_HEX3(<span class="hljs-number">0x666</span>);    <span class="hljs-comment">/*Line color at the end*/</span>
 style.body.padding.hor = <span class="hljs-number">10</span>;                      <span class="hljs-comment">/*Scale line length*/</span>
 style.body.padding.inner = <span class="hljs-number">8</span> ;                    <span class="hljs-comment">/*Scale label padding*/</span>
 style.body.border.color = LV_COLOR_HEX3(<span class="hljs-number">0x333</span>);   <span class="hljs-comment">/*Needle middle circle color*/</span>
 style.line.width = <span class="hljs-number">3</span>;
 style.text.color = LV_COLOR_HEX3(<span class="hljs-number">0x333</span>);
 style.line.color = LV_COLOR_RED;                  <span class="hljs-comment">/*Line color after the critical value*/</span>


 <span class="hljs-comment">/*Describe the color for the needles*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_color_t</span> needle_colors[] = {LV_COLOR_BLUE, LV_COLOR_ORANGE, LV_COLOR_PURPLE};

 <span class="hljs-comment">/*Create a gauge*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * gauge1 = lv_gauge_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_gauge_set_style(gauge1, &amp;style);
 lv_gauge_set_needle_count(gauge1, <span class="hljs-number">3</span>, needle_colors);
 lv_obj_align(gauge1, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">20</span>);

 <span class="hljs-comment">/*Set the values*/</span>
 lv_gauge_set_value(gauge1, <span class="hljs-number">0</span>, <span class="hljs-number">10</span>);
 lv_gauge_set_value(gauge1, <span class="hljs-number">1</span>, <span class="hljs-number">20</span>);
 lv_gauge_set_value(gauge1, <span class="hljs-number">2</span>, <span class="hljs-number">30</span>);</pre><p class="page" id="Image"></p><h1>Image (lv_img)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Images are the basic object to <strong>display images</strong>. To provide maximum flexibility the <strong>source of the image</strong> can be:</p>
 <ul>
 <li>a variable in the code (a C array with the pixels)</li>
 <li>a file stored externally (like on an SD card)</li>
 <li>a text with <a href="https://littlevgl.com/basics#symbol-fonts">Symbols</a></li>
 </ul>
 <p>To set the source of an image the <code>lv_img_set_src</code> function can be used. </p>
 <p>To generate a pixel array <strong>from a PNG, JPG or BMP</strong> image use the <a href="https://littlevgl.com/image-to-c-array">Online image converter tool</a> and set the converted image with its pointer: </p>
 <pre class="hljs">lv_img_set_src(img1, &amp;converted_img_var);</pre><p>To use <strong>external files</strong> you also need to convert the image files using the online converter tool but now you should select the binary Output format.  To see how to handle external image files from LittlevGL check the <a href="https://github.com/littlevgl/lv_examples/tree/master/lv_tutorial/6_images">Tutorial</a>.  </p>
 <p>You can set a <strong>symbol</strong>  from lv_symbol_def.h too. In this case, the image will be rendered as text according to the <strong>font</strong> specified in the style.  It enables to use light weighted mono-color 
 &quot;letters&quot; instead of real images. You can set symbol like this: </p>
 <pre class="hljs">lv_img_set_src(img1, SYMBOL_OK);</pre><p>The internal (variable) and external images support 2 <strong>transparency handling</strong> methods:</p>
 <ul>
 <li><strong>Chrome keying</strong> <code>LV_COLOR_TRANSP</code> (lv_conf.h) will be transparent</li>
 <li><strong>Alpha byte</strong> Add an alpha byte to every pixel</li>
 </ul>
 <p>These options can be selected in the online font converter.</p>
 <p>The images can be <strong>re-colored in run-time</strong> to any color according to the brightness of the pixels. It is very useful to show different states (selected, inactive, pressed etc) of an image without storing more versions of the same image. This feature can be enabled in the style by setting <code>img.intense</code> between <code>LV_OPA_TRANSP</code> (no recolor, value: 0) and <code>LV_OPA_COVER</code> (full recolor, value: 255). The default value is <code>LV_OPA_TRANSP</code> so this feature is disabled.</p>
 <p>It is possible to <strong>automatically set the size</strong> of the image object to the image source&#39;s width and height if enabled by the <code>lv_img_set_auto_size(image, true)</code> function. If <em>auto size</em> is enabled then when a new file is set the object size is automatically changed. Later you can modify the size manually. If the object size is 
 greater then the image size in any directions then the image will be repeated like a mosaic.  The auto size is enabled by default if the image is not a screen.</p>
 <p>The images&#39; default style is NULL so they <strong>inherit the parent&#39;s style</strong>.</p>
 <h2 id="style-usage">Style usage</h2>
 <ul>
 <li>For images <strong>style.img</strong></li>
 <li>For symbols <strong>style.text</strong></li>
 </ul>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>Symbols names (like SYMBOL_EDIT) are short strings, therefore, you can concatenate them to show more symbols.</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/image-lv_img.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Declare a cogwheel image variable*/</span>
 LV_IMG_DECLARE(img_cw);

 [...]

 <span class="hljs-comment">/***************************************
 * Create three images and re-color them
 ***************************************/</span>

 <span class="hljs-comment">/*Create the first image without re-color*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * img1 = lv_img_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_img_set_src(img1, &amp;img_cw);
 lv_obj_align(img1, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_LEFT, <span class="hljs-number">20</span>, <span class="hljs-number">40</span>);

 <span class="hljs-comment">/*Create style to re-color with light blue*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_img2;
 lv_style_copy( &amp;style_img2, &amp;lv_style_plain);
 style_img2.image.color = LV_COLOR_HEX(<span class="hljs-number">0x003b75</span>);
 style_img2.image.intense = LV_OPA_50;

 <span class="hljs-comment">/*Create an image with the light blue style*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * img2 = lv_img_create(lv_scr_act(), img1);
 lv_obj_set_style(img2, &amp;style_img2);
 lv_obj_align(img2, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_MID, <span class="hljs-number">0</span>, <span class="hljs-number">40</span>);

 <span class="hljs-comment">/*Create style to re-color with dark blue*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_img3;
 lv_style_copy(&amp;style_img3, &amp;lv_style_plain);
 style_img3.image.color = LV_COLOR_HEX(<span class="hljs-number">0x003b75</span>);
 style_img3.image.intense = LV_OPA_90;

 <span class="hljs-comment">/*Create an image with the dark blue style*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * img3 = lv_img_create(lv_scr_act(), img2);
 lv_obj_set_style(img3, &amp;style_img3);
 lv_obj_align(img3, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_RIGHT, <span class="hljs-number">-20</span>, <span class="hljs-number">40</span>);


 <span class="hljs-comment">/**************************************
 * Create an image with symbols
 **************************************/</span>

 <span class="hljs-comment">/*Create a string from symbols*/</span>
 <span class="hljs-keyword">char</span> buf[<span class="hljs-number">32</span>];
 <span class="hljs-built_in">sprintf</span>(buf, <span class="hljs-string">"%s%s%s%s%s%s%s"</span>,
             SYMBOL_DRIVE, SYMBOL_FILE, SYMBOL_DIRECTORY, SYMBOL_SETTINGS,
             SYMBOL_POWER, SYMBOL_GPS, SYMBOL_BLUETOOTH);

 <span class="hljs-comment">/*Create style with a symbol font*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_sym;
 lv_style_copy(&amp;style_sym, &amp;lv_style_plain);
 <span class="hljs-comment">// The built-in fonts are extended with symbols</span>
 style_sym.text.font = &amp;lv_font_dejavu_60;
 style_sym.text.letter_space = <span class="hljs-number">10</span>;

 <span class="hljs-comment">/*Create an image and use the string as source*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * img_sym = lv_img_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_img_set_src(img_sym, buf);
 lv_img_set_style(img_sym, &amp;style_sym);
 lv_obj_align(img_sym, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">-30</span>);


 <span class="hljs-comment">/*Create description labels*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * label = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"Re-color the images in run time"</span>);
 lv_obj_align(label, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_MID, <span class="hljs-number">0</span>, <span class="hljs-number">15</span>);

 label = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"Use symbols from fonts as images"</span>);
 lv_obj_align(label, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">-80</span>);</pre><p class="page" id="Image-button"></p><h1>Image button (lv_imgbtn)</h1>
 <p><em>Written for v5.2</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Image button is very similar to the simple Button object. The only difference is it displays user-defined images in each state instead of drawing a button. Before reading this please learn how the Buttons work in LittelvGL: link to the button</p>
 <p>To set the image in a state the <code>lv_imgbtn_set_src(imgbtn, LV_BTN_STATE_..., &amp;img_src)</code> The image sources works the same as described in the Image object. TODO link</p>
 <p>Similarly to the Button object <strong>actions (callbacks) can be assigned</strong> by <code>lv_imgbtn_set_action(imgbtn, LV_BTN_ACTION_..., my_action)</code>.</p>
 <p>The <strong>states</strong> also work like with Button object. It can be set with <code>lv_imgbtn_set_state(imgbtn, LV_BTN_STATE_...)</code>. </p>
 <p>The <strong>toggle</strong> feature can be enabled with <code>lv_imgbtn_set_toggle(imgbtn, true)</code></p>
 <h2 id="style-usage">Style usage</h2>
 <p>The Image buttons can have unique styles for each state. All the <code>style.image</code> properties used by the Image button:</p>
 <ul>
 <li><strong>image.color</strong> Recolor the image to this color according to <code>intense</code></li>
 <li><strong>image.intense</strong> The extent of recoloring (0..255 or <code>LV_OPA_0/10/20..100</code>)</li>
 <li><strong>image.opa</strong> The opacity of the object (0..255 or <code>LV_OPA_0/10/20..100</code>)</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/image-button-lv_imgbtn.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create style to make the button darker when pressed*/</span>
 <span class="hljs-keyword">lv_style_t</span> style_pr;
 lv_style_copy(&amp;style_pr, &amp;lv_style_plain);
 style_pr.image.color = LV_COLOR_BLACK;
 style_pr.image.intense = LV_OPA_50;
 style_pr.text.color = LV_COLOR_HEX3(<span class="hljs-number">0xaaa</span>);

 LV_IMG_DECLARE(imgbtn_green);
 LV_IMG_DECLARE(imgbtn_blue);

 <span class="hljs-comment">/*Create an Image button*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * imgbtn1 = lv_imgbtn_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_REL, &amp;imgbtn_green);
 lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_PR, &amp;imgbtn_green);
 lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_REL, &amp;imgbtn_blue);
 lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_PR, &amp;imgbtn_blue);
 lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_PR, &amp;style_pr);        <span class="hljs-comment">/*Use the darker style in the pressed state*/</span>
 lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_TGL_PR, &amp;style_pr);
 lv_imgbtn_set_toggle(imgbtn1, <span class="hljs-literal">true</span>);
 lv_obj_align(imgbtn1, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">-40</span>);

 <span class="hljs-comment">/*Create a label on the Image button*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * label = lv_label_create(imgbtn1, <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"Button"</span>);

 <span class="hljs-comment">/*Copy the fist image button and set Toggled state*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * imgbtn2 = lv_imgbtn_create(lv_scr_act(), imgbtn1);
 lv_btn_set_state(imgbtn2, LV_BTN_STATE_TGL_REL);
 lv_obj_align(imgbtn2, imgbtn1, LV_ALIGN_OUT_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">20</span>);

 <span class="hljs-comment">/*Create a label on the Image button*/</span>
 label = lv_label_create(imgbtn2, <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"Button"</span>);
 </pre><p class="page" id="Keyboard"></p><h1>Keyboard (lv_kb)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>As it names shows the <strong>Keyboard</strong> object provides a keyboard to <strong>write text</strong>. You can assign a <a href="#Text-area">Text area</a> to the Keyboard to put the clicked characters there. To assign the Text area use <code>lv_kb_set_ta(kb, ta)</code>.</p>
 <p>The keyboard contains an _Ok_ and a <em>Hide</em> button. An ok and a hide action can be specified by <code>lv_kb_set_ok_action(kb, action)</code> and <code>lv_kb_set_hide_action(kb, action)</code> to add callbacks to Ok/Hide clicks. If no action is specified then the buttons will delete the Keyboard. </p>
 <p>The assigned Text area&#39;s <strong>cursor</strong> can be <strong>managed</strong> by the keyboard: when the keyboard is assigned the previous Text area&#39;s cursor will be hidden an the new&#39;s will be shown. Clicking on _Ok_ or <em>Hide</em>  will also hide the cursor. The cursor manager feature is enabled by <code>lv_kb_set_cursor_manage(kb, true)</code>. The default is not manage.</p>
 <p>The Keyboards have two <strong>modes</strong>:</p>
 <ul>
 <li>LV_KB_MODE_TEXT: display letters, number and special characters</li>
 <li>LV_KB_MODE_NUM: display numbers, +/- sign and dot</li>
 </ul>
 <p>To set the mode use <code>lv_kb_set_mode(kb, mode)</code>. The default is  _LV_KB_MODE_TEXT_</p>
 <p>You can specify a <strong>new map</strong> (layout) for the keyboard with <code>lv_kb_set_map(kb, map)</code>. It works like a the <a href="#Button-matrix">Button matrix</a> so control character can be added to the layout the set button width and other attributes. Keep in mind using following keywords will have the same effect as with the original map:  _SYMBOL_OK_, _SYMBOL_CLOSE_, _SYMBOL_LEFT_, _SYMBOL_RIGHT_, <em>ABC</em>, <em>abc</em>, <em>Enter</em>, <em>Del</em>, _#1_, <em>+/-</em> .</p>
 <h2 id="style-usage">Style usage</h2>
 <p>The Keyboard works with 6 styles: a background and 5 button styles for each states. You can set the styles with <code>lv_kb_set_style(btn, LV_KB_STYLE_..., &amp;style)</code>. The background and the buttons use the <em>style.body</em> properties. The labels use the <em>style.text</em> properties of the button styles.</p>
 <ul>
 <li><strong>LV_KB_STYLE_BG</strong> Background style. Uses all <em>style.body</em> properties including <em>padding</em> Default: _lv_style_pretty_</li>
 <li><strong>LV_KB_STYLE_BTN_REL</strong> style of the released  buttons. Default: _lv_style_btn_rel_</li>
 <li><strong>LV_KB_STYLE_BTN_PR</strong> style of the pressed buttons. Default: _lv_style_btn_pr_</li>
 <li><strong>LV_KB_STYLE_BTN_TGL_REL</strong> style of the toggled released  buttons. Default: _lv_style_btn_tgl_rel_</li>
 <li><strong>LV_KB_STYLE_BTN_TGL_PR</strong> style of the toggled pressed  buttons. Default: _lv_style_btn_tgl_pr_</li>
 <li><strong>LV_KB_STYLE_BTN_INA</strong> style of the inactive  buttons. Default: _lv_style_btn_ina_</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/keyboard-lv_kb.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create styles for the keyboard*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> rel_style, pr_style;

 lv_style_copy(&amp;rel_style, &amp;lv_style_btn_rel);
 rel_style.body.radius = <span class="hljs-number">0</span>;

 lv_style_copy(&amp;pr_style, &amp;lv_style_btn_pr);
 pr_style.body.radius = <span class="hljs-number">0</span>;

 <span class="hljs-comment">/*Create a keyboard and apply the styles*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *kb = lv_kb_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_kb_set_cursor_manage(kb, <span class="hljs-literal">true</span>);
 lv_kb_set_style(kb, LV_KB_STYLE_BG, &amp;lv_style_transp_tight);
 lv_kb_set_style(kb, LV_KB_STYLE_BTN_REL, &amp;rel_style);
 lv_kb_set_style(kb, LV_KB_STYLE_BTN_PR, &amp;pr_style);

 <span class="hljs-comment">/*Create a text area. The keyboard will write here*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *ta = lv_ta_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_align(ta, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_MID, <span class="hljs-number">0</span>, <span class="hljs-number">10</span>);
 lv_ta_set_text(ta, <span class="hljs-string">""</span>);

 <span class="hljs-comment">/*Assign the text area to the keyboard*/</span>
 lv_kb_set_ta(kb, ta);</pre><p class="page" id="List"></p><h1>List (lv_list)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Lists are built from a background <strong>Page</strong> and <strong>Buttons</strong> on it. The Buttons contain an optional icon-like Image (which can be a symbol too) and a Label. When the list become long enough it can be scrolled. The <strong>width of the buttons</strong> is set to maximum according to the object width. The <strong>height</strong> of the buttons are adjusted automatically according to the content (content height + style.body.padding.ver).</p>
 <p>You can <strong>add new list element</strong> with <code>lv_list_add(list, &quot;U:/img&quot;, &quot;Text&quot;, rel_action)</code> or with symbol icon <code>lv_list_add(list, SYMBOL_EDIT, &quot;Edit text&quot;)</code>. If you do no want to add image use <code>&quot;&quot;</code> as file name. The function returns with a pointer to the created button to allow further configurations.  </p>
 <p>You can use <code>lv_list_get_btn_label(list_btn)</code> and <code>lv_list_get_btn_img(list_btn)</code> to <strong>get the label and the image</strong> of a list button.</p>
 <p>In the release action of a button you can get the the <strong>button&#39;s text</strong> with <code>lv_list_get_btn_text(button)</code>. It helps to identify the released list element. </p>
 <p>To <strong>delete a list element</strong> just use <code>lv_obj_del()</code> on the return value of <code>lv_list_add()</code>.</p>
 <p>You can <strong>navigate manually</strong> in the list with <code>lv_list_up(list)</code> and <code>lv_list_down(list)</code>.</p>
 <p>You can focus on a button directly using <code>lv_list_focus(btn, anim_en)</code>.</p>
 <p>The <strong>animation time</strong> of up/down/focus movements can be set via: <code>lv_list_set_anim_time(list, anim_time)</code>. Zero animation time means not animations. </p>
 <h2 id="style-usage">Style usage</h2>
 <p>The <code>lv_list_set_style(list, LV_LIST_STYLE_..., &amp;style)</code> function sets the style of a list. For details explanation of _BG_, <em>SCRL</em> and _SB_ see <a href="#Page">Page</a></p>
 <ul>
 <li><strong>LV_LIST_STYLE_BG</strong> list background style. Default: _lv_style_transp_fit_</li>
 <li><strong>LV_LIST_STYLE_SCRL</strong> scrollable parts&#39;s style. Default:_ lv_style_pretty_</li>
 <li><strong>LV_LIST_STYLE_SB</strong> scrollbars&#39; style. Default: _lv_style_pretty_color_</li>
 <li><strong>LV_LIST_STYLE_BTN_REL</strong> button released style. Default: _lv_style_btn_rel_</li>
 <li><strong>LV_LIST_STYLE_BTN_PR</strong> button pressed style. Default: _lv_style_btn_pr_</li>
 <li><strong>LV_LIST_STYLE_BTN_TGL_REL</strong> button toggled released style. Default: _lv_style_btn_tgl_rel_</li>
 <li><strong>LV_LIST_STYLE_BTN_TGL_PR</strong> button toggled pressed style. Default: _lv_style_btn_tgl_pr_</li>
 <li><strong>LV_LIST_STYLE_BTN_INA</strong> button inactive style. Default: _lv_style_btn_ina_</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>You can set a transparent background for the list. In this case if you have only a few list buttons the the list will look shorter but become scrollable when more list elements are added.</li>
 <li>The button labels default long mode is <code>LV_LABEL_LONG_ROLL</code>. You can modify it manually. Use <code>lv_list_get_btn_label()</code> to get buttons&#39;s label.</li>
 <li>To <strong>modify the height of the buttons</strong> adjust the <em>body.padding.ver</em> field of the corresponding style (LV_LIST_STYLE_BTN_REL , LV_LIST_STYLE_BTN_PR etc.)</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/list-lv_list.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Will be called on click of a button of a list*/</span>
 <span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">list_release_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * list_btn)</span>
 </span>{
    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"List element click:%s\n"</span>, lv_list_get_btn_text(list_btn));

    <span class="hljs-keyword">return</span> LV_RES_OK; <span class="hljs-comment">/*Return OK because the list is not deleted*/</span>
 }

 .
 .
 .

 <span class="hljs-comment">/************************
 * Create a default list
 ************************/</span>

 <span class="hljs-comment">/*Crate the list*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * list1 = lv_list_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_size(list1, <span class="hljs-number">130</span>, <span class="hljs-number">170</span>);
 lv_obj_align(list1, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_LEFT, <span class="hljs-number">20</span>, <span class="hljs-number">40</span>);

 <span class="hljs-comment">/*Add list elements*/</span>
 lv_list_add(list1, SYMBOL_FILE, <span class="hljs-string">"New"</span>, list_release_action);
 lv_list_add(list1, SYMBOL_DIRECTORY, <span class="hljs-string">"Open"</span>, list_release_action);
 lv_list_add(list1, SYMBOL_CLOSE, <span class="hljs-string">"Delete"</span>, list_release_action);
 lv_list_add(list1, SYMBOL_EDIT, <span class="hljs-string">"Edit"</span>, list_release_action);
 lv_list_add(list1, SYMBOL_SAVE, <span class="hljs-string">"Save"</span>, list_release_action);

 <span class="hljs-comment">/*Create a label above the list*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * label;
 label = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"Default"</span>);
 lv_obj_align(label, list1, LV_ALIGN_OUT_TOP_MID, <span class="hljs-number">0</span>, <span class="hljs-number">-10</span>);

 <span class="hljs-comment">/*********************
 * Create new styles
 ********************/</span>
 <span class="hljs-comment">/*Create a scroll bar style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_sb;
 lv_style_copy(&amp;style_sb, &amp;lv_style_plain);
 style_sb.body.main_color = LV_COLOR_BLACK;
 style_sb.body.grad_color = LV_COLOR_BLACK;
 style_sb.body.border.color = LV_COLOR_WHITE;
 style_sb.body.border.width = <span class="hljs-number">1</span>;
 style_sb.body.border.opa = LV_OPA_70;
 style_sb.body.radius = LV_RADIUS_CIRCLE;
 style_sb.body.opa = LV_OPA_60;

 <span class="hljs-comment">/*Create styles for the buttons*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_btn_rel;
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_btn_pr;
 lv_style_copy(&amp;style_btn_rel, &amp;lv_style_btn_rel);
 style_btn_rel.body.main_color = LV_COLOR_MAKE(<span class="hljs-number">0x30</span>, <span class="hljs-number">0x30</span>, <span class="hljs-number">0x30</span>);
 style_btn_rel.body.grad_color = LV_COLOR_BLACK;
 style_btn_rel.body.border.color = LV_COLOR_SILVER;
 style_btn_rel.body.border.width = <span class="hljs-number">1</span>;
 style_btn_rel.body.border.opa = LV_OPA_50;
 style_btn_rel.body.radius = <span class="hljs-number">0</span>;

 lv_style_copy(&amp;style_btn_pr, &amp;style_btn_rel);
 style_btn_pr.body.main_color = LV_COLOR_MAKE(<span class="hljs-number">0x55</span>, <span class="hljs-number">0x96</span>, <span class="hljs-number">0xd8</span>);
 style_btn_pr.body.grad_color = LV_COLOR_MAKE(<span class="hljs-number">0x37</span>, <span class="hljs-number">0x62</span>, <span class="hljs-number">0x90</span>);
 style_btn_pr.text.color = LV_COLOR_MAKE(<span class="hljs-number">0xbb</span>, <span class="hljs-number">0xd5</span>, <span class="hljs-number">0xf1</span>);

 <span class="hljs-comment">/**************************************
 * Create a list with modified styles
 **************************************/</span>

 <span class="hljs-comment">/*Copy the previous list*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * list2 = lv_list_create(lv_scr_act(),list1);
 lv_obj_align(list2, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_RIGHT, <span class="hljs-number">-20</span>, <span class="hljs-number">40</span>);
 lv_list_set_sb_mode(list2, LV_SB_MODE_AUTO);
 lv_list_set_style(list2, LV_LIST_STYLE_BG, &amp;lv_style_transp_tight);
 lv_list_set_style(list2, LV_LIST_STYLE_SCRL, &amp;lv_style_transp_tight);
 lv_list_set_style(list2, LV_LIST_STYLE_BTN_REL, &amp;style_btn_rel); <span class="hljs-comment">/*Set the new button styles*/</span>
 lv_list_set_style(list2, LV_LIST_STYLE_BTN_PR, &amp;style_btn_pr);

 <span class="hljs-comment">/*Create a label above the list*/</span>
 label = lv_label_create(lv_scr_act(), label);       <span class="hljs-comment">/*Copy the previous label*/</span>
 lv_label_set_text(label, <span class="hljs-string">"Modified"</span>);
 lv_obj_align(label, list2, LV_ALIGN_OUT_TOP_MID, <span class="hljs-number">0</span>, <span class="hljs-number">-10</span>);</pre><p class="page" id="LED"></p><h1>LED (lv_led)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The LEDs are rectangle-like (or circle) object. You can set their <strong>brightness</strong> with <code>lv_led_set_bright(led, bright)</code>. The brightness should be between 0 (darkest) and 255 (lightest).</p>
 <p>Use <code>lv_led_on(led)</code> and <code>lv_led_off(led)</code> to set the brightness to a predefined  ON or OFF value.  The <code>lv_led_toggle(led)</code> toggles between the ON and OFF state.</p>
 <h2 id="style-usage">Style usage</h2>
 <p>The LED uses one style which can be set by <code>lv_led_set_style(led, &amp;style)</code>. To determine the appearance the <strong>style.body</strong> properties are used. The colors are darkened and shadow width is reduced at a lower brightness and gains its original value at brightness 255 to show a lighting effect.  The default style is: <code>lv_style_pretty_color</code>.</p>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>Typically the default style is not suitable therefore you have to create you own style. See the Examples.</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/led-lv_led.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a style for the LED*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_led;
 lv_style_copy(&amp;style_led, &amp;lv_style_pretty_color);
 style_led.body.radius = LV_RADIUS_CIRCLE;
 style_led.body.main_color = LV_COLOR_MAKE(<span class="hljs-number">0xb5</span>, <span class="hljs-number">0x0f</span>, <span class="hljs-number">0x04</span>);
 style_led.body.grad_color = LV_COLOR_MAKE(<span class="hljs-number">0x50</span>, <span class="hljs-number">0x07</span>, <span class="hljs-number">0x02</span>);
 style_led.body.border.color = LV_COLOR_MAKE(<span class="hljs-number">0xfa</span>, <span class="hljs-number">0x0f</span>, <span class="hljs-number">0x00</span>);
 style_led.body.border.width = <span class="hljs-number">3</span>;
 style_led.body.border.opa = LV_OPA_30;
 style_led.body.shadow.color = LV_COLOR_MAKE(<span class="hljs-number">0xb5</span>, <span class="hljs-number">0x0f</span>, <span class="hljs-number">0x04</span>);
 style_led.body.shadow.width = <span class="hljs-number">10</span>;


 <span class="hljs-comment">/*Create a LED and switch it ON*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * led1  = lv_led_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_style(led1, &amp;style_led);
 lv_obj_align(led1, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_MID, <span class="hljs-number">40</span>, <span class="hljs-number">40</span>);
 lv_led_on(led1);

 <span class="hljs-comment">/*Copy the previous LED and set a brightness*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * led2  = lv_led_create(lv_scr_act(), led1);
 lv_obj_align(led2, led1, LV_ALIGN_OUT_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">40</span>);
 lv_led_set_bright(led2, <span class="hljs-number">190</span>);

 <span class="hljs-comment">/*Copy the previous LED and switch it OFF*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * led3  = lv_led_create(lv_scr_act(), led1);
 lv_obj_align(led3, led2, LV_ALIGN_OUT_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">40</span>);
 lv_led_off(led3);

 <span class="hljs-comment">/*Create 3 labels next to the LEDs*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * label = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"LED On"</span>);
 lv_obj_align(label, led1, LV_ALIGN_OUT_LEFT_MID, <span class="hljs-number">-40</span>, <span class="hljs-number">0</span>);

 label = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"LED half"</span>);
 lv_obj_align(label, led2, LV_ALIGN_OUT_LEFT_MID, <span class="hljs-number">-40</span>, <span class="hljs-number">0</span>);

 label = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"LED Off"</span>);
 lv_obj_align(label, led3, LV_ALIGN_OUT_LEFT_MID, <span class="hljs-number">-40</span>, <span class="hljs-number">0</span>);</pre><p class="page" id="Line"></p><h1>Line (lv_line)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The line object is capable of <strong>drawing straight lines</strong> between a set of points. The points has to be stored in an <code>lv_point_t</code> array and passed to the object by the <code>lv_line_set_points(lines, point_array, point_num)</code> function. </p>
 <p>It is possible to <strong>automatically set the size</strong> of the line object according to its points. You can enable it with the <code>lv_line_set_auto_size(line, true)</code> function. If enabled then when the points are set then the object width and height will be changed according to the max. x and max. y coordinates among the points. The <em>auto size</em> is enabled by default.</p>
 <p>Basically the <em>y == 0</em> point is in the top of the object but you can <strong>invert the y coordinates</strong> with <code>lv_line_set_y_invert(line, true)</code>. After it the y coordinates will be subtracted from object&#39;s height.</p>
 <h2 id="style-usage">Style usage</h2>
 <ul>
 <li><strong>style.line</strong> properties are used</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <h2 id="example">Example</h2>
 <pre class="hljs"><span class="hljs-comment">/*Create an array for the points of the line*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_point_t</span> line_points[] = {{<span class="hljs-number">5</span>, <span class="hljs-number">5</span>}, {<span class="hljs-number">70</span>, <span class="hljs-number">70</span>}, {<span class="hljs-number">120</span>, <span class="hljs-number">10</span>}, {<span class="hljs-number">180</span>, <span class="hljs-number">60</span>}, {<span class="hljs-number">240</span>, <span class="hljs-number">10</span>}};

 <span class="hljs-comment">/*Create line with default style*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * line1;
 line1 = lv_line_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_line_set_points(line1, line_points, <span class="hljs-number">5</span>);     <span class="hljs-comment">/*Set the points*/</span>
 lv_obj_align(line1, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_MID, <span class="hljs-number">0</span>, <span class="hljs-number">20</span>);

 <span class="hljs-comment">/*Create new style (thin light blue)*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_line2;
 lv_style_copy(&amp;style_line2, &amp;lv_style_plain);
 style_line2.line.color = LV_COLOR_MAKE(<span class="hljs-number">0x2e</span>, <span class="hljs-number">0x96</span>, <span class="hljs-number">0xff</span>);
 style_line2.line.width = <span class="hljs-number">2</span>;

 <span class="hljs-comment">/*Copy the previous line and apply the new style*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * line2 = lv_line_create(lv_scr_act(), line1);
 lv_line_set_style(line2, &amp;style_line2);
 lv_obj_align(line2, line1, LV_ALIGN_OUT_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">-20</span>);

 <span class="hljs-comment">/*Create new style (thick dark blue)*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_line3;
 lv_style_copy(&amp;style_line3, &amp;lv_style_plain);
 style_line3.line.color = LV_COLOR_MAKE(<span class="hljs-number">0x00</span>, <span class="hljs-number">0x3b</span>, <span class="hljs-number">0x75</span>);
 style_line3.line.width = <span class="hljs-number">5</span>;

 <span class="hljs-comment">/*Copy the previous line and apply the new style*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * line3 = lv_line_create(lv_scr_act(), line1);
 lv_line_set_style(line3, &amp;style_line3);
 lv_obj_align(line3, line2, LV_ALIGN_OUT_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">-20</span>);</pre><p class="page" id="Line-meter"></p><h1>Line meter (lv_lmeter)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Line Meter object consists of some <strong>radial lines</strong> which draw a scale. When setting a new value with <code>lv_lmeter_set_value(lmeter, new_value)</code> the proportional part of the scale will be recolored. </p>
 <p>The <code>lv_lmeter_set_range(lmeter, min, max)</code> function sets the <strong>range</strong> of the line meter.</p>
 <p>You can set the <strong>angle</strong> of the scale and the <strong>number of the lines</strong> by: <code>lv_lmeter_set_scale(lmeter, angle, line_num)</code>. The default angle is 240 and the default line number is 31</p>
 <h2 id="style-usage">Style usage</h2>
 <p>The line meter uses one style which can be set by <code>lv_lmeter_set_style(lmeter, &amp;style)</code>. The line meter&#39;s properties are derived from the following style attributes:</p>
 <ul>
 <li><strong>line.color</strong> &quot;inactive line&#39;s&quot; color which are greater then the current value</li>
 <li><strong>body.main_color</strong> &quot;active line&#39;s&quot; color at the beginning of the scale</li>
 <li><strong>body.grad_color</strong> &quot;active line&#39;s&quot; color at the end of the scale (gradient with main color)</li>
 <li><strong>body.padding.hor</strong> line length</li>
 <li><strong>line.width</strong> line width</li>
 </ul>
 <p>The default style is _lv_style_pretty_color_.</p>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>The line meter has no background.</li>
 <li>It is recommended to use <strong>antialiasing</strong> on smaller dpi displays to show smooth lines</li>
 <li>Odd number of scale lines look better</li>
 <li>It looks better if the scale angle is: (line number - 1) * N, where N is an integer</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/line-meter-lv_lmeter.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*******************************
 * Create 3 similar line meter
 *******************************/</span>

 <span class="hljs-comment">/*Create a simple style with ticker line width*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_lmeter1;
 lv_style_copy(&amp;style_lmeter1, &amp;lv_style_pretty_color);
 style_lmeter1.line.width = <span class="hljs-number">2</span>;
 style_lmeter1.line.color = LV_COLOR_SILVER;
 style_lmeter1.body.main_color = LV_COLOR_HEX(<span class="hljs-number">0x91bfed</span>);         <span class="hljs-comment">/*Light blue*/</span>
 style_lmeter1.body.grad_color = LV_COLOR_HEX(<span class="hljs-number">0x04386c</span>);         <span class="hljs-comment">/*Dark blue*/</span>

 <span class="hljs-comment">/*Create the first line meter */</span>
 <span class="hljs-keyword">lv_obj_t</span> * lmeter;
 lmeter = lv_lmeter_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_lmeter_set_range(lmeter, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>);                   <span class="hljs-comment">/*Set the range*/</span>
 lv_lmeter_set_value(lmeter, <span class="hljs-number">30</span>);                       <span class="hljs-comment">/*Set the current value*/</span>
 lv_lmeter_set_style(lmeter, &amp;style_lmeter1);           <span class="hljs-comment">/*Apply the new style*/</span>
 lv_obj_set_size(lmeter, <span class="hljs-number">80</span>, <span class="hljs-number">80</span>);
 lv_obj_align(lmeter, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_BOTTOM_LEFT, <span class="hljs-number">20</span>, <span class="hljs-number">-20</span>);

 <span class="hljs-comment">/*Add a label to show the current value*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * label;
 label = lv_label_create(lmeter, <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"30%"</span>);
 lv_label_set_style(label, &amp;lv_style_pretty);
 lv_obj_align(label, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);

 <span class="hljs-comment">/*Create the second line meter and label*/</span>
 lmeter = lv_lmeter_create(lv_scr_act(), lmeter);
 lv_lmeter_set_value(lmeter, <span class="hljs-number">60</span>);
 lv_obj_align(lmeter, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">-20</span>);

 label = lv_label_create(lmeter, label);
 lv_label_set_text(label, <span class="hljs-string">"60%"</span>);
 lv_obj_align(label, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);

 <span class="hljs-comment">/*Create the third line meter and label*/</span>
 lmeter = lv_lmeter_create(lv_scr_act(), lmeter);
 lv_lmeter_set_value(lmeter, <span class="hljs-number">90</span>);
 lv_obj_align(lmeter, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_BOTTOM_RIGHT, <span class="hljs-number">-20</span>, <span class="hljs-number">-20</span>);

 label = lv_label_create(lmeter, label);
 lv_label_set_text(label, <span class="hljs-string">"90%"</span>);
 lv_obj_align(label, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);

 <span class="hljs-comment">/*********************************
 * Create a greater line meter
 *********************************/</span>

 <span class="hljs-comment">/*Create a new style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_lmeter2;
 lv_style_copy(&amp;style_lmeter2, &amp;lv_style_pretty_color);
 style_lmeter2.line.width = <span class="hljs-number">2</span>;
 style_lmeter2.line.color = LV_COLOR_SILVER;
 style_lmeter2.body.padding.hor = <span class="hljs-number">16</span>;            <span class="hljs-comment">/*Line length*/</span>
 style_lmeter2.body.main_color = LV_COLOR_LIME;
 style_lmeter2.body.grad_color = LV_COLOR_ORANGE;

 <span class="hljs-comment">/*Create the line meter*/</span>
 lmeter = lv_lmeter_create(lv_scr_act(), lmeter);
 lv_obj_set_style(lmeter, &amp;style_lmeter2);
 lv_obj_set_size(lmeter, <span class="hljs-number">120</span>, <span class="hljs-number">120</span>);
 lv_obj_align(lmeter, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_MID, <span class="hljs-number">0</span>, <span class="hljs-number">20</span>);
 lv_lmeter_set_scale(lmeter, <span class="hljs-number">240</span>, <span class="hljs-number">31</span>);
 lv_lmeter_set_value(lmeter, <span class="hljs-number">90</span>);

 <span class="hljs-comment">/*Create a label style with greater font*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_label;
 lv_style_copy(&amp;style_label, &amp;lv_style_pretty);
 style_label.text.font = &amp;lv_font_dejavu_60;
 style_label.text.color = LV_COLOR_GRAY;

 <span class="hljs-comment">/*Add a label to show the current value*/</span>
 label = lv_label_create(lmeter, label);
 lv_label_set_text(label, <span class="hljs-string">"90%"</span>);
 lv_obj_set_style(label, &amp;style_label);
 lv_obj_align(label, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);</pre><p class="page" id="Label"></p><h1>Label (lv_label)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Labels are the basic objects to <strong>display text</strong>. There is no limitation in the text size because it&#39;s stored dynamically. You can modify the text in runtime at any time with lv_label_set_text().</p>
 <p>You can use <code>\n</code> to make line break. For example: <code>&quot;line1\nline2\n\nline4&quot;</code></p>
 <p>The size of the label object can be automatically expanded to the text size or the text can be manipulated according to several <strong>long mode policies</strong>:</p>
 <ul>
 <li>LV_LABEL_LONG_EXPAND: Expand the object size to the text size</li>
 <li>LV_LABEL_LONG_BREAK: Keep the object width, break (wrap) the too long lines and expand the object height</li>
 <li>LV_LABEL_LONG_DOTS: Keep the object size, break the text and write dots in the last line</li>
 <li>LV_LABEL_LONG_SCROLL: Expand the object size and scroll the text on the parent (move the label object)</li>
 <li>LV_LABEL_LONG_ROLL: Keep the size and roll just the text (not the object)</li>
 </ul>
 <p>You can specify the long mode with: <code>lv_label_set_long_mode(label, long_mode)</code></p>
 <p>Labels are able to show text from a <strong>static array</strong>. Use: <code>lv_label_set_static_text(label, char_array)</code>. In this case, the text is not stored in the dynamic memory but the given array is used instead. Keep in my the array can&#39;t be a local variable which destroys when the function exits.</p>
 <p>You can also use a <strong>raw character array</strong> as label text. The array doesn&#39;t have to be <code>\0</code> terminated. In this case, the text will be saved to the dynamic memory. To set a raw character array use the <code>lv_label_set_array_text(label, char_array)</code> function.</p>
 <p>The label&#39;s <strong>text can be aligned</strong> to the left, right or middle with <code>lv_label_set_align(label, LV_LABEL_ALIGN_LEFT/RIGHT/CENTER)</code></p>
 <p>You can enable to <strong>draw a background</strong> for the label with <code>lv_label_set_body_draw(label, draw)</code></p>
 <p>In the text, you can use commands to <strong>re-color parts of the text</strong>. For example: <code>&quot;Write a #ff0000 red# word&quot;</code>. This feature can be enabled individually for each label by <code>lv_label_set_recolor()</code> function.</p>
 <p>The labels can display symbols besides letters. Learn more about symbols <a href="https://github.com/littlevgl/lvgl/wiki/Fonts">here</a>.</p>
 <p>The labels&#39; <strong>default style</strong> is <code>NULL</code> so they inherit the parent&#39;s style.</p>
 <h2 id="style-usage">Style usage</h2>
 <ul>
 <li>Use all properties from <code>style.text</code></li>
 <li>For background drawing <code>style.body properties</code> are used</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <p>The label&#39;s <strong>click enable attribute is disabled</strong> by default. You can enable clicking with <code>lv_obj_set_click(label, true)</code></p>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/label-lv_label.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create label on the screen. By default it will inherit the style of the screen*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * title = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_label_set_text(title, <span class="hljs-string">"Title Label"</span>);
 lv_obj_align(title, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_MID, <span class="hljs-number">0</span>, <span class="hljs-number">20</span>);  <span class="hljs-comment">/*Align to the top*/</span>

 <span class="hljs-comment">/*Create anew style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_txt;
 lv_style_copy(&amp;style_txt, &amp;lv_style_plain);
 style_txt.text.font = &amp;lv_font_dejavu_40;
 style_txt.text.letter_space = <span class="hljs-number">2</span>;
 style_txt.text.line_space = <span class="hljs-number">1</span>;
 style_txt.text.color = LV_COLOR_HEX(<span class="hljs-number">0x606060</span>);

 <span class="hljs-comment">/*Create a new label*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * txt = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_style(txt, &amp;style_txt);                    <span class="hljs-comment">/*Set the created style*/</span>
 lv_label_set_long_mode(txt, LV_LABEL_LONG_BREAK);     <span class="hljs-comment">/*Break the long lines*/</span>
 lv_label_set_recolor(txt, <span class="hljs-literal">true</span>);                      <span class="hljs-comment">/*Enable re-coloring by commands in the text*/</span>
 lv_label_set_align(txt, LV_LABEL_ALIGN_CENTER);       <span class="hljs-comment">/*Center aligned lines*/</span>
 lv_label_set_text(txt, <span class="hljs-string">"Align lines to the middle\n\n"</span>
                       <span class="hljs-string">"#000080 Re-color# #0000ff words of# #6666ff the text#\n\n"</span>
                       <span class="hljs-string">"If a line become too long it can be automatically broken into multiple lines"</span>);
 lv_obj_set_width(txt, <span class="hljs-number">300</span>);                           <span class="hljs-comment">/*Set a width*/</span>
 lv_obj_align(txt, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">20</span>);      <span class="hljs-comment">/*Align to center*/</span></pre><p class="page" id="Message-box"></p><h1>Message box (lv_mbox)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The message boxes act as <strong>pop-ups</strong>. They are built from a <strong>background</strong>, a <strong>text</strong> and <strong>buttons</strong>. The background is a <a href="#Container">Container</a> object with enabled vertical fit to ensure that the text and the buttons are always visible.  </p>
 <p>To <strong>set the text</strong> use the <code>lv_mbox_set_text(mbox, &quot;My text&quot;)</code> function.</p>
 <p>The buttons are a Button matrix. To <strong>add buttons</strong> use the <code>lv_mbox_add_btns(mbox, btn_str, action)</code> function. In this you can specify the button text e.g (<code>const char * btn_str[] = {&quot;btn1&quot;, &quot;btn2&quot;, &quot;&quot;}</code>) and add a callback which is called when a button is released. For more information visit the <a href="#Button-matrix">Button matrix</a>&#39;s documentation.</p>
 <p>With <code>lv_mbox_start_auto_close(mbox, delay)</code> the message box can be <strong>closed automatically</strong> after <em>delay</em> milliseconds with a long animation. The <code>lv_mbox_stop_auto_close(mbox)</code> function will stop a started auto close .</p>
 <p>The close animation time can be adjusted by <code>lv_mbox_set_anim_time(mbox, anim_time)</code>.</p>
 <h2 id="style-usage">Style usage</h2>
 <p>Use <code>lv_mbox_set_style(mbox, LV_MBOX_STYLE_...,  &amp;style)</code> to set a new style for an element of the message box:</p>
 <ul>
 <li><strong>LV_MBOX_STYLE_BG</strong> specifies the background container&#39;s style. <em>style.body</em> for background and <em>style.label</em> for the text appearance. Default: lv_style_pretty</li>
 <li><strong>LV_MBOX_STYLE_BTN_BG</strong> style of the buttons (button matrix) background. Default: lv_style_transp</li>
 <li><strong>LV_MBOX_STYLE_BTN_REL</strong> style of the released buttons. Default: lv_style_btn_rel</li>
 <li><strong>LV_MBOX_STYLE_BTN_PR</strong> style of the pressed buttons. Default: lv_style_btn_pr</li>
 <li><strong>LV_MBOX_STYLE_BTN_TGL_REL</strong> style of the toggled released buttons. Default: lv_style_btn_tgl_rel</li>
 <li><strong>LV_MBOX_STYLE_BTN_TGL_PR</strong> style of the toggled pressed buttons. Default: lv_style_btn_tgl_pr</li>
 <li><strong>LV_MBOX_STYLE_BTN_INA</strong> style of the inactive buttons. Default: lv_style_btn_ina</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>The <strong>height of the buttons</strong> comes from the <em>font height</em> + 2 × <em>body.vpad</em> of _LV_MBOX_STYLE_BTN_REL_</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/message-box-lv_mbox.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Called when a button is clicked*/</span>
 <span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">mbox_apply_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * mbox, <span class="hljs-keyword">const</span> <span class="hljs-keyword">char</span> * txt)</span>
 </span>{
    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"Mbox button: %s\n"</span>, txt);

    <span class="hljs-keyword">return</span> LV_RES_OK; <span class="hljs-comment">/*Return OK if the message box is not deleted*/</span>
 }

 .
 .
 .
 .

 <span class="hljs-comment">/*******************************
 * Create a default message box
 *******************************/</span>

 <span class="hljs-keyword">lv_obj_t</span> * mbox1 = lv_mbox_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_mbox_set_text(mbox1, <span class="hljs-string">"Default message box\n"</span>
                        <span class="hljs-string">"with buttons"</span>);                    <span class="hljs-comment">/*Set the text*/</span>
 <span class="hljs-comment">/*Add two buttons*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">const</span> <span class="hljs-keyword">char</span> * btns[] ={<span class="hljs-string">"\221Apply"</span>, <span class="hljs-string">"\221Close"</span>, <span class="hljs-string">""</span>}; <span class="hljs-comment">/*Button description. '\221' lv_btnm like control char*/</span>
 lv_mbox_add_btns(mbox1, btns, <span class="hljs-literal">NULL</span>);
 lv_obj_set_width(mbox1, <span class="hljs-number">250</span>);
 lv_obj_align(mbox1, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_LEFT, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>); <span class="hljs-comment">/*Align to the corner*/</span>

 <span class="hljs-comment">/****************************************
 * Create a message box with new styles
 ***************************************/</span>

 <span class="hljs-comment">/*Create a new background style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_bg;
 lv_style_copy(&amp;style_bg, &amp;lv_style_pretty);
 style_bg.body.main_color = LV_COLOR_MAKE(<span class="hljs-number">0xf5</span>, <span class="hljs-number">0x45</span>, <span class="hljs-number">0x2e</span>);
 style_bg.body.grad_color = LV_COLOR_MAKE(<span class="hljs-number">0xb9</span>, <span class="hljs-number">0x1d</span>, <span class="hljs-number">0x09</span>);
 style_bg.body.border.color = LV_COLOR_MAKE(<span class="hljs-number">0x3f</span>, <span class="hljs-number">0x0a</span>, <span class="hljs-number">0x03</span>);
 style_bg.text.color = LV_COLOR_WHITE;
 style_bg.body.padding.hor = <span class="hljs-number">12</span>;
 style_bg.body.padding.ver = <span class="hljs-number">8</span>;
 style_bg.body.shadow.width = <span class="hljs-number">8</span>;

 <span class="hljs-comment">/*Create released and pressed button styles*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_btn_rel;
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_btn_pr;
 lv_style_copy(&amp;style_btn_rel, &amp;lv_style_btn_rel);
 style_btn_rel.body.empty = <span class="hljs-number">1</span>;                    <span class="hljs-comment">/*Draw only the border*/</span>
 style_btn_rel.body.border.color = LV_COLOR_WHITE;
 style_btn_rel.body.border.width = <span class="hljs-number">2</span>;
 style_btn_rel.body.border.opa = LV_OPA_70;
 style_btn_rel.body.padding.hor = <span class="hljs-number">12</span>;
 style_btn_rel.body.padding.ver = <span class="hljs-number">8</span>;

 lv_style_copy(&amp;style_btn_pr, &amp;style_btn_rel);
 style_btn_pr.body.empty = <span class="hljs-number">0</span>;
 style_btn_pr.body.main_color = LV_COLOR_MAKE(<span class="hljs-number">0x5d</span>, <span class="hljs-number">0x0f</span>, <span class="hljs-number">0x04</span>);
 style_btn_pr.body.grad_color = LV_COLOR_MAKE(<span class="hljs-number">0x5d</span>, <span class="hljs-number">0x0f</span>, <span class="hljs-number">0x04</span>);

 <span class="hljs-comment">/*Copy the message box (The buttons will be copied too)*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * mbox2 = lv_mbox_create(lv_scr_act(), mbox1);
 lv_mbox_set_text(mbox2, <span class="hljs-string">"Message box with\n"</span>
                        <span class="hljs-string">"with modified styles"</span>);
 lv_mbox_set_style(mbox2, LV_MBOX_STYLE_BG, &amp;style_bg);
 lv_mbox_set_style(mbox2, LV_MBOX_STYLE_BTN_REL, &amp;style_btn_rel);
 lv_mbox_set_style(mbox2, LV_MBOX_STYLE_BTN_PR, &amp;style_btn_pr);
 lv_obj_align(mbox2, mbox1, LV_ALIGN_OUT_BOTTOM_LEFT, <span class="hljs-number">50</span>, <span class="hljs-number">-20</span>);   <span class="hljs-comment">/*Align according to the previous message box */</span></pre><p class="page" id="Page"></p><h1>Page (lv_page)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Page consist of two containers on each other: the bottom is the <strong>background</strong> (or base) and the top is the <strong>scrollable</strong>. If you create a child on the page it will be automatically moved to the scrollable container. If the scrollable container become greater then the background it <strong>can be scrolled by dragging</strong> (like the lists on smart phones).</p>
 <p>By default the scrollable&#39;s <em>auto fit</em> attribute is enabled vertically so its height will increased to include all its children. The width of the scrollable is automatically adjusted to the background width (minus the background&#39;s horizontal padding).</p>
 <p>The background object can be referenced as the page itself like: <code>lv_obj_set_width(page, 100)</code>.</p>
 <p>The scrollbar object can be retrieved with: <code>lv_page_get_scrl(page)</code>.</p>
 <p><strong>Scrollbars</strong> can be shown according to four policies:</p>
 <ul>
 <li>LV_SB_MODE_OFF: Never show scrollbars</li>
 <li>LV_SB_MODE_ON: Always show scrollbars</li>
 <li>LV_SB_MODE_DRAG: Show scrollbars when page is being dragged</li>
 <li>LV_SB_MODE_AUTO: Show scrollbars when the scrollable container is large enough to be scrolled</li>
 </ul>
 <p>You can set scroll bar show policy by: <code>lv_page_set_sb_mode(page, SB_MODE)</code>. The default value is _LV_PAGE_SB_MODE_ON_;</p>
 <p>You can <strong>glue a children</strong> to the page. In this case you can scroll the page with dragging the child object. It can be enabled by the <code>lv_page_glue_obj(child, true)</code>.</p>
 <p>You can <strong>focus to an object</strong> on a page with: <code>lv_page_focus(page, child, anim_time)</code>.</p>
 <p>It will moves the scrollable container to show a child. If the last parameter is not zero then the page will move with an animation.</p>
 <p><strong>A release and a press action</strong> can be assigned to the Page with <code>lv_page_set_rel_action(page, my_rel_action)</code> and <code>lv_page_set_pr_action(page, my_pr_action)</code>. The action can be triggered from the Background and the Scrollable object too.</p>
 <p>There are functions to directly <strong>set/get the scrollable&#39;s attributes</strong>: </p>
 <ul>
 <li><code>lv_page_set_scrl_fit()</code></li>
 <li><code>lv_page_set_scrl_width()</code></li>
 <li><code>lv_page_set_scrl_height()</code></li>
 <li><code>lv_page_set_scrl_layout()</code></li>
 </ul>
 <h2 id="style-usage">Style usage</h2>
 <p>Use <code>lv_page_set_style(page, LV_PAGE_STYLE_...,  &amp;style)</code> to set a new style for an element of the page:</p>
 <ul>
 <li><strong>LV_PAGE_STYLE_BG</strong> background&#39;s style which uses all <em>style.body</em> properties (default: lv_style_pretty_color)</li>
 <li><strong>LV_PAGE_STYLE_SCRL</strong> scrollable&#39;s style which uses all <em>style.body</em> properties (default: lv_style_pretty)</li>
 <li><strong>LV_PAGE_STYLE_SB</strong> scroll bar&#39;s style which uses all <em>style.body</em> properties. hor/ver* padding sets the scrollbars&#39; padding respectively and the inner padding sets the scrollbar&#39;s width.  (default: lv_style_pretty_color)</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <ul>
 <li><strong>Setting the position of children</strong> is not possible in x or y direction if the corresponding <em>hor</em> or <em>ver</em> fit is enabled.  It&#39;s because if  the _y_ coordinate is modified  (with <em>ver fit</em> enabled)  the scrollable object will resized to be directly above and below the child. But a scrollable part can&#39;t be in the middle so it will be moved back to the top.  To avoid this use <code>lv_obj_align()</code> to place object relative to each other (one has to be in to top/left) or disable fit with <code>lv_page_set_scrl_fit(page, false, false);</code> and set it&#39;s size <code>lv_page_set_scrl_width/height(page,  100)</code>.</li>
 <li>The background draws its border when the scrollable is drawn. It ensures that the page always will have closed shape even if the scrollable has the same color as the page&#39;s parent.</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/page-lv_page.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a scroll bar style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_sb;
 lv_style_copy(&amp;style_sb, &amp;lv_style_plain);
 style_sb.body.main_color = LV_COLOR_BLACK;
 style_sb.body.grad_color = LV_COLOR_BLACK;
 style_sb.body.border.color = LV_COLOR_WHITE;
 style_sb.body.border.width = <span class="hljs-number">1</span>;
 style_sb.body.border.opa = LV_OPA_70;
 style_sb.body.radius = LV_RADIUS_CIRCLE;
 style_sb.body.opa = LV_OPA_60;
 style_sb.body.padding.hor = <span class="hljs-number">3</span>;          <span class="hljs-comment">/*Horizontal padding on the right*/</span>
 style_sb.body.padding.inner = <span class="hljs-number">8</span>;        <span class="hljs-comment">/*Scrollbar width*/</span>

 <span class="hljs-comment">/*Create a page*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * page = lv_page_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_size(page, <span class="hljs-number">150</span>, <span class="hljs-number">200</span>);
 lv_obj_align(page, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
 lv_page_set_style(page, LV_PAGE_STYLE_SB, &amp;style_sb);           <span class="hljs-comment">/*Set the scrollbar style*/</span>
 lv_page_set_sb_mode(page, LV_SB_MODE_AUTO);                     <span class="hljs-comment">/*Show scroll bars is scrolling is possible*/</span>

 <span class="hljs-comment">/*Create a label on the page*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * label = lv_label_create(page, <span class="hljs-literal">NULL</span>);
 lv_label_set_long_mode(label, LV_LABEL_LONG_BREAK);             <span class="hljs-comment">/*Automatically break long lines*/</span>
 lv_obj_set_width(label, lv_page_get_scrl_width(page));          <span class="hljs-comment">/*Set the width. Lines will break here*/</span>
 lv_label_set_text(label, <span class="hljs-string">"Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n"</span>
                         <span class="hljs-string">"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n"</span>
                         <span class="hljs-string">"Ut enim ad minim veniam, quis nostrud exercitation ullamco\n"</span>
                         <span class="hljs-string">"laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n"</span>
                         <span class="hljs-string">"dolor in reprehenderit in voluptate velit esse cillum dolore\n"</span>
                         <span class="hljs-string">"eu fugiat nulla pariatur.\n"</span>
                         <span class="hljs-string">"Excepteur sint occaecat cupidatat non proident, sunt in culpa\n"</span>
                         <span class="hljs-string">"qui officia deserunt mollit anim id est laborum."</span>);</pre><p class="page" id="Preloader"></p><h1>Preloader (lv_preload)</h1>
 <p><em>Written for v5.2</em></p>
 <h2 id="overview">Overview</h2>
 <p>The preloader object is <strong>a spinning arc over a border</strong>. </p>
 <p>The <strong>length of the arc</strong> can be adjusted by <code>lv_preload_set_arc_length(preload, deg)</code>.</p>
 <p>The <strong>speed of the spinning</strong> can be adjusted by <code>lv_preload_set_spin_time(preload, time_ms)</code>.</p>
 <h2 id="style-usage">Style usage</h2>
 <p>The <code>LV_PRELOAD_STYLE_MAIN</code> style describes both the arc and the border style:</p>
 <ul>
 <li><strong>arc</strong> is described by the <code>line</code> properties</li>
 <li><strong>border</strong> is described by the <code>body.border</code> properties including <code>body.padding.hor/ver</code> (smaller is used) to give a smaller radius for the border.</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/preloader-lv_preload.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a style for the Preloader*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style;
 lv_style_copy(&amp;style, &amp;lv_style_plain);
 style.line.width = <span class="hljs-number">10</span>;                         <span class="hljs-comment">/*10 px thick arc*/</span>
 style.line.color = LV_COLOR_HEX3(<span class="hljs-number">0x258</span>);       <span class="hljs-comment">/*Blueish arc color*/</span>

 style.body.border.color = LV_COLOR_HEX3(<span class="hljs-number">0xBBB</span>); <span class="hljs-comment">/*Gray background color*/</span>
 style.body.border.width = <span class="hljs-number">10</span>;
 style.body.padding.hor = <span class="hljs-number">0</span>;

 <span class="hljs-comment">/*Create a Preloader object*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * preload = lv_preload_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_size(preload, <span class="hljs-number">100</span>, <span class="hljs-number">100</span>);
 lv_obj_align(preload, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
 lv_preload_set_style(preload, LV_PRELOAD_STYLE_MAIN, &amp;style);</pre><p class="page" id="Roller"></p><h1>Roller (lv_roller)</h1>
 <p><em>Written for v5.1</em>
 Updated to v5.2</p>
 <h2 id="overview">Overview</h2>
 <p>Roller allow you to simply <strong>select one option from more</strong> with scrolling. Its functionalities are similar to <a href="#Drop-down-list">Drop down list</a>.</p>
 <p>The <strong>options</strong> are passed to the Roller as a <strong>string</strong> with <code>lv_roller_set_options(roller, options)</code>. The options should be separated by <code>\n</code>. For example: <code>&quot;First\nSecond\nThird&quot;</code>.</p>
 <p>You can <strong>select an option  manually</strong> with <code>lv_roller_set_selected(roller, id)</code>, where _id_ is the index of an option.</p>
 <p>A <strong>callback function</strong> can be specified with <code>lv_roller_set_action(roller, my_action)</code> to call when a new option is selected.</p>
 <p>The roller&#39;s <strong>height</strong> can be adjusted with <code>lv_roller_set_visible_row_count(roller, row_cnt)</code> to set number of visible options. </p>
 <p>The <strong>width</strong> is adjusted automatically. To prevent this apply <code>lv_roller_set_hor_fit(roller, false)</code> and set the width manually by <code>lv_obj_set_width(roller, width)</code>. You should use <code>lv_roller_set_hor_fit(roller, false)</code> instead of <code>lv_cont_set_fit(lv_page_get_scrl(roller), false, false);</code>, ohterwise you&#39;ll get an LV_LABEL_ALIGN_LEFT style of the list label text.</p>
 <p>The Roller&#39;s open/close <strong>animation</strong> time is adjusted by <code>lv_roller_set_anim_time(roller, anim_time)</code>. Zero animation time means no animation. This feature is implemented within lv_ddlist.c in v5.2: <code>lv_ddlist_set_anim_time(roller, anim_time);</code> should be used for animation.</p>
 <h2 id="style-usage">Style usage</h2>
 <p>The <code>lv_roller_set_style(roller, LV_ROLLER_STYLE_..., &amp;style)</code> set the styles of a roller.</p>
 <ul>
 <li><strong>LV_ROLLER_STYLE_BG</strong> Style of the background. All <em>style.body</em> properties are used. It is used for the label&#39;s style from <em>style.text</em>. Gradient is applied on the top and bottom as well. Default: _lv_style_pretty_</li>
 <li><strong>LV_DDLIST_STYLE_SEL</strong> Style of the selected option.  The <em>style.body</em> properties are used. The selected option will be recolored with <em>text.color</em>. Default: _lv_style_plain_color_</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/roller-lv_roller.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a default roller*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *roller1 = lv_roller_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_roller_set_options(roller1, <span class="hljs-string">"Apple\n"</span>
                               <span class="hljs-string">"Broccoli\n"</span>
                               <span class="hljs-string">"Cabbage\n"</span>
                               <span class="hljs-string">"Dewberry\n"</span>
                               <span class="hljs-string">"Eggplant\n"</span>
                               <span class="hljs-string">"Fig\n"</span>
                               <span class="hljs-string">"Grapefruit"</span>);
 lv_obj_set_pos(roller1, <span class="hljs-number">50</span>, <span class="hljs-number">80</span>);


 <span class="hljs-comment">/*Create styles*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> bg_style;
 lv_style_copy(&amp;bg_style, &amp;lv_style_pretty);
 bg_style.body.main_color = LV_COLOR_WHITE;
 bg_style.body.grad_color = LV_COLOR_HEX3(<span class="hljs-number">0xddd</span>);
 bg_style.body.border.width = <span class="hljs-number">0</span>;
 bg_style.text.line_space = <span class="hljs-number">20</span>;
 bg_style.text.opa = LV_OPA_40;

 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> sel_style;
 lv_style_copy(&amp;sel_style, &amp;lv_style_pretty);
 sel_style.body.empty = <span class="hljs-number">1</span>;
 sel_style.body.radius = LV_RADIUS_CIRCLE;
 sel_style.text.color = LV_COLOR_BLUE;

 <span class="hljs-comment">/*Create a roller and apply the new styles*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *roller2 = lv_roller_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_roller_set_options(roller2, <span class="hljs-string">"0\n"</span>
                               <span class="hljs-string">"1\n"</span>
                               <span class="hljs-string">"2\n"</span>
                               <span class="hljs-string">"3\n"</span>
                               <span class="hljs-string">"4\n"</span>
                               <span class="hljs-string">"5\n"</span>
                               <span class="hljs-string">"6\n"</span>
                               <span class="hljs-string">"7\n"</span>
                               <span class="hljs-string">"8\n"</span>
                               <span class="hljs-string">"9"</span>);
 lv_roller_set_style(roller2, LV_ROLLER_STYLE_BG, &amp;bg_style);
 lv_roller_set_selected(roller2, <span class="hljs-number">3</span>, <span class="hljs-literal">false</span>);
 lv_roller_set_style(roller2, LV_ROLLER_STYLE_SEL, &amp;sel_style);
 lv_roller_set_visible_row_count(roller2, <span class="hljs-number">3</span>);
 lv_roller_set_hor_fit(roller2, <span class="hljs-literal">false</span>);
 lv_obj_set_width(roller2, <span class="hljs-number">40</span>);
 lv_obj_set_pos(roller2, <span class="hljs-number">220</span>, <span class="hljs-number">50</span>);</pre><p class="page" id="Slider"></p><h1>Slider (lv_slider)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Slider object looks like a <strong>Bar</strong> supplemented <strong>with a Knob</strong>. The Knob can be <strong>dragged to set a value</strong>. The Slider also can be vertical or horizontal.</p>
 <p>To set an <strong>initial value</strong> use <code>lv_slider_set_value(slider, new_value)</code> function or <code>lv_slider_set_value_anim(slider, new_value, anim_time)</code> to set the value with an animation. </p>
 <p>To specify the <strong>range</strong> (min, max values) the <code>lv_slider_set_range(slider, min , max)</code> can be used.</p>
 <p>A <strong>callback function</strong> can be assigned to call when a new value is set by the user: <code>lv_slider_set_action(slider, my_action)</code>.</p>
 <p>The <strong>knob can be placed</strong> two ways:</p>
 <ul>
 <li>inside the background on min/max values</li>
 <li>on the edges on min/max values</li>
 </ul>
 <p>Use the <code>lv_slider_set_knob_in(slider, true/false)</code> to choose between the modes. (<em>knob_in</em> == <em>false</em> is the default)</p>
 <h2 id="style-usage">Style usage</h2>
 <p>You can modify the slider&#39;s styles with <code>lv_slider_set_style(slider, LV_SLIDER_STYLE_..., &amp;style)</code>.</p>
 <ul>
 <li><strong>LV_SLIDER_STYLE_BG</strong> Style of the background. All <em>style.body</em> properties are used. The <em>padding</em> values make the slider smaller then the knob. (negative value makes is larger)</li>
 <li><strong>LV_SLIDER_STYLE_INDIC</strong> Style of the indicator. All <em>style.body</em> properties are used. The <em>padding</em> values make the indicator smaller then the background. </li>
 <li><strong>LV_SLIDER_STYLE_KNOB</strong> Style of the knob.  The <em>style.body</em> properties are used except padding</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>The Knob is not a real object it is only drawn above the Bar</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/slider-lv_slider.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Called when a new value id set on the slider*/</span>
 <span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">slider_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * slider)</span>
 </span>{
    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"New slider value: %d\n"</span>, lv_slider_get_value(slider));

    <span class="hljs-keyword">return</span> LV_RES_OK;
 }

 .
 .
 .

 <span class="hljs-comment">/*Create a default slider*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * slider1 = lv_slider_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_size(slider1, <span class="hljs-number">160</span>, <span class="hljs-number">30</span>);
 lv_obj_align(slider1, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_RIGHT, <span class="hljs-number">-30</span>, <span class="hljs-number">30</span>);
 lv_slider_set_action(slider1, slider_action);
 lv_bar_set_value(slider1, <span class="hljs-number">70</span>);


 <span class="hljs-comment">/*Create a label right to the slider*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * slider1_label = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_label_set_text(slider1_label, <span class="hljs-string">"Default"</span>);
 lv_obj_align(slider1_label, slider1, LV_ALIGN_OUT_LEFT_MID, <span class="hljs-number">-20</span>, <span class="hljs-number">0</span>);

 <span class="hljs-comment">/*Create a bar, an indicator and a knob style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_bg;
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_indic;
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_knob;

 lv_style_copy(&amp;style_bg, &amp;lv_style_pretty);
 style_bg.body.main_color =  LV_COLOR_BLACK;
 style_bg.body.grad_color =  LV_COLOR_GRAY;
 style_bg.body.radius = LV_RADIUS_CIRCLE;
 style_bg.body.border.color = LV_COLOR_WHITE;

 lv_style_copy(&amp;style_indic, &amp;lv_style_pretty);
 style_indic.body.grad_color =  LV_COLOR_GREEN;
 style_indic.body.main_color =  LV_COLOR_LIME;
 style_indic.body.radius = LV_RADIUS_CIRCLE;
 style_indic.body.shadow.width = <span class="hljs-number">10</span>;
 style_indic.body.shadow.color = LV_COLOR_LIME;
 style_indic.body.padding.hor = <span class="hljs-number">3</span>;
 style_indic.body.padding.ver = <span class="hljs-number">3</span>;

 lv_style_copy(&amp;style_knob, &amp;lv_style_pretty);
 style_knob.body.radius = LV_RADIUS_CIRCLE;
 style_knob.body.opa = LV_OPA_70;
 style_knob.body.padding.ver = <span class="hljs-number">10</span> ;

 <span class="hljs-comment">/*Create a second slider*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * slider2 = lv_slider_create(lv_scr_act(), slider1);
 lv_slider_set_style(slider2, LV_SLIDER_STYLE_BG, &amp;style_bg);
 lv_slider_set_style(slider2, LV_SLIDER_STYLE_INDIC,&amp;style_indic);
 lv_slider_set_style(slider2, LV_SLIDER_STYLE_KNOB, &amp;style_knob);
 lv_obj_align(slider2, slider1, LV_ALIGN_OUT_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">30</span>); <span class="hljs-comment">/*Align below 'bar1'*/</span>

 <span class="hljs-comment">/*Create a second label*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * slider2_label = lv_label_create(lv_scr_act(), slider1_label);
 lv_label_set_text(slider2_label, <span class="hljs-string">"Modified"</span>);
 lv_obj_align(slider2_label, slider2, LV_ALIGN_OUT_LEFT_MID, <span class="hljs-number">-30</span>, <span class="hljs-number">0</span>);</pre><p class="page" id="Spinbox"></p><h1>Spinbox (lv_spinbox)</h1>
 <p><em>Written for v5.3</em></p>
 <ul>
 <li>This is a work in progress</li>
 </ul>
 <h2 id="overview">Overview</h2>
 <h2 id="style-usage">Style usage</h2>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>note</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://user-images.githubusercontent.com/13847288/47869506-6676d000-de07-11e8-807b-1dbaa238e2c8.gif" /></p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title">spinbox_value_changed</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * spinbox)</span>
 </span>{

 }

 .
 .
 .
 spinbox = lv_spinbox_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_spinbox_set_style(spinbox, LV_SPINBOX_STYLE_BG, &amp;spinBoxStyle);
 lv_spinbox_set_style(spinbox, LV_SPINBOX_STYLE_CURSOR, &amp;spinBoxCursorStyle);
 lv_obj_set_size(spinbox, LV_HOR_RES, <span class="hljs-number">80</span>);
 lv_obj_align(spinbox, <span class="hljs-literal">NULL</span>, LV_ALIGN_IN_TOP_LEFT, <span class="hljs-number">4</span>, <span class="hljs-number">0</span>);</pre><p class="page" id="Switch"></p><h1>Switch (lv_sw)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Switch can be used to <strong>turn on/off</strong>  something. The look like a little slider. The state of the switch can be changed by:</p>
 <ul>
 <li>Clicking on it</li>
 <li>Sliding it</li>
 <li>Using <code>lv_sw_on(sw)</code> and <code>lv_sw_off(sw)</code> functions</li>
 </ul>
 <p>A <strong>callback function</strong> can be assigned to call when the user uses the switch: <code>lv_sw_set_action(sw, my_action)</code>.</p>
 <h2 id="style-usage">Style usage</h2>
 <p>You can modify the Switch&#39;s styles with <code>lv_sw_set_style(sw, LV_SW_STYLE_..., &amp;style)</code>.</p>
 <ul>
 <li><strong>LV_SW_STYLE_BG</strong> Style of the background. All <em>style.body</em> properties are used. The <em>padding</em> values make the Switch smaller then the knob. (negative value makes is larger)</li>
 <li><strong>LV_SW_STYLE_INDIC</strong> Style of the indicator. All <em>style.body</em> properties are used. The <em>padding</em> values make the indicator smaller then the background. </li>
 <li><strong>LV_SW_STYLE_KNOB_OFF</strong> Style of the knob when the switch is off.  The <em>style.body</em> properties are used except padding.</li>
 <li><strong>LV_SW_STYLE_KNOB_ON</strong> Style of the knob when the switch is on.  The <em>style.body</em> properties are used except padding.</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>The Knob is not a real object it is only drawn above the Bar</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/switch-lv_sw.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create styles for the switch*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> bg_style;
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> indic_style;
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> knob_on_style;
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> knob_off_style;
 lv_style_copy(&amp;bg_style, &amp;lv_style_pretty);
 bg_style.body.radius = LV_RADIUS_CIRCLE;

 lv_style_copy(&amp;indic_style, &amp;lv_style_pretty_color);
 indic_style.body.radius = LV_RADIUS_CIRCLE;
 indic_style.body.main_color = LV_COLOR_HEX(<span class="hljs-number">0x9fc8ef</span>);
 indic_style.body.grad_color = LV_COLOR_HEX(<span class="hljs-number">0x9fc8ef</span>);
 indic_style.body.padding.hor = <span class="hljs-number">0</span>;
 indic_style.body.padding.ver = <span class="hljs-number">0</span>;

 lv_style_copy(&amp;knob_off_style, &amp;lv_style_pretty);
 knob_off_style.body.radius = LV_RADIUS_CIRCLE;
 knob_off_style.body.shadow.width = <span class="hljs-number">4</span>;
 knob_off_style.body.shadow.type = LV_SHADOW_BOTTOM;

 lv_style_copy(&amp;knob_on_style, &amp;lv_style_pretty_color);
 knob_on_style.body.radius = LV_RADIUS_CIRCLE;
 knob_on_style.body.shadow.width = <span class="hljs-number">4</span>;
 knob_on_style.body.shadow.type = LV_SHADOW_BOTTOM;

 <span class="hljs-comment">/*Create a switch and apply the styles*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *sw1 = lv_sw_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_sw_set_style(sw1, LV_SW_STYLE_BG, &amp;bg_style);
 lv_sw_set_style(sw1, LV_SW_STYLE_INDIC, &amp;indic_style);
 lv_sw_set_style(sw1, LV_SW_STYLE_KNOB_ON, &amp;knob_on_style);
 lv_sw_set_style(sw1, LV_SW_STYLE_KNOB_OFF, &amp;knob_off_style);
 lv_obj_align(sw1, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">-50</span>);

 <span class="hljs-comment">/*Copy the first switch and turn it ON*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *sw2 = lv_sw_create(lv_scr_act(), sw1);
 lv_sw_set_on(sw2);
 lv_obj_align(sw2, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, <span class="hljs-number">50</span>);</pre><p class="page" id="Tab-view"></p><h1>Tab view (lv_tabview)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Tab view object can be used to <strong>organize content in tabs</strong>. You can <strong>add a new tab</strong> with <code>lv_tabview_add_tab(tabview, &quot;Tab name&quot;)</code>. It will return with a pointer to a <a href="#Page">Page</a> object where you can add the tab&#39;s content.</p>
 <p>To <strong>select a tab</strong> you can:</p>
 <ul>
 <li>Click on it on the header part</li>
 <li>Slide horizontally </li>
 <li>Use <code>lv_tabview_set_tab_act(tabview, id, anim_en)</code> function</li>
 </ul>
 <p>The <strong>manual sliding</strong> can be disabled with <code>lv_tabview_set_sliding(tabview, false)</code>.</p>
 <p>The <strong>animation time</strong> is adjusted by <code>lv_tabview_set_anim_time(tabview, anim_time)</code>.</p>
 <p>A <strong>callback function</strong> can be assigned to <strong>tab load</strong> event with <code>lv_tabview_set_tab_load_action(tabview, action)</code>. The callback function need to have the following prototype:</p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">callback</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * tabview, <span class="hljs-keyword">uint16_t</span> act_id)</span></span>;</pre><p>Where _act_id_ means tab which will be loaded. In the action <code>lv_tabview_get_tab_act(tabview)</code> will give the id of the old tab.</p>
 <h2 id="style-usage">Style usage</h2>
 <p>Use <code>lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_...,  &amp;style)</code> to set a new style for an element of the tab view:</p>
 <ul>
 <li><strong>LV_TABVIEW_STYLE_BG</strong> main background which uses all <em>style.body</em> properties (default: lv_style_plain)</li>
 <li><strong>LV_TABVIEW_STYLE_INDIC</strong> a thin rectangle on the top to indicate the current tab. Uses all <em>style.body</em> properties. It height comes from <em>body.padding.inner</em> (default: _lv_style_plain_color_)</li>
 <li><strong>LV_TABVIEW_STYLE_BTN_BG</strong> style of the tab buttons&#39; background. Uses all <em>style.body</em> properties. The header height will be set automatically considering <em>body.padding.ver</em> (default: _lv_style_transp_)</li>
 <li><strong>LV_TABVIEW_STYLE_BTN_REL</strong> style of released tab buttons. Uses all <em>style.body</em> properties.  (default: _lv_style_tbn_rel_)</li>
 <li><strong>LV_TABVIEW_STYLE_BTN_PR</strong> style of released tab buttons. Uses all <em>style.body</em> properties.  (default: _lv_style_tbn_rel_)</li>
 <li><strong>LV_TABVIEW_STYLE_BTN_TGL_REL</strong> style of toggled released tab buttons. Uses all <em>style.body</em> properties.  (default: _lv_style_tbn_rel_)</li>
 <li><strong>LV_TABVIEW_STYLE_BTN_TGL_PR</strong> style of toggled pressed tab buttons. Uses all <em>style.body</em> properties.  (default: _lv_style_btn_tgl_pr_)</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/tab-view-lv_tabview.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a Tab view object*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *tabview;
 tabview = lv_tabview_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);

 <span class="hljs-comment">/*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *tab1 = lv_tabview_add_tab(tabview, <span class="hljs-string">"Tab 1"</span>);
 <span class="hljs-keyword">lv_obj_t</span> *tab2 = lv_tabview_add_tab(tabview, <span class="hljs-string">"Tab 2"</span>);
 <span class="hljs-keyword">lv_obj_t</span> *tab3 = lv_tabview_add_tab(tabview, <span class="hljs-string">"Tab 3"</span>);


 <span class="hljs-comment">/*Add content to the tabs*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * label = lv_label_create(tab1, <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"This the first tab\n\n"</span>
                         <span class="hljs-string">"If the content\n"</span>
                         <span class="hljs-string">"become too long\n"</span>
                         <span class="hljs-string">"the tab become\n"</span>
                         <span class="hljs-string">"scrollable\n\n"</span>);

 label = lv_label_create(tab2, <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"Second tab"</span>);

 label = lv_label_create(tab3, <span class="hljs-literal">NULL</span>);
 lv_label_set_text(label, <span class="hljs-string">"Third tab"</span>);</pre><p class="page" id="Text-area"></p><h1>Text area (lv_ta)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The Text Area is <strong>a page</strong>  with a <strong>label</strong> and a <strong>cursor</strong> on it. You can <strong>insert text or characters</strong>  to the current cursor position with:</p>
 <ul>
 <li><code>lv_ta_add_char(ta, &#39;c&#39;)</code></li>
 <li><code>lv_ta_add_text(ta, &quot;insert this text&quot;)</code></li>
 </ul>
 <p>The <code>lv_ta_set_text(ta, &quot;New text&quot;)</code> <strong>changes the whole text</strong>.</p>
 <p>To <strong>delete a character</strong> from the left of the current cursor position use <code>lv_ta_del()</code>.</p>
 <p>The cursor position can be modified directly like <code>lv_ta_set_cursor_pos(ta, 10)</code> or by stepping it:</p>
 <ul>
 <li><code>lv_ta_cursor_right(ta)</code></li>
 <li><code>lv_ta_cursor_left(ta)</code></li>
 <li><code>lv_ta_cursor_up(ta)</code></li>
 <li><code>lv_ta_cursor_down(ta)</code></li>
 </ul>
 <p>There are several cursor types. You can set one of them with: <code>lv_ta_set_cursor_type(ta, LV_CURSOR_...)</code></p>
 <ul>
 <li>LV_CURSOR_NONE</li>
 <li>LV_CURSOR_LINE</li>
 <li>LV_CURSOR_BLOCK</li>
 <li>LV_CURSOR_OUTLINE</li>
 <li>LV_CURSOR_UNDERLINE</li>
 </ul>
 <p>You can &#39;OR&#39; _LV_CURSOR_HIDDEN_ to any type to hide the cursor.</p>
 <p>The Text area can be configures to be one lined with <code>lv_ta_set_one_line(ta, true)</code>.</p>
 <p>The text area supports <strong>password mode</strong>. It can be enabled with <code>lv_ta_set_pwd_mode(ta, true)</code>.</p>
 <h2 id="style-usage">Style usage</h2>
 <p>Use <code>lv_ta_set_style(page, LV_TA_STYLE_...,  &amp;style)</code> to set a new style for an element of the text area:</p>
 <ul>
 <li><strong>LV_TA_STYLE_BG</strong> background&#39;s style which uses all <em>style.body</em> properties. The label also uses this <em>style.label</em> from this style.  (default: lv_style_pretty)</li>
 <li><strong>LV_TA_STYLE_SB</strong> scrollbar&#39;s style which uses all <em>style.body</em> properties (default: lv_style_transp)</li>
 <li><p><strong>LV_TA_STYLE_CURSOR</strong> cursor style. If NULL then the library sets us a style automatically according to the label color and font</p>
 <ul>
 <li>LV_CURSOR_LINE: a <em>style.line.width</em> wide line but drawn as a rectangle as <em>style.body</em>. Hor. and ver. padding makes an offset on the cursor</li>
 <li>LV_CURSOR_BLOCK: a rectangle as <em>style.body</em>  Hor. and ver. padding makes the rectangle larger</li>
 <li>LV_CURSOR_OUTLINE: an empty rectangle (just a border) as <em>style.body</em>  Hor. and ver. padding makes the rectangle larger</li>
 <li>LV_CURSOR_UNDERLINE: a <em>style.line.width</em> wide line but drawn as a rectangle as <em>style.body</em>. Hor. and ver. padding makes an offset on the cursor </li>
 </ul>
 </li>
 </ul>
 <h2 id="notes">Notes</h2>
 <ul>
 <li>In password mode <code>lv_ta_get_text(ta)</code> gives the real text and not the asterisk characters</li>
 </ul>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/text-area-lv_ta.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a scroll bar style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_sb;
 lv_style_copy(&amp;style_sb, &amp;lv_style_plain);
 style_sb.body.main_color = LV_COLOR_BLACK;
 style_sb.body.grad_color = LV_COLOR_BLACK;
 style_sb.body.border.color = LV_COLOR_WHITE;
 style_sb.body.border.width = <span class="hljs-number">1</span>;
 style_sb.body.border.opa = LV_OPA_70;
 style_sb.body.radius = LV_RADIUS_CIRCLE;
 style_sb.body.opa = LV_OPA_60;

 <span class="hljs-comment">/*Create a normal Text area*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * ta1 = lv_ta_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_size(ta1, <span class="hljs-number">200</span>, <span class="hljs-number">100</span>);
 lv_obj_align(ta1, <span class="hljs-literal">NULL</span>, LV_ALIGN_CENTER, <span class="hljs-number">0</span>, - LV_DPI / <span class="hljs-number">2</span>);
 lv_ta_set_style(ta1,LV_TA_STYLE_SB, &amp;style_sb);                     <span class="hljs-comment">/*Apply the scroll bar style*/</span>
 lv_ta_set_cursor_type(ta1, LV_CURSOR_BLOCK);
 lv_ta_set_text(ta1, <span class="hljs-string">"A text in a Text Area\n"</span>
               <span class="hljs-string">"You can scroll it if the text is long enough."</span>);    <span class="hljs-comment">/*Set an initial text*/</span>
 lv_ta_set_cursor_pos(ta1, <span class="hljs-number">2</span>);                                       <span class="hljs-comment">/*Set the cursor position*/</span>
 lv_ta_add_text(ta1, <span class="hljs-string">"long "</span>);                                       <span class="hljs-comment">/*Insert a word at the current cursor position*/</span>

 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_bg;
 lv_style_copy(&amp;style_bg, &amp;lv_style_pretty);
 style_bg.body.shadow.width = <span class="hljs-number">8</span>;
 style_bg.text.color = LV_COLOR_MAKE(<span class="hljs-number">0x30</span>, <span class="hljs-number">0x60</span>, <span class="hljs-number">0xd0</span>);              <span class="hljs-comment">/*Blue label*/</span>

 <span class="hljs-comment">/*Create a one lined test are with password mode*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * ta2 = lv_ta_create(lv_scr_act(), ta1);
 lv_obj_align(ta2, ta1, LV_ALIGN_OUT_BOTTOM_MID, <span class="hljs-number">0</span>, <span class="hljs-number">50</span>);
 lv_ta_set_style(ta2,LV_TA_STYLE_BG, &amp;style_bg);                     <span class="hljs-comment">/*Apply the background style*/</span>
 lv_ta_set_one_line(ta2, <span class="hljs-literal">true</span>);
 lv_ta_set_cursor_type(ta2, LV_CURSOR_LINE);
 lv_ta_set_pwd_mode(ta2, <span class="hljs-literal">true</span>);
 lv_ta_set_text(ta2, <span class="hljs-string">"Password"</span>);</pre><p class="page" id="Window"></p><h1>Window (lv_window)</h1>
 <p><em>Written for v5.1</em></p>
 <h2 id="overview">Overview</h2>
 <p>The windows are one of the <strong>most complex</strong> container-like objects. They are built from two main parts: a <strong>header</strong> <a href="#Container">Container</a> on the top and a <a href="#Page">Page</a> for the <strong>content</strong> below the header. </p>
 <p>On the header there is <strong>title</strong> which can be modified by: <code>lv_win_set_title(win, &quot;New title&quot;)</code>. The title always inherits the style of the header.</p>
 <p>You can add <strong>control buttons</strong> to the right side of the header with: <code>lv_win_add_btn(win, &quot;U:/close&quot;, my_close_action)</code>. The second parameter is an image file path, the third parameter is a function to call when the button is released. You can use <strong>symbols</strong> as images as well like: <code>lv_win_add_btn(win, SYMBOL_CLOSE, my_close_action)</code>. </p>
 <p>You can modify the <strong>size of the control buttons</strong> with the <code>lv_win_set_btn_size(win, new_size)</code> function.</p>
 <p>The scrollbar behavior can be set by <code>lv_win_set_sb_mode(win, LV_SB_MODE_...)</code>.</p>
 <p>To set a layout for the content use <code>lv_win_set_layout(win, LV_LAYOUT_...)</code>. </p>
 <h2 id="style-usage">Style usage</h2>
 <p>Use <code>lv_win_set_style(win, LV_WIN_STYLE_...,  &amp;style)</code> to set a new style for an element of the window:</p>
 <ul>
 <li><strong>LV_WIN_STYE_BG</strong> main background which uses all <em>style.body</em> properties (header and content page are placed on it) (default: lv_style_plain)</li>
 <li><strong>LV_WIN_STYLE_CONTENT_BG</strong> content page&#39;s background which uses all <em>style.body</em> properties (default: lv_style_transp)</li>
 <li><strong>LV_WIN_STYLE_CONTENT_SCRL</strong> content page&#39;s scrollable part which uses all <em>style.body</em> properties (default: lv_style_transp)</li>
 <li><strong>LV_WIN_STYLE_SB</strong> scroll bar&#39;s style which uses all <em>style.body</em> properties. hor/ver* padding sets the scrollbars&#39; padding respectively and the inner padding sets the scrollbar&#39;s width.  (default: lv_style_pretty_color)</li>
 <li><strong>LV_WIN_STYLE_HEADER</strong> header&#39;s style which uses all <em>style.body</em> properties (default: lv_style_plain_color)</li>
 <li><strong>LV_WIN_STYLE_BTN_REL</strong> released button&#39;s style (on header) which uses all <em>style.body</em> properties (default: lv_style_btn_rel)</li>
 <li><strong>LV_WIN_STYLE_BTN_PR</strong> released button&#39;s style (on header) which uses all <em>style.body</em> properties (default: lv_style_btn_pr)</li>
 </ul>
 <h2 id="notes">Notes</h2>
 <h2 id="example">Example</h2>
 <p><img src="https://raw.githubusercontent.com/wiki/littlevgl/lvgl/img/window-lv_win.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a scroll bar style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_sb;
 lv_style_copy(&amp;style_sb, &amp;lv_style_plain);
 style_sb.body.main_color = LV_COLOR_BLACK;
 style_sb.body.grad_color = LV_COLOR_BLACK;
 style_sb.body.border.color = LV_COLOR_WHITE;
 style_sb.body.border.width = <span class="hljs-number">1</span>;
 style_sb.body.border.opa = LV_OPA_70;
 style_sb.body.radius = LV_RADIUS_CIRCLE;
 style_sb.body.opa = LV_OPA_60;

 <span class="hljs-comment">/*Create a window*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * win = lv_win_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_win_set_title(win, <span class="hljs-string">"Example window"</span>);                        <span class="hljs-comment">/*Set the title*/</span>
 lv_win_set_style(win, LV_WIN_STYLE_SB, &amp;style_sb);              <span class="hljs-comment">/*Set the scroll bar style*/</span>


 <span class="hljs-comment">/*Add control button to the header*/</span>
 lv_win_add_btn(win, SYMBOL_SETTINGS, my_setup_action);            <span class="hljs-comment">/*Add a setup button*/</span>
 lv_win_add_btn(win, SYMBOL_CLOSE, lv_win_close_action);           <span class="hljs-comment">/*Add close button and use built-in close action*/</span>


 <span class="hljs-comment">/*Add some dummy content*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * txt = lv_label_create(win, <span class="hljs-literal">NULL</span>);
 lv_label_set_text(txt, <span class="hljs-string">"This is the content of the window\n\n"</span>
                       <span class="hljs-string">"You can add control buttons to\nthe window header\n\n"</span>
                       <span class="hljs-string">"You can scroll it\n\n"</span>
                       <span class="hljs-string">"See the scroll bar on the right!"</span>);</pre>
        </div> <!-- /div.col-md-9 -->
      </div> <!-- /div.row -->
    </div> <!-- /div.container -->
  </body>
  <script>
    $('body').scrollspy({ target: '#scroll-spy', offset: 40 })
  </script>
 </html>