chui-rails 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (43) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +17 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +29 -0
  6. data/Rakefile +1 -0
  7. data/chui-rails.gemspec +23 -0
  8. data/lib/chui/rails.rb +7 -0
  9. data/lib/chui/rails/version.rb +5 -0
  10. data/vendor/assets/images/app-icons/app.png +0 -0
  11. data/vendor/assets/images/app-icons/browser.png +0 -0
  12. data/vendor/assets/images/app-icons/mail.png +0 -0
  13. data/vendor/assets/images/app-icons/music.png +0 -0
  14. data/vendor/assets/images/app-icons/weather.png +0 -0
  15. data/vendor/assets/images/icons/Camera.svg +55 -0
  16. data/vendor/assets/images/icons/Documents.svg +71 -0
  17. data/vendor/assets/images/icons/Download.svg +8 -0
  18. data/vendor/assets/images/icons/Favorite.svg +25 -0
  19. data/vendor/assets/images/icons/Head_phones.svg +32 -0
  20. data/vendor/assets/images/icons/android.svg +15 -0
  21. data/vendor/assets/images/icons/arrow_down.svg +6 -0
  22. data/vendor/assets/images/icons/arrow_left.svg +6 -0
  23. data/vendor/assets/images/icons/arrow_right.svg +6 -0
  24. data/vendor/assets/images/icons/arrow_up.svg +6 -0
  25. data/vendor/assets/images/icons/down.svg +13 -0
  26. data/vendor/assets/images/icons/left.svg +13 -0
  27. data/vendor/assets/images/icons/right.svg +13 -0
  28. data/vendor/assets/images/icons/up.svg +13 -0
  29. Harm.jpg +0 -0
  30. data/vendor/assets/images/music/Imagine Dragons.jpg +0 -0
  31. data/vendor/assets/images/music/Kiss.jpg +0 -0
  32. data/vendor/assets/images/music/Permanent.jpg +0 -0
  33. data/vendor/assets/images/music/The Olms.jpg +0 -0
  34. data/vendor/assets/images/music/Willy Moon.jpg +0 -0
  35. data/vendor/assets/javascripts/chui-3.7.0.js +2796 -0
  36. data/vendor/assets/javascripts/chui-3.7.0.min.js +9 -0
  37. data/vendor/assets/stylesheets/chui-android-3.7.0.css +2970 -0
  38. data/vendor/assets/stylesheets/chui-android-3.7.0.min.css +8 -0
  39. data/vendor/assets/stylesheets/chui-ios-3.7.0.css +2614 -0
  40. data/vendor/assets/stylesheets/chui-ios-3.7.0.min.css +8 -0
  41. data/vendor/assets/stylesheets/chui-win-3.7.0.css +2375 -0
  42. data/vendor/assets/stylesheets/chui-win-3.7.0.min.css +8 -0
  43. metadata +113 -0
@@ -0,0 +1,8 @@
1
+ /*
2
+ ChocolateChip-UI
3
+ ChUI-iOS.css
4
+ Copyright 2014 Sourcebits www.sourcebits.com
5
+ License: MIT
6
+ Version: 3.7.0
7
+ */
8
+ .attentionGrapper{color:#007aff!important}body,html{padding:0;margin:0;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}body{background-color:#efeff4;font:400 10pt/13pt HelveticaNeue,Helvetica,Sans-serif;-webkit-font-smoothing:subpixel-antialiased;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.type-xx-large,h1{font-size:42pt;font-weight:200;line-height:1.1429}.type-x-large,h2{font-size:20pt;font-weight:200;line-height:1.2}.type-large,h3{font-size:11pt;font-weight:600;line-height:1.3636}.type-medium,code,h4,pre,samp{font-size:11pt;font-weight:400;line-height:1.3636}.type-small,body,h5,legend{font-size:11pt;font-weight:300;line-height:1.3636}.type-xx-small,caption,figcaption,h6,small{font-size:9pt;font-weight:400;line-height:1.6667}article{position:absolute;top:45px;right:0;bottom:0;left:0;-webkit-transition:all .15s;transition:all .15s;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.hide-navbars article{top:0}.isStandalone article{top:65px}.isStandalone .hide-navbars article{top:20px}@media only screen and (min-width:768px){article{-webkit-transition:all .25s ease-out;transition:all .25s ease-out}}.current{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.next{-webkit-transform:translate3d(105%,0,0);transform:translate3d(105%,0,0);opacity:1;visibility:visible}.previous{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);opacity:1;visibility:visible}html[dir=rtl] .current{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}html[dir=rtl] .next{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}html[dir=rtl] .previous{-webkit-transform:translate3d(105%,0,0);transform:translate3d(105%,0,0)}.scroller-horizontal,.scroller-vertical{-webkit-box-flex:1;-webkit-flex:1;flex:1;padding-bottom:100px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scroller-horizontal{overflow-x:hidden;overflow-y:auto}.slide-out>section,article>section{padding-top:20px;padding-bottom:100px;-webkit-box-flex:1;-webkit-flex:1;flex:1;position:absolute;top:0;left:0;width:100%;min-height:100%!important}.vertical,li.comp>aside.vertical{display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:start;justify-content:flex-start;-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.horizontal{display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-webkit-justify-content:start;justify-content:flex-start;-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.horizontal.centered{-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center}a.button{cursor:pointer;text-decoration:none;font-size:13pt;-webkit-transition:all .35s ease-out;transition:all .35s ease-out;display:block;-webkit-box-sizing:auto;box-sizing:auto;padding:8px 0;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;text-align:center;color:#007aff;border-color:#007aff;background-color:rgba(255,255,255,.01)}.isDesktop a.button:hover{cursor:pointer;opacity:.5!important}a.button.back,a.button.backTo{text-align:left;padding:0 0 0 20px!important;line-height:28px;color:#007aff;border:none;position:relative;overflow:hidden;text-overflow:ellipsis;display:inline-block!important;height:30px}a.button.back::before,a.button.backTo::before{display:block;content:'';border:1px solid transparent;background-color:#007aff;-webkit-mask-size:90% 90%;-webkit-mask-repeat:no-repeat;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20version%3D'1.1'%20width%3D'21'%20height%3D'35'%20viewBox%3D'0%200%2021%2035'%20id%3D'svg2'%3E%3Cdefs%20id%3D'defs8'%20/%3E%3Cg%20transform%3D'translate%28-2.1355929,0.0677963%29'%20id%3D'Page-1'%20style%3D'fill%3Anone%3Bstroke%3Anone'%3E%3Cpath%20d%3D'M%2021.353814,1.2365445%205.0903576,17.5%2021.353814,33.763456'%20id%3D'Rectangle-1'%20style%3D'stroke%3A%23000%3Bstroke-width%3A3'%20/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:left center;width:20px;height:20px;margin-right:7px;position:absolute;left:-4px;top:2px}a.button.action{color:#585d63;border:1px solid #585d63;border-radius:20px;display:block;margin:0 auto;padding:10px 20px;-webkit-box-sizing:border-box;box-sizing:border-box;width:auto;height:auto;min-width:200px;max-width:300px}nav>a.button{max-width:100px}.button.align-flush,.toolbar>.button.align-flush{position:absolute;right:15px;margin-right:0!important;z-index:100;top:3px}.isDesktopSafari a.button.back{margin-top:8px!important}.isSafari6 a .button.backTo,.isSafari6 a.button.back,.isiOS a.button.back,.isiOS a.button.backTo{display:-webkit-box;margin-top:0}html[dir=rtl] a.button.align-flush{right:auto;left:15px}html[dir=rtl] a.button.back,html[dir=rtl] a.button.backTo{padding:0 20px 0 0!important}html[dir=rtl] a.button.back::before,html[dir=rtl] a.button.backTo::before{-webkit-transform:rotate(180deg);right:-4px;left:auto}html[dir=rtl] .toolbar>.button.align-flush{right:auto;left:15px}#global-nav{background-color:#f7f7f7;border-bottom:solid 1px #a7a7aa;overflow:hidden}nav{height:45px;-webkit-box-sizing:border-box;box-sizing:border-box;display:flex;display:-webkit-box;display:-webkit-flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start;text-align:center;position:absolute;top:0;left:0;right:0;-webkit-transition:all .15s ease-out;transition:all .15s ease-out;padding:0 15px;vertical-align:middle}nav>.button,nav>div>.button{color:#007aff}nav>h1{text-align:center;display:inline-block;-webkit-box-flex:1!important;-webkit-flex:1!important;flex:1!important;font:400 12pt/14pt HelveticaNeue,Sans-serif;position:absolute;top:0;left:100px;right:100px;z-index:-1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#000}nav>h1+a.button{margin:0;position:absolute;right:15px;top:3px}nav>a.button+h1{left:120px;right:120px}.isStandalone nav{top:20px}.isStandalone #global-nav{height:65px;top:0}@media only screen and (max-device-width:320px) and (orientation:portrait){nav>a.button+h1{left:115px;right:115px}}@media only screen and (max-device-width:320px) and (orientation:landscape){nav>a.button+h1{left:150px;right:150px}}.list{list-style:none;margin:0 0 10px;padding:0;border-top:solid 1px #c8c8c8;border-bottom:solid 1px #c8c8c8;background-color:#fff;overflow:hidden;width:100%}.list>li{padding:13px 15px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;position:relative;background-color:#fff;font-size:12pt}.list>li::before{display:block;content:'';position:absolute;bottom:0;left:15px;right:0;border-bottom:solid 1px #c8c8c8}.list>li:last-of-type::before{border-bottom:none}.list>li.nav::after{display:block;content:'';width:6px;height:6px;border-right:solid 2px #c7c7cc;border-top:solid 2px #c7c7cc;-webkit-transform:rotate(45deg);transform:rotate(45deg);float:right;position:absolute;top:16px;right:15px;-webkit-transition:all .4s ease-out;transition:all .4s ease-out}.list>li.show-detail::after{display:block;content:'i';width:22px;height:20px;border-radius:20px;border:1px solid #007aff;color:#007aff;font:700 14px/0 Times,serif;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px 8px;position:absolute;top:10px;right:15px}.list+p,.list+p+p{color:#7f7f7f;font-family:HelveticaNeue,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}.list~p{margin:0 15px}.list~p+p{margin-top:5pt}.isDesktop .list.select>li:hover,.isDesktop .list>li[data-goto]:hover,.isDesktop .list>li[data-show-article]:hover,.list>li.selected{background-color:#d9d9d9;cursor:pointer}.list>li>h3,.list>li>h4{width:80%;font-weight:200;margin:0}.list>li h3{line-height:18pt}.list>li h4{line-height:14pt;color:#7f7f7f}.list>li>div>h4,.list>li>h4{font-size:11pt;margin:0}.list>li>aside>h4{margin:0;font-weight:400;color:#7f7f7f}.list h3,.list h4,.list p{pointer-events:none}.list>li>p{margin:6px 0;color:#7f7f7f}.list>li>p+p{margin-top:6px}.list>li.comp>div>p{font-size:10pt;margin:0;color:#7f7f7f}section h2{font:400 11pt/12pt HelveticaNeue,Sans-serif;margin:26px 0 6px 15px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#7f7f7f}section h2.normal-case{text-transform:none}section h2.wrap{white-space:normal}html[dir=rtl] section h2{margin:26px 15px 6px 0}html[dir=rtl] .list li{padding:13px 15px 13px 5px}html[dir=rtl] .list li::before{left:0;right:15px}html[dir=rtl] .list li.nav::after{top:20px;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}html[dir=rtl] .list li.show-detail::after{left:10px;right:auto}html[dir=rtl] .list li.nav::after{left:15px;right:auto}.list>li.comp::before{content:none}li.comp{display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-webkit-align-items:stretch;align-items:stretch;padding-bottom:0}li.comp>div{-webkit-box-flex:1;-webkit-flex:1;flex:1;border-bottom:solid 1px #c8c8c8;padding:0 0 10px;margin-left:0}li.comp>div>h3,li.comp>div>h4{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:HelveticaNeue,Helvetica,Sans-serif;font-weight:200;margin:0;color:#2d2d2d}li.comp>div+aside{margin-right:-15px}li.comp>aside{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;-webkit-justify-content:center;-webkit-align-items:center;justify-content:center;align-items:center;padding:0 0 10px}li.comp>aside:first-child{-webkit-box-align:start}li.comp>aside>label,li.comp>aside>span{display:inline-block;margin-left:6px}li.comp>aside>.nav{display:block;width:12px;height:12px}li.comp>aside>.nav::after{display:block;content:'';width:6px;height:6px;border-right:solid 2px #c7c7cc;border-top:solid 2px #c7c7cc;-webkit-transform:rotate(45deg) translate3d(4px,0,0);transform:rotate(45deg) translate3d(4px,0,0)}li.comp>aside>.show-detail{display:inline-block;margin-bottom:-4px}li.comp>aside>.show-detail::after{display:block;content:'i';width:22px;height:20px;border-radius:20px;border:1px solid #007aff;color:#007aff;font:700 14px/0 Times,serif;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px 8px;float:right;margin:0 10px 0 0!important}li.comp>aside:first-child{margin-right:10px}li.comp>aside:last-child{padding:0 10px 10px;border-bottom:solid 1px #c8c8c8}li.comp>aside>span.counter,li.comp>aside>span.date-time{font-weight:400;color:#2d2d2d;font-size:12pt}li.comp:last-of-type>aside:last-child,li.comp:last-of-type>div{border:none}li.comp.wrap>div>h3,li.comp.wrap>div>h4{white-space:wrap;overflow:visible}html[dir=rtl] li.comp{padding-bottom:0!important}html[dir=rtl] li.comp>aside>.nav::after{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}html[dir=rtl] li.comp>aside:first-child{margin-left:10px;margin-right:0}html[dir=rtl] li.comp>aside:last-child{padding:0 10px 0 0}html[dir=rtl] li.comp>aside:last-child>.nav::after{margin-left:-10px!important}html[dir=rtl] li.comp>aside>span.counter,html[dir=rtl] li.comp>aside>span.date-time{margin-right:5px;margin-left:0}html[dir=rtl] li.comp>aside>h4{padding-bottom:4px}@media only screen and (max-device-width:320px) and (orientation:portrait){li.comp>aside>h4{max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.grid{-webkit-box-orientation:horizontal;-webkit-box-align:stretch;-webkit-flex-direction:row;-webkit-align-items:stretch;-ms-flex-direction:row;-ms-align-items:stretch;display:flex;flex-direction:row;align-items:stretch}.grid.wrap{-webkit-box-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.col{-webkit-box-flex:1 1 auto;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.grid.center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-justify-content:center;justify-content:center}.center .col{-webkit-flex-grow:0;-webkit-flex-shrink:0;-ms-flex-grow:0;-ms-flex-shrink:0;flex-grow:0;flex-shrink:0}.flex-1{-webkit-flex-basis:10%;-ms-flex-basis:10%;flex-basis:10%}.flex-2{-webkit-flex-basis:20%;-ms-flex-basis:20%;flex-basis:20%}.flex-3{-webkit-flex-basis:30%;-ms-flex-basis:30%;flex-basis:30%}.flex-4{-webkit-flex-basis:40%;-ms-flex-basis:40%;flex-basis:40%}.flex-5{-webkit-flex-basis:50%;-ms-flex-basis:50%;flex-basis:50%}.flex-6{-webkit-flex-basis:60%;-ms-flex-basis:60%;flex-basis:60%}.flex-7{-webkit-flex-basis:70%;-ms-flex-basis:70%;flex-basis:70%}.flex-8{-webkit-flex-basis:80%;-ms-flex-basis:80%;flex-basis:80%}.flex-9{-webkit-flex-basis:90%;-ms-flex-basis:90%;flex-basis:90%}.flex-10{-webkit-flex-basis:100%;-ms-flex-basis:100%;flex-basis:100%}.gutter-5 .col{margin:5px}.gutter-10 .col{margin:10px}html[dir=rtl] .grid{-webkit-box-direction:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}@media only screen and (max-width:599px){.grid{-webkit-box-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-wekbit-flex-direction:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin:0!important}.col.flex-1,.col.flex-2,.col.flex-3,.col.flex-4{-webkit-box-flex:1!important;-webkit-flex:1!important;-ms-flex:1!important;flex:1!important;-webkit-flex-basis:50%;-ms-flex-basis:50%;flex-basis:50%}.col.flex-10,.col.flex-5,.col.flex-6,.col.flex-7,.col.flex-8,.col.flex-9{-webkit-box-flex:2!important;-webkit-flex:2!important;-ms-flex:2!important;flex:2!important}.isWindows .col,.isWindows .grid{display:block}}.segmented:not(.paging){-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box}.segmented:not(.paging)>.button{border:1px solid #007aff;padding:4px 15px;border-left:none;background-color:rgba(255,255,255,.65);width:auto;overflow-x:hidden;-webkit-transition:none;transition:none;font-size:10pt;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-flex:1!important;-webkit-flex:1!important;flex:1!important;text-align:center;color:#007aff}.segmented:not(.paging)>.button:first-of-type{border-left:solid 1px #007aff;border-top-left-radius:4px;border-bottom-left-radius:4px}.segmented:not(.paging)>.button:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}.isDesktop .segmented:not(.paging)>.button:hover,.segmented:not(.paging)>.button.selected{color:#fff;background-color:#007aff;opacity:1!important}div.horizontal.centered>.segmented{display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-flex:1;-webkit-flex:1;flex:1;margin:10px 15px}.segmented.align-flush{position:absolute;right:15px;top:6px}html[dir=rtl] .segmented.align-flush{position:absolute;right:auto;left:15px;top:6px}html[dir=rtl] .segmented .button:first-of-type{border-left:none;border-radius:0 4px 4px 0}html[dir=rtl] .segmented .button:last-of-type{border-left:solid 1px #007aff;border-radius:4px 0 0 4px}.segmented.paging,.segmented.paging.vertical{-webkit-box-orient:horizontal!important;-webkit-flex-direction:row!important;flex-direction:row!important}.segmented.paging.vertical>.button,.segmented.paging>.button{background:none!important;color:#007aff;width:40px;height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;border-radius:0!important;border:none!important}.isDesktop .segmented.paging.vertical>.button:hover,.isDesktop .segmented.paging>.button:hover,.segmented.paging.vertical>.button.selected,.segmented.paging>.button.selected{opacity:.5!important;color:#007aff;background-color:transparent!important}.segmented.paging.vertical>.button::before,.segmented.paging>.button::before{display:block;content:'';width:35px;height:35px;position:absolute;top:0;left:0;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;background-color:#007aff}.segmented.paging.horizontal>.button:first-of-type::before{-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20version%3D'1.1'%20id%3D'svg2'%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20x%3D'0px'%20y%3D'0px'%20width%3D'48px'%20height%3D'48px'%20viewBox%3D'0%200%2048%2048'%20enable-background%3D'new%200%200%2048%2048'%20xml%3Aspace%3D'preserve'%3E%3Cg%20id%3D'g4'%3E%3C/g%3E%3Cg%20id%3D'layer2'%3E%3Cpath%20id%3D'path7'%20d%3D'M28.038,8.381l2.674,2.599L18.545,23.146l12.086,12.086l-2.593,2.679L17.909,27.782l-4.636-4.636l4.636-4.636%20L28.038,8.381z'/%3E%3C/g%3E%3C/svg%3E")}.segmented.paging.horizontal>.button:last-of-type::before{-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20version%3D'1.1'%20id%3D'svg2'%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20x%3D'0px'%20y%3D'0px'%20width%3D'48px'%20height%3D'48px'%20viewBox%3D'0%200%2048%2048'%20enable-background%3D'new%200%200%2048%2048'%20xml%3Aspace%3D'preserve'%3E%3Cg%20id%3D'g4'%3E%3C/g%3E%3Cg%20id%3D'layer2'%3E%3Cpath%20id%3D'path7'%20d%3D'M15.946,37.911l-2.674-2.599l12.167-12.167L13.354,11.06l2.593-2.679L26.075,18.51l4.636,4.636l-4.636,4.636L15.946,37.911z'/%3E%3C/g%3E%3C/svg%3E")}.segmented.paging.vertical>.button:first-of-type::before,html[dir=rtl] .segmented.paging.vertical>.button:last-of-type::before{-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20version%3D'1.1'%20id%3D'svg2'%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20x%3D'0px'%20y%3D'0px'%20width%3D'48px'%20height%3D'48px'%20viewBox%3D'0%200%2048%2048'%20enable-background%3D'new%200%200%2048%2048'%20xml%3Aspace%3D'preserve'%3E%3Cg%20id%3D'g4'%3E%3C/g%3E%3Cg%20id%3D'layer2'%3E%3Cpath%20id%3D'path7'%20d%3D'M7.227,17.101l2.599-2.674l12.167,12.167l12.086-12.086l2.679,2.593L26.628,27.229l-4.636,4.636l-4.636-4.636%20L7.227,17.101z'/%3E%3C/g%3E%3C/svg%3E")}.segmented.paging.vertical>.button:last-of-type::before,html[dir=rtl] .segmented.paging.vertical>.button:first-of-type::before{-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20version%3D'1.1'%20id%3D'svg2'%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20x%3D'0px'%20y%3D'0px'%20width%3D'48px'%20height%3D'48px'%20viewBox%3D'0%200%2048%2048'%20enable-background%3D'new%200%200%2048%2048'%20xml%3Aspace%3D'preserve'%3E%3Cg%20id%3D'g4'%3E%3C/g%3E%3Cg%20id%3D'layer2'%3E%3Cpath%20id%3D'path7'%20d%3D'M36.757,29.191l-2.599,2.674L21.992,19.698L9.905,31.784l-2.679-2.593l10.129-10.129l4.636-4.636l4.636,4.636%20L36.757,29.191z'/%3E%3C/g%3E%3C/svg%3E")}article.paging{overflow:hidden!important;overflow-y:scroll!important;-webkit-box-orient:vertical!important;-webkit-direction:column!important;box-orient:vertical!important;direction:column!important}article.paging>section{position:absolute;width:100%;left:0;right:0;bottom:0;top:0;opacity:1;padding:0 0 100px!important;overflow-x:hidden;overflow-y:scroll;-webkit-transition:all .15s ease-out;transition:all .15s ease-out}article.paging.horizontal>section.previous{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}article.paging.horizontal>section.current{-webkit-transform:translate3d(0,0,0) scale(1,1);transform:translate3d(0,0,0) scale(1,1)}article.paging.horizontal>section.next{-webkit-transform:translate3d(100%,0,0) scale(0,1);transform:translate3d(100%,0,0) scale(0,1)}article.paging.vertical>section.previous{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}article.paging.vertical>section.current{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}article.paging.vertical>section.next{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}html[dir=rtl] .segmented.paging.horizontal{-webkit-flex-direction:row-reverse;flex-direction:row-reverse}html[dir=rtl] .segmented.paging.horizontal .button:first-child,html[dir=rtl] .segmented.paging.horizontal .button:last-child{border:none!important}html[dir=rtl] .segmented.paging.horizontal>.button::before{top:-2px}html[dir=rtl] article.paging.horizontal>section.previous{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}html[dir=rtl] article.paging.horizontal>section.current{-webkit-transform:translate3d(0,0,0) scale(1,1);transform:translate3d(0,0,0) scale(1,1)}html[dir=rtl] article.paging.horizontal>section.next{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}html[dir=rtl] .segmented.paging.horizontal>.button::before{-webkit-transform:rotate(180deg)}.toolbar{position:fixed;bottom:0;left:0;right:0;height:45px;padding:0 15px;background-color:#f7f7f7;border-top:solid 1px #a7a7aa;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-webkit-justify-content:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-transition:all .15s ease-out;transition:all .15s ease-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.toolbar>.button{margin-right:20px;color:#007aff}.splitlayout>.master+.toolbar{left:0;width:320px;border-right:solid 1px #c8c8c7!important}.splitlayout>.detail+.toolbar{left:320px}article.has-toolbar{bottom:45px!important}div.toolbar.current{-webkit-transform:translate3d(0,0,0)!important;transform:translate3d(0,0,0)!important}div.toolbar.next{-webkit-transform:translate3d(101%,0,0)!important;transform:translate3d(101%,0,0)!important}div.toolbar.previous{-webkit-transform:translate3d(-101%,0,0)!important;transform:translate3d(-101%,0,0)!important}html[dir=rtl] .splitlayout>.master+.toolbar{right:0;left:320px;width:320px;border-right:none;border-left:solid 1px #c8c8c7!important}html[dir=rtl] .splitlayout>.detail+.toolbar{right:320px;left:0}body.splitlayout{display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-webkit-justify-content:start;justify-content:flex-start;-webkit-box-align:stretch;-webkit-align-items:stretch;align-items:stretch}body.splitlayout>nav{background-color:#f7f7f7;border-bottom:solid 1px #a7a7aa}body.splitlayout>nav:first-of-type{width:320px;right:auto;border-right:solid 1px #c8c8c7!important}body.splitlayout>nav:last-of-type{left:320px}body.splitlayout>nav h1{z-index:auto;text-align:center}body.splitlayout>article.master{top:45px;left:0;bottom:0;right:320px;-webkit-box-sizing:border-box;box-sizing:border-box;width:320px;border-right:solid 1px #c8c8c7!important}body.splitlayout>article.detail{top:45px;left:320px!important;bottom:0;-webkit-box-flex:1;-webkit-flex:1;flex:1}html[dir=rtl] body.splitlayout>nav:first-of-type{right:0;left:320px;border-right:none;border-left:solid 1px #c8c8c7!important}html[dir=rtl] body.splitlayout>nav:last-of-type{left:0;right:320px}html[dir=rtl] body.splitlayout>article.master{left:320px!important;right:0!important;border-right:none!important;border-left:solid 1px #c8c8c7!important}html[dir=rtl] body.splitlayout>article.detail{right:320px!important;left:0!important}@media only screen and (max-device-width:320px) and (orientation:portrait){.splitlayout>article.master{right:260px!important;width:260px}.splitlayout>article.detail{left:260px!important}.splitlayout>nav:first-of-type{width:260px!important}.splitlayout>nav:last-of-type{left:260px!important}}.mask{display:block;background-color:#000;position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;z-index:9999;cursor:pointer}@-webkit-keyframes busyAnim{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes busyAnim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.busy{display:block;position:relative;width:20px;height:20px;-webkit-animation:busyAnim 100s linear infinite;animation:busyAnim 2s linear infinite;margin-left:auto;margin-right:auto;background-color:#000;-webkit-mask-position:50% 50%;-webkit-mask-size:90% 90%;-webkit-mask-repeat:no-repeat;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'translate%2821,21%29'%3E%3Cg%20stroke-width%3D'4'%20stroke-linecap%3D'round'%20stroke%3D'rgb%280,%200,%200%29'%3E%3Cline%20id%3D'tine1'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%280,%200,%200%29'%20opacity%3D'1'%3E%3C/line%3E%3Cline%20id%3D'tine2'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-36,%200,%200%29'%20opacity%3D'.9'%3E%3C/line%3E%3Cline%20id%3D'tine3'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-72,%200,%200%29'%20opacity%3D'.8'%3E%3C/line%3E%3Cline%20id%3D'tine4'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-108,%200,%200%29'%20opacity%3D'.7'%3E%3C/line%3E%3Cline%20id%3D'tine5'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-144,%200,%200%29'%20opacity%3D'.6'%3E%3C/line%3E%3Cline%20id%3D'tine6'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-180,%200,%200%29'%20opacity%3D'.5'%3E%3C/line%3E%3Cline%20id%3D'tine7'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-216,%200,%200%29'%20opacity%3D'.4'%3E%3C/line%3E%3Cline%20id%3D'tine8'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-252,%200,%200%29'%20opacity%3D'1'%3E%3C/line%3E%3Cline%20id%3D'tine9'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-288,%200,%200%29'%20opacity%3D'1'%3E%3C/line%3E%3Cline%20id%3D'tine10'%20x1%3D'0'%20y1%3D'11'%20x2%3D'0'%20y2%3D'18'%20transform%3D'rotate%28-324,%200,%200%29'%20opacity%3D'1'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.busy.align-flush{position:absolute;right:15px}.popover{width:280px;background-color:#e7e9ee;border-radius:10px;height:250px;max-height:300px;position:absolute;padding-bottom:10px;z-index:111111}.popover::before{display:block;content:'';width:15px;height:15px;background-color:#f5f5f6;-webkit-transform:rotate(45deg);margin:0 auto;position:absolute;top:-7px;left:49%;z-index:-1}.popover header{background-color:#f5f5f6;border-top-left-radius:10px;border-top-right-radius:10px;padding:1px 10px;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}.popover header h1{font-size:12pt;text-align:center}.popover>section{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:0;position:absolute;top:40px;bottom:10px;left:0;right:0}.popup{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:300px;border-radius:10px;padding:0;background-color:#e3e3e3;position:absolute;z-index:10000;margin-left:auto;margin-right:auto;-webkit-transition:all .25s ease-out;transition:all .25s ease-out;-webkit-trasform-origin:center center;trasform-origin:center center}.popup.closed{-webkit-transform:scale(0);transform:scale(0)}.popup.opened{display:block;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.popup.noTitle{padding-top:20px}.popup>.panel{display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.popup>.panel>p{padding:0 15px;margin-top:0;text-align:center}.popup footer,.popup header{display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-webkit-justify-content:distribute;justify-content:space-around;-webkit-box-align:stretch;-webkit-align-items:stretch;align-items:stretch;width:100%!important;box-sizing:border-box}.popup .panel>header{padding:8px 16px}.popup .panel>header>h1{position:static;text-align:center;margin:0;width:100%!important;line-height:32pt;font-size:16pt;font-weight:700}.popup footer{width:100%;padding:0}.popup footer>.button{display:block!important;-webkit-box-flex:1!important;-webkit-flex:1!important;flex:1!important;height:100%;line-height:30pt;max-width:320px!important;font-weight:700;border-top:solid 1px #b5b5b5;color:#2d2d2d}.popup footer>.button+.button{border-left:solid 1px #b5b5b5}.list li>.deletion-indicator{display:inline-flex;display:-webkit-inline-flex;display:-webkit-box;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;color:#fff;border:1px solid #ff3b30;background-color:#ff3b30;border-radius:50%;width:20px;height:20px;float:left;margin-right:6px;-webkit-transition:all .25s ease-out;transition:all .25s ease-out;margin-left:-40px;cursor:pointer;position:relative;z-index:100}.list li>.deletion-indicator::before{display:block;content:'—';font-size:12pt;position:absolute;min-width:20px;text-align:center;width:10px;height:10px;margin-top:-1px}.list li>.move-down,.list li>.move-up{width:21px;height:21px;display:inline-block;position:relative;float:right;margin-top:-20px;-webkit-transition:all .25s ease-out;transition:all .25s ease-out;-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0)}.list li>.move-down::before,.list li>.move-up::before{display:block;content:'';width:21px;height:21px;position:absolute;background-image:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22367px%22%20height%3D%22367px%22%20viewBox%3D%220%200%20367%20367%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22Sortable%22%20transform%3D%22translate%2813.000000,%2013.000000%29%22%20stroke%3D%22%23007aff%22%20stroke-width%3D%2225%22%3E%3Ccircle%20id%3D%22Oval-1%22%20cx%3D%22170.5%22%20cy%3D%22170.5%22%20r%3D%22170.5%22%3E%3C/circle%3E%3Cpath%20d%3D%22M55.3736267,209.778395%20L172.745285,100.706186%20L286.306656,209.611568%22%20id%3D%22Path-2%22%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-size:100% 100%}.list li>.move-down{margin-right:10px;-webkit-transform:translate3d(120px,0,0) rotate(180deg);transform:translate3d(120px,0,0) rotate(180deg)}.list li>.button.delete{float:right;background-color:red;color:#fff;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:80px;position:absolute;right:0;top:0;bottom:0;display:flex;display:-webkit-box;display:-webkit-flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-transition:all .25s ease-out;transition:all .25s ease-out;-webkit-transform:translate3d(80px,0,0);transform:translate3d(80px,0,0);cursor:pointer;font-family:HelveticaNeue-Light;font-weight:200}.list li:first-of-type>.move-up,.list li:last-of-type>.move-down{opacity:.35}.list.deletable>li,.list.editable>li{-webkit-transition:all .25s ease-out;transition:all .25s ease-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.list.deletable>li.selected,.list.editable>li.selected{margin-right:80px;background-color:#fff}.list.deletable>li.selected h3,.list.deletable>li.selected h4,.list.deletable>li.selected p,.list.editable>li.selected h3,.list.editable>li.selected h4,.list.editable>li.selected p{position:relative;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:all .25s ease-out;transition:all .25s ease-out}.list.deletable>li.selected>.button.delete,.list.editable>li.selected>.button.delete{-webkit-transform:translate3d(80px,0,0);transform:translate3d(80px,0,0)}.list.deletable>li.selected>.deletion-indicator,.list.editable>li.selected>.deletion-indicator{-webkit-transform:rotate(90deg)}.list.showIndicators .deletion-indicator{margin-left:0}.list.showIndicators .move-up{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.list.showIndicators .move-down{-webkit-transform:translate3d(0,0,0) rotate(180deg);transform:translate3d(0,0,0) rotate(180deg)}.list.showIndicators>li[data-goto]{padding-left:40px}.list.showIndicators>li[data-goto] .deletion-indicator{left:10px}.list.showIndicators>li>h3{width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list>li[data-goto]>.deletion-indicator{position:absolute;left:-40px;margin-left:0}.list>li[data-goto]>.deletion-indicator+div+aside{margin:-20px;position:relative;right:15px}html[dir=rtl] .list>li>.deletion-indicator{float:right;margin-right:auto;margin-left:-20px;right:-40px}html[dir=rtl] .list>li>.move-up{float:left!important;-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}html[dir=rtl] .list>li>.move-down{float:left!important;-webkit-transform:translate3d(-140px,0,0) rotate(180deg);transform:translate3d(-140px,0,0) rotate(180deg)}html[dir=rtl] .list>li>.button.delete{-webkit-transform:translate3d(-80px,0,0);transform:translate3d(-80px,0,0);left:0;right:auto}html[dir=rtl].deletable.showIndicators>li,html[dir=rtl].editable.showIndicators>li{margin-right:0}html[dir=rtl] .list.deletable>li.selected,html[dir=rtl] .list.editable>li.selected{margin-right:0!important}html[dir=rtl] .list.deletable>li.selected>.button.delete,html[dir=rtl] .list.editable>li.selected>.button.delete{-webkit-transform:translate3d(0,0,0)!important;transform:translate3d(0,0,0)!important}html[dir=rtl] .list.deletable>li>.button.delete,html[dir=rtl] .list.editable>li>.button.delete{-webkit-transform:translate3d(-80px,0,0)!important;transform:translate3d(-80px,0,0)!important}html[dir=rtl] .list.deletable.showIndicators>li.selected,html[dir=rtl] .list.editable.showIndicators>li.selected,html[dir=rtl] .list.showIndicators>li.selected{margin-right:0}html[dir=rtl] .list.deletable.showIndicators>li.selected>.button.delete,html[dir=rtl] .list.editable.showIndicators>li.selected>.button.delete,html[dir=rtl] .list.showIndicators>li.selected>.button.delete{-webkit-transform:translate3d(0,0,0)!important;transform:translate3d(0,0,0)!important}html[dir=rtl] .list.deletable.showIndicators>li.selected>.move-up,html[dir=rtl] .list.editable.showIndicators>li.selected>.move-up,html[dir=rtl] .list.showIndicators>li.selected>.move-up{-webkit-transform:translate3d(90px,0,0);transform:translate3d(90px,0,0)}html[dir=rtl] .list.deletable.showIndicators>li.selected>.move-down,html[dir=rtl] .list.editable.showIndicators>li.selected>.move-down,html[dir=rtl] .list.showIndicators>li.selected>.move-down{-webkit-transform:translate3d(100px,0,0) rotate(180deg);transform:translate3d(100px,0,0) rotate(180deg)}html[dir=rtl] .list.deletable.showIndicators>li>.deletion-indicator,html[dir=rtl] .list.editable.showIndicators>li>.deletion-indicator,html[dir=rtl] .list.showIndicators>li>.deletion-indicator{right:0!important;margin-left:10px}html[dir=rtl] .list.deletable.showIndicators>li>.move-up,html[dir=rtl] .list.editable.showIndicators>li>.move-up,html[dir=rtl] .list.showIndicators>li>.move-up{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}html[dir=rtl] .list.deletable.showIndicators>li>.move-down,html[dir=rtl] .list.editable.showIndicators>li>.move-down,html[dir=rtl] .list.showIndicators>li>.move-down{-webkit-transform:translate3d(20px,0,0) rotate(180deg);transform:translate3d(20px,0,0) rotate(180deg)}html[dir=rtl] .list.deletable.showIndicators>li>.button.delete,html[dir=rtl] .list.editable.showIndicators>li>.button.delete,html[dir=rtl] .list.showIndicators>li>.button.delete{right:auto;left:0!important}input[type=email],input[type=number],input[type=password],input[type=text],input[type=url],textarea{-webkit-appearance:none;box-shadow:none;border:none}.isiOS:not(.isDesktop) .select-box>select{opacity:.01;height:1px;width:1px;-wekbit-appearance:none;position:absolute}.isDesktop .select-box>select{max-width:120px}.isDesktop .select-box-label{display:none!important}.select-box-label{border:1px solid #007aff;border-radius:3px;padding:2px 30px 2px 10px;font-size:11px;background-image:-webkit-linear-gradient(top,#007aff,#007aff);background-position:top right;background-size:20px 100%;background-repeat:no-repeat;height:20px;box-sizing:border-box;min-width:100px;max-width:160px;width:auto;cursor:pointer;display:inline-block;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.select-box-label::after{content:'';display:block;height:10px;width:1px;border-top:solid 7px #fff;border-left:solid 5px transparent;border-right:solid 5px transparent;position:absolute;top:6px;right:4px}.searchBar{width:100%;-webkit-box-sizing:border-box;height:45px;background-color:#c9c9ce;padding:5px 10px}input[type=search]{display:block;background-color:#fff;padding:7px 0 7px 20px;border-radius:5px;border-color:transparent;width:100%;-webkit-appearance:none;-webkit-transtion:all .5s ease-out;background-image:url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='48px' height='48px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><path d='M42.71,38.482L32.478,28.208c1.598-2.385,2.532-5.249,2.532-8.329c0-8.273-6.73-15.004-15.004-15.004 S5.001,11.606,5.001,19.879c0,8.274,6.731,15.004,15.004,15.004c3.055,0,5.896-0.923,8.27-2.497l10.236,10.279 c0.858,0.861,2.19,0.927,2.977,0.143l1.354-1.349C43.629,40.678,43.569,39.345,42.71,38.482z M10.001,19.879 c0-5.517,4.488-10.004,10.004-10.004S30.01,14.363,30.01,19.879c0,5.516-4.487,10.004-10.004,10.004S10.001,25.396,10.001,19.879z' fill='#bbb' /></svg>");background-position:5px center;text-align:left;background-size:14px 14px;background-repeat:no-repeat;-webkit-user-select:ignore;-webkit-tap-highlight-color:transparent}input[type=search]:focus{outline:0}.icon{width:40px;height:40px;background-repeat:no-repeat;background-position:center center;background-size:auto 70%;border-radius:10px}input[type=range]{-webkit-appearance:none!important;outline:0;display:block;width:auto;height:4px;margin-top:20px;margin-bottom:20px;border-radius:4px;background-color:#b3b3b4;background-image:-webkit-linear-gradient(top,#007aff,#007aff);background-size:0 4px;background-position:left center;background-repeat:no-repeat}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;display:block;width:27px;height:27px;box-shadow:0 0 2px rgba(0,0,0,.5),0 5px 6px rgba(0,0,0,.25);background-color:#fff;border-radius:50%;-webkit-transition:-webkit-transform .1s ease-in-out;transition:-webkit-transform .1s ease-in-out}.isDesktop input[type=range]::-webkit-slider-thumb:hover{background-color:#f9f9f9}html[dir=rtl] input[type=range]{background-position:right center}.list.select li>input{display:none}.list.select li.selected::after{display:block;content:'';width:20px;height:20px;-webkit-mask-position:50% 50%;-webkit-mask-size:90% 90%;-webkit-mask-repeat:no-repeat;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20version%3D'1.1'%20width%3D'32'%20height%3D'26'%20viewBox%3D'0%200%2032%2026'%20id%3D'svg2'%3E%3Cdefs%20id%3D'defs8'%20/%3E%3Cg%20transform%3D'translate%280.13135593,-0.34322034%29'%20id%3D'Page-1'%20style%3D'fill%3Anone%3Bstroke%3Anone'%3E%3Cg%20id%3D'Artboard-1'%20style%3D'stroke%3A%23000000%3Bstroke-width%3A5'%3E%3Cpath%20d%3D'm%2010.500868,22.761362%2011.023688,0%200,-27.9582975'%20transform%3D'matrix%280.70710678,0.70710678,-0.70710678,0.70710678,10.899977,-8.7504466%29'%20id%3D'Rectangle-1'%20/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");float:right;margin-top:-20px;background-color:#007aff}.isDesktop .list.select li.selected:hover{background-color:#d9d9d9}html[dir=rtl] .list.select li.selected::after{float:left}.sheet{position:absolute;top:45px;left:0;bottom:0;right:0;background-color:rgba(156,159,164,.5);-webkit-transition:all .25s ease-in;transition:all .25s ease-in;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}.sheet div.handle{display:block;text-align:center;color:#fff;cursor:pointer;height:20pt;background-color:#fff;-webkit-mask-position:50% 50%;-webkit-mask-size:90% 90%;-webkit-mask-repeat:no-repeat;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20version%3D'1.1'%20width%3D'76'%20height%3D'27'%20viewBox%3D'0%200%2076%2027'%20id%3D'svg2'%3E%3Cdefs%20id%3D'defs8'%20/%3E%3Cg%20transform%3D'translate%28-283.79661,-123.77966%29'%20id%3D'Page-1'%20style%3D'fill%3Anone%3Bstroke%3Anone'%3E%3Cg%20transform%3D'translate%28254,108%29'%20id%3D'Artboard-1'%20style%3D'stroke%3A%23000%3Bstroke-width%3A12%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around'%3E%3Cpath%20d%3D'm%2036.25,26.242187%2031.394531,0%2030.53125,0'%20id%3D'Path-1'%20/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");margin:10px auto 0}.sheet.opened{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.sheet.opened div.handle{background-color:#fff;-webkit-mask-position:50% 50%;-webkit-mask-size:90% 90%;-webkit-mask-repeat:no-repeat;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3Asvg%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20version%3D'1.1'%20width%3D'76'%20height%3D'27'%20viewBox%3D'0%200%2076%2027'%20id%3D'svg2'%3E%3Cdefs%20id%3D'defs8'%20/%3E%3Cg%20transform%3D'translate%28-283.79661,-123.77966%29'%20id%3D'Page-1'%20style%3D'fill%3Anone%3Bstroke%3Anone'%3E%3Cg%20transform%3D'translate%28254,108%29'%20id%3D'Artboard-1'%20style%3D'stroke%3A%23000%3Bstroke-width%3A12%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around'%3E%3Cpath%20d%3D'm%2036.25,26.242187%2031.394531,7.972657%2030.53125,-8.425782'%20id%3D'Path-1'%20/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.sheet .button{color:#585d63;border:1px solid #585d63;border-radius:20px;width:auto;height:auto;margin:0 auto;padding:10px 20px}.isDesktop .sheet .button:hover,.sheet .button.selected{color:#fff;border-color:#fff;opacity:1!important;-webkit-transition:none;transition:none}.sheet>section{position:absolute;top:36px;left:0;bottom:0;height:auto;right:0}.sheet>section>h2{text-align:center}.sheet>section>.list{border:none;background-color:transparent!important}.sheet>section>.list>li{border-bottom:solid 1px #585d63;background-color:transparent!important}.sheet>section>.list>li::before{content:none}article.current.blurred{-webkit-filter:blur(20px);-webkit-transition-duration:.15s;filter:blur(20px);transition-duration:.15s}article.current.blurred.removeBlurSlow{-webkit-filter:blur(0px);-webkit-transition-duration:.35s;filter:blur(0px);transition-duration:.35s}.slide-out{position:absolute;top:45px;left:0;bottom:0;background-color:#fff;z-index:111111111;width:100%;visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-transition:all .25s ease-out;transition:all .25s ease-out;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.slide-out.open{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slide-out>section{-webkit-box-flex:1;-webkit-flex:1;flex:1;padding-bottom:100px;overflow-x:hidden;overflow-y:auto}.button.slide-out-button{position:absolute;z-index:1111111;top:5px;left:15px;width:35px;height:35px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}.button.slide-out-button::before{display:block;content:'';width:35px;height:35px;background-color:#000;-webkit-mask-position:50% 50%;-webkit-mask-size:90% 90%;-webkit-mask-repeat:no-repeat;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2281px%22%20height%3D%2260px%22%20viewBox%3D%220%200%2081%2060%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22slideout%22%20fill%3D%22%23000000%22%3E%3Crect%20id%3D%22Rectangle%22%20x%3D%228%22%20y%3D%220%22%20width%3D%2264.167%22%20height%3D%227.666%22%3E%3C/rect%3E%3Crect%20id%3D%22Rectangle%22%20x%3D%228%22%20y%3D%2226%22%20width%3D%2264.167%22%20height%3D%227.667%22%3E%3C/rect%3E%3Crect%20id%3D%22Rectangle%22%20x%3D%228%22%20y%3D%2252%22%20width%3D%2264.167%22%20height%3D%227.666%22%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}body.slide-out-app>article{display:none!important}body.slide-out-app>article.show{display:block!important}body.slide-out-app>nav:not(:first-of-type){display:none!important}body.slide-out-app>nav:not(:first-of-type).show{display:block!important;z-index:10000}html[dir=rtl] .button.slide-out-button{right:15px;left:auto}html[dir=rtl] .slide-out{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}html[dir=rtl] .slide-out.open{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.stepper{display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-webkit-justify-content:center;justify-content:center;-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start;padding:1px}.stepper>input{margin:0;display:none}.stepper>label{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #007aff;width:40px;height:30px;font:700 16px/30px Helvetica;text-align:center;background-color:#fff}.stepper>.button{display:inline-box;background-color:rgba(255,255,255,.35);width:33px;height:30px;border:1px solid #007aff;border-radius:4px;text-align:center;font-weight:700;font-size:20pt;line-height:16pt;cursor:pointer!important;overflow:hidden;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:#2d2d2d}.stepper>.button:first-of-type{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.stepper>.button:last-of-type{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}html[dir=rtl] .stepper>.button:first-of-type{border-radius:0 4px 4px 0;border-right:solid 1px #007aff;border-left:none}html[dir=rtl] .stepper>.button:last-of-type{border-radius:4px 0 0 4px;border-left:solid 1px #007aff;border-right:none}.list>li.switched{-webkit-box-direction:reverse;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-flex-direction:row-reverse;flex-direction:row-reverse}.list>li.switched h3{width:auto;font-size:15px;line-height:26px;color:#007aff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list>li.switched>h4{width:48%;text-align:right;margin-right:10px;font-size:19px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%;color:#000!important}.switch{display:inline-block;width:54px;height:32px;-webkit-box-sizing:border-box;box-sizing:border-box;border:2px solid #e6e6e6;border-radius:20px;position:relative;box-shadow:inset 0 0 0 15px #fff;cursor:pointer;-webkit-animation-duration:.65s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-fill-mode:forwards;-webkit-animation-name:switchAnimationOff;animation-duration:.65s;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:switchAnimationOff}.switch>em{display:block;width:27px;height:27px;box-shadow:0 0 2px rgba(0,0,0,.5),0 5px 6px rgba(0,0,0,.25);background-color:#fff;border-radius:50%;-webkit-transition:-webkit-transform .1s ease-in-out;-webkit-animation-duration:.45s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-fill-mode:forwards;-webkit-animation-name:switchThumbAnimationOff;transition:-webkit-transform .1s ease-in-out;animation-duration:.45s;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:switchThumbAnimationOff;pointer-events:none}.switch>input{display:none}.switch.on{border-color:#6ee102;box-shadow:inset 0 0 0 15px #6ee102;-webkit-animation-name:none;animation-name:none}.switch.on>em{-webkit-transform:translate3d(23px,0,0);-webkit-transition-duration:.2s;-webkit-animation-duration:.45s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-fill-mode:forwards;-webkit-animation-name:switchThumbAnimation;transform:translate3d(23px,0,0);transition-duration:.2s;animation-duration:.45s;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:switchThumbAnimation}@-webkit-keyframes switchAnimationOff{0%{box-shadow:inset 0 0 0 15px #e6e6e6}49.999%{box-shadow:inset 0 0 0 0 #e6e6e6}50%{box-shadow:inset 0 0 0 0 #fff}100%{box-shadow:inset 0 0 0 15px #fff}}@-webkit-keyframes switchThumbAnimation{0%{width:27px}1%{width:40px}100%,50%{width:27px}}@-webkit-keyframes switchThumbAnimationOff{0%{width:27px}5%{width:45px}100%,50%{width:27px}}@keyframes switchAnimationOff{0%{box-shadow:inset 0 0 0 15px #e6e6e6}49.999%{box-shadow:inset 0 0 0 0 #e6e6e6}50%{box-shadow:inset 0 0 0 0 #fff}100%{box-shadow:inset 0 0 0 15px #fff}}@keyframes switchThumbAnimation{0%{width:27px}1%{width:40px}100%,50%{width:27px}}@keyframes switchThumbAnimationOff{0%{width:27px}5%{width:45px}100%,50%{width:27px}}html[dir=rtl] .switch>em{-webkit-transform:translate3d(-23px,0,0);transform:translate3d(-23px,0,0)}html[dir=rtl] .switch.on>em{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}body.hasTabBar article{bottom:50px}body.hasTabBar .next:not(.navigable),body.hasTabBar .previous:not(.navigable){display:none;-webkiit-transform:none}.tabbar{display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-webkit-justify-content:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;align-items:center;height:50px;position:absolute;left:0;bottom:0;right:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:solid 1px #929292;background-color:#f7f7f7}.tabbar>.button{height:100%;position:relative;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-flex:1!important;-webkit-flex:1!important;flex:1!important;color:#929292;font-size:9pt;padding:1px}.isDesktop .tabbar>.button:hover,.tabbar>.button.selected{color:#007aff!important;opacity:1!important}.isDesktop .tabbar>.button:hover>.icon,.tabbar>.button.selected>.icon{background-color:#007aff!important}.tabbar>.button>.icon{margin:0 auto;background-color:#929292;content:'';display:block;height:30px;width:30px}.tabbar>.button.more>.icon{background-color:#929292;-webkit-mask-position:50% 50%;-webkit-mask-size:90% 90%;-webkit-mask-repeat:no-repeat;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20version%3D'1.1'%20id%3D'Layer_2'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20x%3D'0px'%20y%3D'0px'%20width%3D'48px'%20height%3D'48px'%20viewBox%3D'0%200%2048%2048'%20enable-background%3D'new%200%200%2048%2048'%20xml%3Aspace%3D'preserve'%3E%3Ccircle%20cx%3D'10'%20cy%3D'23'%20r%3D'5.172'/%3E%3Ccircle%20cx%3D'24'%20cy%3D'23'%20r%3D'5.172'/%3E%3Ccircle%20cx%3D'38'%20cy%3D'23'%20r%3D'5.172'/%3E%3C/svg%3E")}#carousel{width:100%;height:100%;margin:10px auto;box-sizing:border-box;background-color:#ccc}.carousel-track{margin:0;padding:0}.carousel-track>li{box-sizing:border-box;list-style:none;margin:0;padding:0 0 10px;position:relative;display:flex;display:-webkit-flex;display:-webkit-box;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;border-left:solid 1px #999;-webkit-user-select:none}.carousel-track>li.carousel-panel-active{border:none}.pagination{list-style:none;padding:0;margin:0 auto;-webkit-box-orient:horizontal;-webkit-box-pack:justify;-webkit-flex-direction:row;-webkit-justify-content:space-around;display:flex;flex-direction:row;justify-content:space-around}.pagination::after{content:'';display:block;clear:both}.pagination>li{list-style:none;padding:0;margin:0 5px 0 0;height:10px;width:10px;background-color:#666;border-radius:5px}.isDesktop .pagination>li:hover,.pagination>li.selected{background-color:#007aff;cursor:pointer}.pagination>li:last-of-type{margin-right:0}html[dir=rtl] .pagination>li{margin-right:0;margin-left:5px;padding:0}html[dir=rtl] .pagination>li:last-of-type{margin-left:0}.horizontal-scroll-panel{width:100%;height:200px;background-color:#ccc;padding:20px;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;overflow-y:hidden!important;overflow-x:auto}.horizontal-scroll-panel>ul{list-style:none;margin:0;padding:0;-webkit-padding-start:0;font-size:0}.horizontal-scroll-panel>ul li{display:inline-block;border:1px solid #666;box-shadow:0 0 4px #666;width:200px;height:200px;overflow:hidden;margin-right:20px;font-size:0}.horizontal-scroll-panel>ul:first-of-type{margin-left:0!important}.horizontal-scroll-panel>ul:last-of-type{margin-right:0!important}body.isWindows .horizontal-scroll-panel{background-color:#333}[dir=rtl] .horizontal-scroll-panel li{margin-right:0!important;margin-left:20px!important}[dir=rtl] .horizontal-scroll-panel li:first-of-type{margin-right:0!important}[dir=rtl] .horizontal-scroll-panel li:last-of-type{margin-left:0!important}@media only screen and (max-device-width:320px){.horizontal-scroll-panel{height:125px;padding:10px}.horizontal-scroll-panel li{height:125px;width:125px}}
@@ -0,0 +1,2375 @@
1
+ /*
2
+ pO\
3
+ 6 /\
4
+ /OO\
5
+ /OOOO\
6
+ /OOOOOO\
7
+ (OOOOOOOO)
8
+ \:~==~:/
9
+
10
+ ChocolateChip-UI
11
+ ChUI-Win.css
12
+ Copyright 2014 Sourcebits www.sourcebits.com
13
+ License: MIT
14
+ Version: 3.7.0
15
+ */
16
+ /*
17
+ To create a custom theme, adjust the color for @primaryColor. If you want a secondary color, say on the background of your lists, adjust the color of @listBkColor to the color you want.
18
+ */
19
+ .attentionGrapper {
20
+ color: #007aff !important;
21
+ }
22
+ /*
23
+ Flex parameters:
24
+ #flex > .display(<flex> | <inline-flex>);
25
+ #flex > .flex-direction(row | row-reverse | column | column-reverse);
26
+ #flex > .justify-content(flex-start | flex-end | center | space-between | space-around);
27
+ #flex > .align-content(flex-start | flex-end | center | space-between | space-around | stretch);
28
+ #fkex > .flex(none | [ <flex-grow> <flex-shrink> | <flex-basis> ]);
29
+ */
30
+ /* ==============================
31
+ Body
32
+ =========================== */
33
+ html,
34
+ body {
35
+ padding: 0;
36
+ margin: 0;
37
+ position: absolute;
38
+ top: 0;
39
+ right: 0;
40
+ bottom: 0;
41
+ left: 0;
42
+ overflow: hidden;
43
+ font: normal 14px/18px SegoeWP, SegoeUI, HelveticaNeue, Sans-serif;
44
+ -ms-touch-action: none;
45
+ }
46
+ body {
47
+ /* Change background color for your app: */
48
+ background-color: #000000;
49
+ font: normal 10pt/13pt SegoeWP, SegoeUI, HelveticaNeue, Sans-serif;
50
+ -ms-user-select: none;
51
+ }
52
+ body * {
53
+ -ms-user-select: none;
54
+ }
55
+ /* ==============================
56
+ Article (view) styles
57
+ =========================== */
58
+ article {
59
+ position: absolute;
60
+ top: 45pt;
61
+ right: 0;
62
+ bottom: 0;
63
+ left: 0;
64
+ transition: opacity 0.5s ease-out, transform 0.35s ease-out;
65
+ overflow-x: hidden;
66
+ overflow-y: auto;
67
+ -ms-overflow-style: -ms-autohiding-scrollbar;
68
+ -ms-scroll-chaining: none;
69
+ display: -ms-flexbox;
70
+ display: flex;
71
+ -ms-flex-direction: column;
72
+ flex-direction: column;
73
+ -ms-flex-pack: flex-start;
74
+ justify-content: flex-start;
75
+ -ms-flex-align: stretch;
76
+ align-items: stretch;
77
+ }
78
+ .hide-navbars article {
79
+ top: 0;
80
+ }
81
+ /* ==============================
82
+ Article navigation states
83
+ ============================== */
84
+ .current {
85
+ transform: translate3d(0, 0, 0);
86
+ opacity: 1;
87
+ }
88
+ .next {
89
+ transform: translate3d(105%, 0, 0);
90
+ opacity: 0;
91
+ }
92
+ .previous {
93
+ transform: translate3d(-100%, 0, 0);
94
+ opacity: 0;
95
+ }
96
+ html[dir=rtl] .current {
97
+ transform: translate3d(0, 0, 0);
98
+ }
99
+ html[dir=rtl] .next {
100
+ transform: translate3d(-100%, 0, 0);
101
+ }
102
+ html[dir=rtl] .previous {
103
+ transform: translate3d(105%, 0, 0);
104
+ }
105
+ /* ==============================
106
+ Scrollers
107
+ =========================== */
108
+ article > section,
109
+ .scroller-vertical,
110
+ .scroller-horizontal {
111
+ height: 100%;
112
+ padding-bottom: 10px;
113
+ overflow-x: hidden;
114
+ overflow-y: auto;
115
+ -ms-overflow-style: -ms-autohiding-scrollbar;
116
+ box-sizing: border-box;
117
+ -ms-flex: 1;
118
+ flex: 1;
119
+ }
120
+ .scroller-horizontal {
121
+ overflow-y: hidden;
122
+ overflow-x: auto;
123
+ }
124
+ .scroller-vertical {
125
+ padding-top: 0;
126
+ }
127
+ article > section {
128
+ padding-top: 10px;
129
+ }
130
+ article > section > :last-child:not(a)::after {
131
+ content: '';
132
+ display: block;
133
+ margin-bottom: 100px;
134
+ }
135
+ /* ==============================
136
+ Horizontal Panels
137
+ ============================== */
138
+ .horizontal {
139
+ display: -ms-flexbox;
140
+ display: flex;
141
+ -ms-flex-direction: row;
142
+ flex-direction: row;
143
+ -ms-flex-pack: flex-start;
144
+ justify-content: flex-start;
145
+ -ms-flex-align: stretch;
146
+ align-items: stretch;
147
+ }
148
+ .horizontal.centered {
149
+ display: -ms-flexbox;
150
+ display: flex;
151
+ -ms-flex-direction: row;
152
+ flex-direction: row;
153
+ -ms-flex-pack: center;
154
+ justify-content: center;
155
+ -ms-flex-align: center;
156
+ align-items: center;
157
+ }
158
+ /* ==============================
159
+ Buttons
160
+ =========================== */
161
+ a.button {
162
+ cursor: pointer;
163
+ text-decoration: none;
164
+ font-size: 13pt;
165
+ transition: all 0.35s ease-out;
166
+ display: block;
167
+ width: auto;
168
+ box-sizing: border-box;
169
+ height: 30px;
170
+ height: auto;
171
+ position: relative;
172
+ white-space: nowrap;
173
+ overflow-x: hidden;
174
+ text-overflow: ellipsis;
175
+ vertical-align: middle;
176
+ border: solid 2px #ffffff;
177
+ color: #ffffff;
178
+ padding: 5px 10px;
179
+ overflow: hidden;
180
+ text-align: center;
181
+ }
182
+ a.button.align-flush {
183
+ position: absolute;
184
+ right: 16px;
185
+ top: 16px !important;
186
+ }
187
+ a.button:hover,
188
+ a.button.selected {
189
+ color: #ffffff;
190
+ background-color: #007aff;
191
+ border-color: #ffffff !important;
192
+ }
193
+ a.button.back,
194
+ a.button.backTo {
195
+ display: inline-block;
196
+ min-width: 0;
197
+ min-height: 0;
198
+ background-clip: border-box;
199
+ box-sizing: border-box;
200
+ border-radius: 50%;
201
+ border-width: 2px;
202
+ border-style: solid;
203
+ border-color: #ffffff !important;
204
+ padding: 0;
205
+ text-align: center;
206
+ width: 41px;
207
+ height: 41px;
208
+ font-size: 0;
209
+ line-height: 30px !important;
210
+ /* line-height must match the content box height. */
211
+ vertical-align: baseline;
212
+ overflow: hidden;
213
+ }
214
+ a.button.back::before,
215
+ a.button.backTo::before {
216
+ font-family: "Segoe UI Symbol";
217
+ font-weight: normal;
218
+ content: "\E0D5";
219
+ vertical-align: 50%;
220
+ font-size: 14pt;
221
+ display: block;
222
+ margin-left: -3px;
223
+ }
224
+ a.button.back:hover,
225
+ a.button.backTo:hover {
226
+ background-color: #ffffff;
227
+ }
228
+ a.button.back:hover::before,
229
+ a.button.backTo:hover::before {
230
+ color: #007aff;
231
+ }
232
+ a.button.action {
233
+ width: auto;
234
+ display: block;
235
+ margin: 0 auto;
236
+ padding: 10px 20px;
237
+ box-sizing: border-box;
238
+ height: auto;
239
+ min-width: 200px;
240
+ max-width: 300px;
241
+ }
242
+ @media only screen and (device-width: 480px) and (orientation: portrait) {
243
+ .back::before,
244
+ .backTo::before {
245
+ width: 41px;
246
+ height: 41px;
247
+ }
248
+ }
249
+ html[dir=rtl] .button.back::before,
250
+ html[dir=rtl] .button.backTo::before {
251
+ transform: rotate(180deg);
252
+ }
253
+ html[dir=rtl] .button.align-flush {
254
+ left: 16px;
255
+ right: auto;
256
+ }
257
+ /* ==============================
258
+ Nav bars
259
+ =========================== */
260
+ #global-nav {
261
+ background-color: #000000;
262
+ overflow: hidden;
263
+ }
264
+ nav {
265
+ height: 45pt;
266
+ line-height: 40pt;
267
+ box-sizing: border-box;
268
+ display: -ms-flexbox;
269
+ display: flex;
270
+ -ms-flex-direction: row;
271
+ flex-direction: row;
272
+ -ms-flex-pack: flex-start;
273
+ justify-content: flex-start;
274
+ -ms-flex-align: center;
275
+ align-items: center;
276
+ position: absolute;
277
+ top: 0;
278
+ left: 0;
279
+ right: 0;
280
+ transition: opacity 0.5s ease-in, transform 0.35s ease-out;
281
+ padding: 5px 15px;
282
+ vertical-align: middle;
283
+ }
284
+ nav > h1 {
285
+ text-align: left;
286
+ display: inline-block;
287
+ margin: 0 0 0 10px;
288
+ font-size: x-large;
289
+ font-family: SegoeWP, SegoeUI, HelveticaNeue, Sans-serif;
290
+ font-weight: normal;
291
+ padding: 2px 10px 0px 0px;
292
+ -ms-touch-action: none;
293
+ position: relative;
294
+ z-index: -1;
295
+ white-space: nowrap;
296
+ overflow: hidden;
297
+ text-overflow: ellipsis;
298
+ color: #ffffff;
299
+ }
300
+ nav a.button {
301
+ position: relative;
302
+ line-height: 20pt;
303
+ padding: 0 10px;
304
+ }
305
+ nav a.button:first-of-type {
306
+ line-height: 14pt;
307
+ padding: 4px 10px;
308
+ position: relative;
309
+ top: 0;
310
+ margin-left: 10px;
311
+ }
312
+ nav a.button:hover {
313
+ border-color: #ffffff !important;
314
+ background-color: #ffffff;
315
+ color: #000000;
316
+ }
317
+ nav a.button.align-flush {
318
+ position: absolute;
319
+ right: 10px;
320
+ top: 0;
321
+ }
322
+ nav > h1 + a.button {
323
+ margin-top: -4px;
324
+ float: right;
325
+ }
326
+ nav > h1 + a.button:first-of-type {
327
+ margin-top: -4px;
328
+ float: right;
329
+ }
330
+ .slide-out-app > nav > h1 {
331
+ margin-left: 80px !important;
332
+ }
333
+ .slide-out-app > nav#global-nav > a.button:first-of-type {
334
+ top: 8px;
335
+ }
336
+ html[dir=rtl] .slide-out-app > nav > h1 {
337
+ margin-right: 80px !important;
338
+ margin-left: auto;
339
+ }
340
+ /* ==============================
341
+ Lists
342
+ =========================== */
343
+ nav > h1,
344
+ h2,
345
+ h3,
346
+ h4,
347
+ h5,
348
+ section h2,
349
+ p,
350
+ li,
351
+ .list > li > p {
352
+ color: #ffffff;
353
+ }
354
+ .list {
355
+ list-style: none;
356
+ margin: 10px 20px 0;
357
+ padding: 0;
358
+ }
359
+ .list:first-child {
360
+ margin-top: 0;
361
+ }
362
+ .list > li {
363
+ padding: 5px;
364
+ transition: all 0.3s ease-out;
365
+ position: relative;
366
+ background-color: #000000;
367
+ font-size: initial;
368
+ border: solid 1px transparent;
369
+ -ms-user-select: none;
370
+ }
371
+ .list > li.show-detail::after {
372
+ content: 'i';
373
+ display: block;
374
+ height: 20px;
375
+ width: 22px;
376
+ border-radius: 20px;
377
+ border: solid 1px #ffffff;
378
+ color: #ffffff;
379
+ font: bold 14px/0 SegoeWP, SegoeUI, serif;
380
+ box-sizing: border-box;
381
+ padding: 10px 8px;
382
+ position: absolute;
383
+ top: 10px;
384
+ right: 16px;
385
+ }
386
+ .list > li + .button.action {
387
+ margin-top: 40px;
388
+ }
389
+ .list > li[data-goto]:hover,
390
+ .list > li[data-show-article]:hover {
391
+ cursor: pointer;
392
+ border: solid 1px #ffffff;
393
+ background-color: #007aff;
394
+ color: #ffffff !important;
395
+ }
396
+ .list > li[data-goto]:hover *,
397
+ .list > li[data-show-article]:hover * {
398
+ color: #ffffff;
399
+ }
400
+ /* ==============================
401
+ List footer
402
+ =========================== */
403
+ .list ~ p {
404
+ margin: 10px 25px 0;
405
+ }
406
+ .list ~ p + p {
407
+ margin-top: 5pt;
408
+ }
409
+ /* ==============================
410
+ List title & subtitle
411
+ =========================== */
412
+ .list > li > h3,
413
+ .list > li > h4 {
414
+ width: 80%;
415
+ font-weight: 200;
416
+ margin: 0;
417
+ }
418
+ .list > li h3 {
419
+ font-size: 16pt;
420
+ line-height: 18pt;
421
+ margin-bottom: 4px;
422
+ margin-top: 0 !important;
423
+ }
424
+ .list > li h4 {
425
+ line-height: 14pt;
426
+ color: #9e9e9e;
427
+ }
428
+ .list > li > h4,
429
+ .list > li > div > h4 {
430
+ font-size: 12pt;
431
+ line-height: 15pt;
432
+ margin: 0;
433
+ }
434
+ .list + h2 {
435
+ margin-top: 10px;
436
+ }
437
+ h2 + .list {
438
+ margin-top: 0;
439
+ border-top: solid 2px rgba(255, 255, 255, 0.25);
440
+ padding-top: 5px;
441
+ }
442
+ section h2 {
443
+ font: normal 11pt/12pt SegoeWP, SegoeUI, HelveticaNeue, Sans-serif;
444
+ margin: 10px 20px 0px 20px;
445
+ padding-left: 5px;
446
+ white-space: nowrap;
447
+ overflow: hidden;
448
+ text-overflow: ellipsis;
449
+ padding-bottom: 5px;
450
+ }
451
+ section h2.normal-case {
452
+ text-transform: none;
453
+ }
454
+ section h2.wrap {
455
+ white-space: normal;
456
+ }
457
+ /* ==============================
458
+ List detail
459
+ =========================== */
460
+ section > p,
461
+ .list > li > p,
462
+ .list > li > div > p {
463
+ font-size: 13pt;
464
+ line-height: 16pt;
465
+ margin: 0;
466
+ }
467
+ .list > li p + p {
468
+ margin-top: 5px;
469
+ }
470
+ .list > li > p {
471
+ margin: 5px 0px;
472
+ font-size: 13pt;
473
+ line-height: 16pt;
474
+ color: #ffffff;
475
+ }
476
+ html[dir=rtl] .list > li.show-detail::after {
477
+ left: 16px;
478
+ right: auto;
479
+ }
480
+ /* ==============================
481
+ Comp List Items
482
+ =========================== */
483
+ li.comp {
484
+ display: -ms-flexbox;
485
+ display: flex;
486
+ -ms-flex-direction: row;
487
+ flex-direction: row;
488
+ -ms-flex-align: stretch;
489
+ align-items: stretch;
490
+ padding-bottom: 0;
491
+ }
492
+ li.comp > div {
493
+ -ms-flex: 1 !important;
494
+ flex: 1 !important;
495
+ padding: 0 0 10px 0;
496
+ }
497
+ li.comp > div + aside {
498
+ margin-right: -20px;
499
+ }
500
+ li.comp > h3,
501
+ li.comp > h4 {
502
+ white-space: nowrap;
503
+ overflow: hidden;
504
+ text-overflow: ellipsis;
505
+ font-family: SegoeWP, SegoeUI, HelveticaNeue, Sans-serif;
506
+ font-weight: 200;
507
+ }
508
+ li.comp > h3 > h3,
509
+ li.comp > h4 > h3 {
510
+ margin: 0;
511
+ min-width: 40%;
512
+ }
513
+ li.comp > h3 > h4,
514
+ li.comp > h4 > h4 {
515
+ margin: 0;
516
+ }
517
+ li.comp.wrap > div > h3,
518
+ li.comp.wrap > div > h4 {
519
+ white-space: normal;
520
+ overflow: visible;
521
+ }
522
+ li.comp > aside {
523
+ display: -ms-flexbox;
524
+ display: flex;
525
+ -ms-flex-pack: center;
526
+ justify-content: center;
527
+ -ms-flex-align: center;
528
+ align-items: center;
529
+ padding: 0 0 10px 0;
530
+ }
531
+ li.comp > aside:first-child {
532
+ -ms-flex-align: start;
533
+ align-items: start;
534
+ margin-right: 10px;
535
+ }
536
+ li.comp > aside:last-child {
537
+ padding: 0 20px 10px 10px;
538
+ }
539
+ li.comp > aside > label,
540
+ li.comp > aside > span {
541
+ display: inline-block;
542
+ margin-left: 5px;
543
+ }
544
+ li.comp > aside > .nav {
545
+ display: none;
546
+ }
547
+ li.comp > aside > .nav::after {
548
+ display: none;
549
+ }
550
+ li.comp > aside > .show-detail::after {
551
+ content: 'i';
552
+ display: block;
553
+ height: 20px;
554
+ width: 22px;
555
+ border-radius: 20px;
556
+ border: solid 1px #ffffff;
557
+ color: #ffffff;
558
+ font: bold 14px/0 SegoeWP, SegoeUI, Times, serif;
559
+ box-sizing: border-box;
560
+ padding: 10px 8px;
561
+ float: right;
562
+ margin: -20px 0 0 0;
563
+ }
564
+ li.comp:last-of-type > aside:last-child {
565
+ border: none;
566
+ }
567
+ .list > li > aside > h4 {
568
+ margin: 0;
569
+ font-weight: normal;
570
+ color: #cccccc;
571
+ }
572
+ aside > span.counter,
573
+ aside > span.date-time {
574
+ font-weight: normal;
575
+ color: #cccccc;
576
+ font-size: 12pt;
577
+ }
578
+ p {
579
+ color: #ffffff;
580
+ }
581
+ html[dir=rtl] li.comp > aside:first-child {
582
+ margin-right: auto;
583
+ margin-left: 10px;
584
+ }
585
+ html[dir=rtl] li.comp > aside > span.counter,
586
+ html[dir=rtl] li.comp > aside > span.date-time {
587
+ margin-right: 10px !important;
588
+ margin-left: 0 !important;
589
+ display: inline-block !important;
590
+ }
591
+ @media only screen and (max-device-width: 320px) and (orientation: portrait) {
592
+ li.comp > aside > h4 {
593
+ max-width: 100px;
594
+ white-space: nowrap;
595
+ overflow: hidden;
596
+ text-overflow: ellipsis;
597
+ }
598
+ }
599
+ /* ==============================
600
+ Grids
601
+ =========================== */
602
+ /* Grid: */
603
+ .grid {
604
+ display: -webkit-box;
605
+ -webkit-box-orientation: horizontal;
606
+ -webkit-box-align: stretch;
607
+ display: -webkit-flex;
608
+ -webkit-flex-direction: row;
609
+ -webkit-align-items: stretch;
610
+ display: -ms-flexbox;
611
+ -ms-flex-direction: row;
612
+ -ms-align-items: stretch;
613
+ display: flex;
614
+ flex-direction: row;
615
+ align-items: stretch;
616
+ }
617
+ /* Allow columns to wrap */
618
+ .grid.wrap {
619
+ -webkit-box-wrap: wrap;
620
+ -webkit-flex-wrap: wrap;
621
+ -ms-flex-wrap: wrap;
622
+ flex-wrap: wrap;
623
+ }
624
+ /* Column: */
625
+ .col {
626
+ -webkit-box-flex: 1 1 auto;
627
+ -webkit-flex: 1 1 auto;
628
+ -ms-flex: 1 1 auto;
629
+ flex: 1 1 auto;
630
+ }
631
+ /* Centered grids: */
632
+ .grid.center {
633
+ -webkit-box-pack: center;
634
+ -webkit-justify-content: center;
635
+ -ms-justify-content: center;
636
+ justify-content: center;
637
+ }
638
+ .center .col {
639
+ -webkit-flex-grow: 0;
640
+ -webkit-flex-shrink: 0;
641
+ -ms-flex-grow: 0;
642
+ -ms-flex-shrink: 0;
643
+ flex-grow: 0;
644
+ flex-shrink: 0;
645
+ }
646
+ /* Columns: */
647
+ .flex-1 {
648
+ -webkit-flex-basis: 10%;
649
+ -ms-flex-basis: 10%;
650
+ flex-basis: 10%;
651
+ }
652
+ .flex-2 {
653
+ -webkit-flex-basis: 20%;
654
+ -ms-flex-basis: 20%;
655
+ flex-basis: 20%;
656
+ }
657
+ .flex-3 {
658
+ -webkit-flex-basis: 30%;
659
+ -ms-flex-basis: 30%;
660
+ flex-basis: 30%;
661
+ }
662
+ .flex-4 {
663
+ -webkit-flex-basis: 40%;
664
+ -ms-flex-basis: 40%;
665
+ flex-basis: 40%;
666
+ }
667
+ .flex-5 {
668
+ -webkit-flex-basis: 50%;
669
+ -ms-flex-basis: 50%;
670
+ flex-basis: 50%;
671
+ }
672
+ .flex-6 {
673
+ -webkit-flex-basis: 60%;
674
+ -ms-flex-basis: 60%;
675
+ flex-basis: 60%;
676
+ }
677
+ .flex-7 {
678
+ -webkit-flex-basis: 70%;
679
+ -ms-flex-basis: 70%;
680
+ flex-basis: 70%;
681
+ }
682
+ .flex-8 {
683
+ -webkit-flex-basis: 80%;
684
+ -ms-flex-basis: 80%;
685
+ flex-basis: 80%;
686
+ }
687
+ .flex-9 {
688
+ -webkit-flex-basis: 90%;
689
+ -ms-flex-basis: 90%;
690
+ flex-basis: 90%;
691
+ }
692
+ .flex-10 {
693
+ -webkit-flex-basis: 100%;
694
+ -ms-flex-basis: 100%;
695
+ flex-basis: 100%;
696
+ }
697
+ .gutter-5 .col {
698
+ margin: 5px;
699
+ }
700
+ .gutter-10 .col {
701
+ margin: 10px;
702
+ }
703
+ html[dir=rtl] .grid {
704
+ -webkit-box-direction: horizontal;
705
+ -webkit-flex-direction: row;
706
+ -ms-flex-direction: row;
707
+ flex-direction: row;
708
+ }
709
+ /* Mobile */
710
+ @media only screen and (max-width: 599px) {
711
+ .grid {
712
+ -webkit-box-wrap: wrap;
713
+ -webkit-flex-wrap: wrap;
714
+ -ms-flex-wrap: wrap;
715
+ flex-wrap: wrap;
716
+ -wekbit-flex-direction: vertical;
717
+ -webkit-flex-direction: column;
718
+ -ms-flex-direction: column;
719
+ flex-direction: column;
720
+ margin: 0 !important;
721
+ }
722
+ .col.flex-1,
723
+ .col.flex-2,
724
+ .col.flex-3,
725
+ .col.flex-4 {
726
+ -webkit-box-flex: 1 !important;
727
+ -webkit-flex: 1 !important;
728
+ -ms-flex: 1 !important;
729
+ flex: 1 !important;
730
+ -webkit-flex-basis: 50%;
731
+ -ms-flex-basis: 50%;
732
+ flex-basis: 50%;
733
+ }
734
+ .col.flex-5,
735
+ .col.flex-6,
736
+ .col.flex-7,
737
+ .col.flex-8,
738
+ .col.flex-9,
739
+ .col.flex-10 {
740
+ -webkit-box-flex: 2 !important;
741
+ -webkit-flex: 2 !important;
742
+ -ms-flex: 2 !important;
743
+ flex: 2 !important;
744
+ }
745
+ .isWindows .grid,
746
+ .isWindows .col {
747
+ display: block;
748
+ }
749
+ }
750
+ /* ==============================
751
+ Segmented Control
752
+ =========================== */
753
+ .segmented {
754
+ display: -ms-flexbox;
755
+ display: flex;
756
+ -ms-flex-direction: row;
757
+ flex-direction: row;
758
+ -ms-flex-pack: center;
759
+ justify-content: center;
760
+ -ms-flex: 1;
761
+ flex: 1;
762
+ box-sizing: border-box;
763
+ margin: 0px 10px;
764
+ }
765
+ .segmented > .button {
766
+ display: -ms-flexbox;
767
+ display: flex;
768
+ -ms-flex-direction: column !important;
769
+ flex-direction: column !important;
770
+ -ms-flex-pack: center;
771
+ justify-content: center;
772
+ -ms-flex-align: center;
773
+ align-items: center;
774
+ border: solid 2px #ffffff;
775
+ border-left: none;
776
+ text-align: center;
777
+ font-size: 9pt;
778
+ box-sizing: border-box;
779
+ height: 30px;
780
+ cursor: pointer;
781
+ margin: 0px !important;
782
+ padding: 0px 10px;
783
+ transition: none;
784
+ }
785
+ .segmented > .button:first-of-type {
786
+ border-left: solid 2px #ffffff;
787
+ }
788
+ .segmented > .button:hover,
789
+ .segmented > .button.selected {
790
+ color: #ffffff !important;
791
+ background-color: #007aff !important;
792
+ opacity: 1 !important;
793
+ box-shadow: none;
794
+ border-color: #ffffff !important;
795
+ }
796
+ div.horizontal.centered > .segmented {
797
+ display: -ms-flexbox;
798
+ display: flex;
799
+ margin: 10px 16px;
800
+ }
801
+ .segmented.align-flush {
802
+ position: absolute;
803
+ right: 15px;
804
+ top: 10px;
805
+ }
806
+ html[dir=rtl] .segmented.align-flush {
807
+ left: 15px;
808
+ right: auto;
809
+ }
810
+ html[dir=rtl] .segmented > .button {
811
+ border-left: solid 2px #ffffff;
812
+ border-right: none;
813
+ }
814
+ html[dir=rtl] .segmented > .button:first-of-type {
815
+ border-right: solid 2px #ffffff;
816
+ }
817
+ /* ==============================
818
+ Segmented Paging Control
819
+ =========================== */
820
+ .segmented.paging > .button {
821
+ display: -ms-flexbox;
822
+ display: flex;
823
+ -ms-flex-pack: center;
824
+ justify-content: center;
825
+ font-size: 20pt;
826
+ padding: 0;
827
+ width: 40px;
828
+ height: 40px;
829
+ border: solid 2px #ffffff;
830
+ box-shadow: none;
831
+ position: relative;
832
+ box-sizing: border-box;
833
+ }
834
+ .segmented.paging > .button:first-of-type {
835
+ margin-right: 10px !important;
836
+ top: 0 !important;
837
+ }
838
+ .segmented.paging > .button:hover,
839
+ .segmented.paging > .button.selected {
840
+ color: #007aff;
841
+ box-shadow: none;
842
+ border-color: #ffffff;
843
+ background-color: #ffffff;
844
+ color: #ffffff;
845
+ opacity: 1;
846
+ }
847
+ .segmented.paging > .button:hover::before,
848
+ .segmented.paging > .button.selected::before {
849
+ background-color: #ffffff;
850
+ color: #007aff;
851
+ }
852
+ .segmented.paging > .button::before {
853
+ content: '';
854
+ display: block;
855
+ -ms-flex: 1;
856
+ flex: 1;
857
+ height: 38px;
858
+ width: 38px;
859
+ font-family: "Segoe UI Symbol";
860
+ font-weight: normal;
861
+ line-height: 20pt;
862
+ vertical-align: 50%;
863
+ font-size: 24pt;
864
+ color: #ffffff;
865
+ }
866
+ nav .segmented.paging > a.button {
867
+ border-radius: 50%;
868
+ }
869
+ .segmented.paging.horizontal > .button:first-of-type::before {
870
+ content: '\E09E';
871
+ margin-left: -2px;
872
+ }
873
+ .segmented.paging.horizontal > .button:last-of-type::before {
874
+ content: '\E09F';
875
+ }
876
+ .segmented.paging.vertical > .button:first-of-type::before {
877
+ content: '\E0A0';
878
+ }
879
+ .segmented.paging.vertical > .button:last-of-type::before {
880
+ content: '\E0A1';
881
+ }
882
+ article.paging > section {
883
+ position: absolute;
884
+ width: 100%;
885
+ left: 0;
886
+ right: 0;
887
+ bottom: 0;
888
+ top: 0;
889
+ opacity: 1;
890
+ padding: 0 0 100px 0 !important;
891
+ transition: all 0.15s ease-out;
892
+ }
893
+ article.paging.horizontal > section.previous {
894
+ transform: translate3d(-100%, 0, 0);
895
+ }
896
+ article.paging.horizontal > section.current {
897
+ transform: translate3d(0, 0, 0);
898
+ }
899
+ article.paging.horizontal > section.next {
900
+ transform: translate3d(100%, 0, 0);
901
+ }
902
+ article.paging.vertical > section.previous {
903
+ transform: translate3d(0, -100%, 0);
904
+ }
905
+ article.paging.vertical > section.current {
906
+ transform: translate3d(0, 0, 0);
907
+ }
908
+ article.paging.vertical > section.next {
909
+ transform: translate3d(0, -100%, 0);
910
+ }
911
+ html[dir=rtl] .segmented.paging.horizontal > .button:first-of-type::before,
912
+ html[dir=rtl] .segmented.paging.vertical > .button:first-of-type::before,
913
+ html[dir=rtl] .segmented.paging.horizontal > .button:last-of-type::before,
914
+ html[dir=rtl] .segmented.paging.vertical > .button:last-of-type::before {
915
+ transform: rotate(-180deg);
916
+ }
917
+ html[dir=rtl] .segmented.paging.horizontal > .button:first-of-type::before,
918
+ html[dir=rtl] .segmented.paging.vertical > .button:first-of-type::before {
919
+ margin-right: -2px;
920
+ }
921
+ html[dir=rtl] .segmented.paging.horizontal > .button:last-of-type,
922
+ html[dir=rtl] .segmented.paging.vertical > .button:last-of-type {
923
+ margin-right: 10px !important;
924
+ border: solid 2px #ffffff !important;
925
+ }
926
+ html[dir=rtl] article.paging.horizontal > section.previous {
927
+ transform: translate3d(100%, 0, 0);
928
+ }
929
+ html[dir=rtl] article.paging.horizontal > section.next {
930
+ transform: translate3d(-100%, 0, 0);
931
+ }
932
+ /* ==============================
933
+ Toolbar Styles
934
+ =========================== */
935
+ div.toolbar {
936
+ position: fixed;
937
+ bottom: 0;
938
+ left: 0;
939
+ right: 0;
940
+ height: 45pt;
941
+ padding: 0 15px;
942
+ background-color: #1a1a1a;
943
+ border-top: solid 1px #333333;
944
+ overflow: hidden;
945
+ box-sizing: border-box;
946
+ display: -ms-flexbox;
947
+ display: flex;
948
+ -ms-flex-direction: row;
949
+ flex-direction: row;
950
+ -ms-flex-pack: flex-start;
951
+ justify-content: flex-start;
952
+ -ms-flex-align: center;
953
+ align-items: center;
954
+ -webkit-transition: all 0.15s ease-out;
955
+ transition: all 0.15s ease-out;
956
+ -webkit-transform: translate3d(0, 0, 0);
957
+ }
958
+ .splitlayout > .master + .toolbar {
959
+ left: 0;
960
+ width: 320px;
961
+ border-right: solid 1px #333333 !important;
962
+ background-color: #1a1a1a;
963
+ }
964
+ .splitlayout > .detail + .toolbar {
965
+ left: 320px;
966
+ background-color: #1a1a1a;
967
+ }
968
+ article.has-toolbar {
969
+ bottom: 45pt !important;
970
+ }
971
+ div.toolbar.current {
972
+ -webkit-transform: translate3d(0, 0, 0) !important;
973
+ }
974
+ div.toolbar.next {
975
+ -webkit-transform: translate3d(101%, 0, 0) !important;
976
+ }
977
+ div.toolbar.previous {
978
+ -webkit-transform: translate3d(-101%, 0, 0) !important;
979
+ }
980
+ html[dir=rtl] .splitlayout > .master + .toolbar {
981
+ right: 0;
982
+ left: 320px;
983
+ width: 320px;
984
+ border-right: none;
985
+ border-left: solid 1px #333333 !important;
986
+ }
987
+ html[dir=rtl] .splitlayout > .detail + .toolbar {
988
+ right: 320px;
989
+ left: 0;
990
+ }
991
+ /* ==============================
992
+ Split Layout Styles
993
+ =========================== */
994
+ body.splitlayout {
995
+ display: -ms-flexbox;
996
+ -ms-flex-direction: row;
997
+ -ms-flex-align: stretch;
998
+ }
999
+ body.splitlayout > nav {
1000
+ background-color: #1a1a1a !important;
1001
+ border-bottom: solid 1px #333333;
1002
+ }
1003
+ body.splitlayout > nav:first-of-type {
1004
+ width: 320px;
1005
+ border-right: solid 1px #333333 !important;
1006
+ }
1007
+ body.splitlayout > nav:last-of-type {
1008
+ left: 320px;
1009
+ }
1010
+ body.splitlayout > nav h1 {
1011
+ z-index: auto;
1012
+ text-align: center;
1013
+ }
1014
+ body.splitlayout > article.master {
1015
+ top: 60px;
1016
+ left: 0;
1017
+ bottom: 0;
1018
+ right: 320px;
1019
+ box-sizing: border-box;
1020
+ width: 320px;
1021
+ border-right: solid 1px #262626 !important;
1022
+ }
1023
+ body.splitlayout > article.master > section {
1024
+ padding-bottom: 100px;
1025
+ height: 100%;
1026
+ }
1027
+ body.splitlayout > article.detail {
1028
+ top: 60px;
1029
+ left: 320px !important;
1030
+ bottom: 0;
1031
+ left: 0;
1032
+ -ms-flex: 1;
1033
+ overflow: hidden;
1034
+ }
1035
+ body.splitlayout > article.detail > section {
1036
+ padding-bottom: 100px;
1037
+ height: 100%;
1038
+ }
1039
+ .master .list > li.selected {
1040
+ background-color: #ffffff;
1041
+ color: #000000 !important;
1042
+ }
1043
+ html[dir=rtl] body.splitlayout > nav:first-of-type {
1044
+ right: 0;
1045
+ left: 320px;
1046
+ border-right: none;
1047
+ border-left: solid 1px #333333 !important;
1048
+ }
1049
+ html[dir=rtl] body.splitlayout > nav:last-of-type {
1050
+ left: 0;
1051
+ right: 320px;
1052
+ }
1053
+ html[dir=rtl] body.splitlayout > article.master {
1054
+ left: 320px !important;
1055
+ right: 0 !important;
1056
+ border-right: none !important;
1057
+ border-left: solid 1px #333333 !important;
1058
+ }
1059
+ html[dir=rtl] body.splitlayout > article.detail {
1060
+ right: 320px !important;
1061
+ left: 0 !important;
1062
+ }
1063
+ @media only screen and (max-device-width: 320px) and (orientation: portrait) {
1064
+ .splitlayout > article.master {
1065
+ right: 260px !important;
1066
+ }
1067
+ .splitlayout > article.detail {
1068
+ left: 260px !important;
1069
+ }
1070
+ .splitlayout > nav:first-of-type {
1071
+ width: 260px !important;
1072
+ }
1073
+ .splitlayout > nav:last-of-type {
1074
+ left: 260px !important;
1075
+ }
1076
+ }
1077
+ /* ==============================
1078
+ Mask Control
1079
+ =========================== */
1080
+ .mask {
1081
+ display: block;
1082
+ background-color: #000;
1083
+ position: absolute;
1084
+ top: 0;
1085
+ bottom: 0;
1086
+ left: 0;
1087
+ right: 0;
1088
+ height: 100%;
1089
+ width: 100%;
1090
+ z-index: 9999;
1091
+ cursor: pointer;
1092
+ }
1093
+ /* ==============================
1094
+ Busy Control
1095
+ =========================== */
1096
+ .busy {
1097
+ width: 150px;
1098
+ display: block;
1099
+ margin-left: auto;
1100
+ margin-right: auto;
1101
+ position: relative;
1102
+ top: 20px;
1103
+ }
1104
+ .busy.align-flush {
1105
+ position: absolute;
1106
+ right: 15px;
1107
+ }
1108
+ nav > .busy {
1109
+ width: 80px;
1110
+ }
1111
+ /* ==============================
1112
+ Popover Control
1113
+ =========================== */
1114
+ .popover {
1115
+ min-width: 200px;
1116
+ background-color: #000000;
1117
+ height: 250px;
1118
+ max-height: 300px;
1119
+ position: absolute;
1120
+ z-index: 111111;
1121
+ margin-top: 10px;
1122
+ transform: scaleY(0);
1123
+ transition: all 0.15s ease-in-out;
1124
+ transform-origin: 50% 0%;
1125
+ box-shadow: 0 0 5px 3px #4d4d4d;
1126
+ border: solid 2px #000000;
1127
+ }
1128
+ .popover.open {
1129
+ transform: scaleY(1);
1130
+ }
1131
+ .popover header {
1132
+ display: none;
1133
+ }
1134
+ .popover > section {
1135
+ overflow-x: hidden;
1136
+ overflow-y: auto;
1137
+ -ms-overflow-style: -ms-autohiding-scrollbar;
1138
+ padding-bottom: 0;
1139
+ position: absolute;
1140
+ top: 4px;
1141
+ bottom: 4px;
1142
+ width: 100%;
1143
+ padding-bottom: 20px;
1144
+ }
1145
+ .popover > section > ul.list,
1146
+ .popover > section > ul.list > li {
1147
+ margin: 0 !important;
1148
+ }
1149
+ .popover > section > ul.list > li:hover {
1150
+ background-color: #007aff;
1151
+ color: #ffffff;
1152
+ }
1153
+ .button.show-popover:hover {
1154
+ background-color: #ffffff;
1155
+ color: #000000;
1156
+ }
1157
+ /* ==============================
1158
+ Popup Control
1159
+ =========================== */
1160
+ .popup {
1161
+ display: -ms-flexbox;
1162
+ display: flex;
1163
+ -ms-flex-direction: column;
1164
+ flex-direction: column;
1165
+ width: 100%;
1166
+ background-color: #fafafa;
1167
+ padding: 20px 10px;
1168
+ transform: scaleY(1);
1169
+ transition: all 0.25s ease-in-out;
1170
+ position: absolute;
1171
+ top: 0;
1172
+ left: 0;
1173
+ right: 0;
1174
+ z-index: 10000;
1175
+ margin-left: auto;
1176
+ margin-right: auto;
1177
+ transition: all 0.25s ease-in;
1178
+ transform-origin: top center;
1179
+ }
1180
+ .popup.closed {
1181
+ transform: scaleY(0);
1182
+ }
1183
+ .popup.opened {
1184
+ display: block;
1185
+ transform: scaleY(1);
1186
+ transition: all 0.25s ease-in-out;
1187
+ }
1188
+ .popup * {
1189
+ color: #000000;
1190
+ }
1191
+ .popup > .panel {
1192
+ display: block !important;
1193
+ color: #fff;
1194
+ font: normal 16px/22px Helvetica, Arial, Sans-serif;
1195
+ padding: 0 0 10px 0;
1196
+ width: 80%;
1197
+ height: 100%;
1198
+ margin: 0 20px;
1199
+ }
1200
+ .popup > .panel > p {
1201
+ padding: 0 20px;
1202
+ }
1203
+ .popup header > h1 {
1204
+ font-size: 24px;
1205
+ }
1206
+ .popup header,
1207
+ .popup footer {
1208
+ box-sizing: border-box;
1209
+ display: -ms-flexbox !important;
1210
+ display: flex !important;
1211
+ -ms-flex-direction: row;
1212
+ flex-direction: row;
1213
+ -ms-flex-pack: center;
1214
+ justify-content: center;
1215
+ -ms-flex-align: center;
1216
+ align-items: center;
1217
+ height: auto !important;
1218
+ }
1219
+ .popup footer {
1220
+ height: auto;
1221
+ position: relative;
1222
+ bottom: -10px;
1223
+ left: -10px;
1224
+ padding: 0 20px;
1225
+ height: 42px;
1226
+ }
1227
+ .popup footer > .button {
1228
+ -ms-flex: 1;
1229
+ flex: 1;
1230
+ display: block;
1231
+ box-sizing: border-box;
1232
+ max-width: 100%;
1233
+ box-shadow: none;
1234
+ margin: 10px 0px !important;
1235
+ height: 42px !important;
1236
+ font-size: 18px;
1237
+ line-height: 32px;
1238
+ padding: 8px 20px;
1239
+ border-color: #000000;
1240
+ background-color: #ffffff;
1241
+ color: #000000;
1242
+ font: bold 16px/20px Helvetica, sans-serif;
1243
+ border-right: none;
1244
+ text-align: center;
1245
+ }
1246
+ .popup footer > .button:last-of-type {
1247
+ border-right: solid 2px #000000;
1248
+ }
1249
+ .popup footer > .button:hover {
1250
+ background-color: #007aff;
1251
+ border-color: #000000 !important;
1252
+ color: #ffffff;
1253
+ }
1254
+ .popup footer + .button {
1255
+ border-right: solid 2px #000000;
1256
+ }
1257
+ html[dir=rtl] .popup footer > .button:first-of-type {
1258
+ border-right: solid 2px #000000;
1259
+ border-left: solid 2px #000000;
1260
+ }
1261
+ /* ==============================
1262
+ Editable Lists
1263
+ =========================== */
1264
+ .list.editable > li,
1265
+ .list.deletable > li {
1266
+ overflow: hidden;
1267
+ }
1268
+ .list.editable > li > .move-up,
1269
+ .list.deletable > li > .move-up,
1270
+ .list.editable > li > .move-down,
1271
+ .list.deletable > li > .move-down {
1272
+ width: 27px;
1273
+ height: 27px;
1274
+ display: block !important;
1275
+ position: relative;
1276
+ float: right;
1277
+ margin-top: -33px;
1278
+ transition: all 0.25s ease-out;
1279
+ -ms-transform: translate3d(100px, 0, 0);
1280
+ transform: translate3d(140px, 0, 0);
1281
+ }
1282
+ .list.editable > li > .move-up::after,
1283
+ .list.deletable > li > .move-up::after,
1284
+ .list.editable > li > .move-down::after,
1285
+ .list.deletable > li > .move-down::after {
1286
+ display: block;
1287
+ content: '\E0A0';
1288
+ width: 27px;
1289
+ height: 27px;
1290
+ position: absolute;
1291
+ border: solid 2px #fff;
1292
+ border-radius: 50%;
1293
+ color: #fff;
1294
+ z-index: 1000000;
1295
+ font-family: "Segoe UI Symbol";
1296
+ font-weight: normal;
1297
+ line-height: .9;
1298
+ font-size: 16pt;
1299
+ text-align: center;
1300
+ }
1301
+ .list.editable > li > .move-down,
1302
+ .list.deletable > li > .move-down {
1303
+ margin-right: 10px !important;
1304
+ content: '\E0A1';
1305
+ }
1306
+ .list.editable > li:first-of-type > .move-up,
1307
+ .list.deletable > li:first-of-type > .move-up {
1308
+ opacity: .35;
1309
+ }
1310
+ .list.editable > li:last-of-type > .move-down,
1311
+ .list.deletable > li:last-of-type > .move-down {
1312
+ opacity: .35;
1313
+ }
1314
+ .deletion-indicator {
1315
+ display: -ms-flexbox;
1316
+ display: flex;
1317
+ box-sizing: border-box;
1318
+ padding: 2px 5px 13px 1px;
1319
+ height: 24px;
1320
+ width: 24px;
1321
+ background-color: #000000;
1322
+ border: solid 2px #ffffff;
1323
+ position: absolute;
1324
+ top: 5px;
1325
+ left: -50px;
1326
+ transition: all 0.25s ease-out;
1327
+ cursor: pointer;
1328
+ }
1329
+ .deletion-indicator:hover {
1330
+ box-shadow: 0 0 6px 2px #ffffff !important;
1331
+ color: #66afff !important;
1332
+ }
1333
+ li.selected > .deletion-indicator {
1334
+ box-shadow: 0 0 6px 2px #ffffff !important;
1335
+ color: #66afff !important;
1336
+ }
1337
+ li.selected > .deletion-indicator::before {
1338
+ font-family: "Segoe UI Symbol";
1339
+ font-weight: normal;
1340
+ font-size: 13pt;
1341
+ text-align: left;
1342
+ content: '\E008';
1343
+ color: #66afff;
1344
+ display: block;
1345
+ margin: -2px 0 0 -4px;
1346
+ }
1347
+ .list.showIndicators .deletion-indicator {
1348
+ margin-left: 55px;
1349
+ }
1350
+ .list.showIndicators li {
1351
+ padding-left: 32px;
1352
+ }
1353
+ .list.showIndicators li .move-up {
1354
+ -ms-transform: translate3d(0, 0, 0);
1355
+ transform: translate3d(0, 0, 0);
1356
+ }
1357
+ .list.showIndicators li .move-down {
1358
+ -ms-transform: translate3d(-36px, 0, 0);
1359
+ transform: translate3d(-36px, 0, 0);
1360
+ }
1361
+ .list.showIndicators li > li > h3 {
1362
+ width: 55%;
1363
+ white-space: nowrap;
1364
+ overflow: hidden;
1365
+ text-overflow: ellipsis;
1366
+ }
1367
+ .list.showIndicators li.selected > .move-up {
1368
+ -ms-transform: translate3d(-45px, 0, 0);
1369
+ transform: translate3d(-45px, 0, 0);
1370
+ }
1371
+ .list.showIndicators li.selected > .move-down {
1372
+ -ms-transform: translate3d(-80px, 0, 0);
1373
+ transform: translate3d(-80px, 0, 0);
1374
+ }
1375
+ .list.showIndicators > li > h3 {
1376
+ width: 55%;
1377
+ white-space: nowrap;
1378
+ overflow: hidden;
1379
+ text-overflow: ellipsis;
1380
+ }
1381
+ .button.delete {
1382
+ float: right;
1383
+ color: #ffffff;
1384
+ text-align: center;
1385
+ box-sizing: border-box;
1386
+ width: 32px;
1387
+ height: 30px;
1388
+ position: absolute;
1389
+ right: 0;
1390
+ top: 0;
1391
+ display: -ms-flexbox;
1392
+ display: flex;
1393
+ -ms-flex-direction: row;
1394
+ flex-direction: row;
1395
+ -ms-flex-pack: center;
1396
+ justify-content: center;
1397
+ -ms-flex-align: center;
1398
+ align-items: center;
1399
+ transition: all 0.25s ease-out;
1400
+ transform: translate3d(140px, 0, 0);
1401
+ cursor: pointer;
1402
+ font-weight: 200;
1403
+ border: solid 2px #ffffff;
1404
+ border-radius: 50%;
1405
+ padding: 0;
1406
+ overflow: hidden;
1407
+ }
1408
+ .button.delete:hover {
1409
+ border-color: #ffffff !important;
1410
+ }
1411
+ .button.delete:hover::before {
1412
+ color: #ffffff;
1413
+ }
1414
+ .button.delete::before {
1415
+ font-family: "Segoe UI Symbol";
1416
+ font-weight: normal;
1417
+ content: "\E107";
1418
+ vertical-align: 50%;
1419
+ font-size: 14pt;
1420
+ display: block;
1421
+ width: 100%;
1422
+ height: 100%;
1423
+ text-align: center;
1424
+ margin-top: 8px;
1425
+ }
1426
+ li.selected > .button.delete {
1427
+ transform: translate3d(0, 0, 0);
1428
+ }
1429
+ html[dir=rtl] .deletion-indicator {
1430
+ right: -50px !important;
1431
+ left: auto;
1432
+ }
1433
+ html[dir=rtl] li.selected > .deletion-indicator::before {
1434
+ margin: -2px 18px 0 0;
1435
+ }
1436
+ html[dir=rtl] .list.showIndicators li {
1437
+ padding-left: 0;
1438
+ padding-right: 32px;
1439
+ }
1440
+ html[dir=rtl] .button.delete {
1441
+ float: left;
1442
+ }
1443
+ html[dir=rtl] .list.editable > li > .deletion-indicator,
1444
+ html[dir=rtl] .list.deletable > li > .deletion-indicator {
1445
+ float: right;
1446
+ margin-right: auto;
1447
+ margin-left: -20px;
1448
+ right: -40px;
1449
+ }
1450
+ html[dir=rtl] .list.editable > li > .button.delete,
1451
+ html[dir=rtl] .list.deletable > li > .button.delete {
1452
+ transform: translate3d(-80px, 0, 0);
1453
+ left: 0;
1454
+ right: auto;
1455
+ }
1456
+ html[dir=rtl] .list.editable > li > .move-up,
1457
+ html[dir=rtl] .list.deletable > li > .move-up {
1458
+ float: left !important;
1459
+ -ms-transform: translate3d(-100px, 0, 0);
1460
+ transform: translate3d(-100px, 0, 0);
1461
+ }
1462
+ html[dir=rtl] .list.editable > li > .move-down,
1463
+ html[dir=rtl] .list.deletable > li > .move-down {
1464
+ margin-top: -28px;
1465
+ float: left !important;
1466
+ -ms-transform: translate3d(-140px, 0, 0) rotate(180deg);
1467
+ transform: translate3d(-140px, 0, 0) rotate(180deg);
1468
+ }
1469
+ html[dir=rtl] .list.showIndicators > li > .deletion-indicator {
1470
+ right: 0px !important;
1471
+ margin-left: 10px;
1472
+ }
1473
+ html[dir=rtl] .list.showIndicators > li > .move-up {
1474
+ -ms-transform: translate3d(10px, 0, 0) !important;
1475
+ transform: translate3d(10px, 0, 0) !important;
1476
+ }
1477
+ html[dir=rtl] .list.showIndicators > li > .move-down {
1478
+ -ms-transform: translate3d(50px, 0, 0) rotate(180deg) !important;
1479
+ transform: translate3d(50px, 0, 0) rotate(180deg) !important;
1480
+ }
1481
+ html[dir=rtl] .list.showIndicators > li.selected {
1482
+ margin-right: 0;
1483
+ padding-left: 45px;
1484
+ }
1485
+ html[dir=rtl] .list.showIndicators > li.selected > .button.delete {
1486
+ transform: translate3d(6px, 0, 0);
1487
+ }
1488
+ /* ==============================
1489
+ Form Styles
1490
+ =========================== */
1491
+ input:not([type=range]),
1492
+ textarea {
1493
+ border: solid 2px #ffffff;
1494
+ background: transparent !important;
1495
+ padding: 5px;
1496
+ color: #ffffff;
1497
+ }
1498
+ input:focus:not([type=range]) {
1499
+ border-color: #007aff;
1500
+ color: #ffffff;
1501
+ }
1502
+ select {
1503
+ background-color: transparent;
1504
+ border: solid 2px #ffffff;
1505
+ color: #ffffff;
1506
+ height: 30px;
1507
+ padding-left: 5px;
1508
+ }
1509
+ select:focus {
1510
+ border-color: #007aff;
1511
+ }
1512
+ select:focus::-ms-value {
1513
+ background-color: transparent;
1514
+ color: #ffffff;
1515
+ }
1516
+ select:focus::-ms-expand {
1517
+ border: solid 2px #007aff;
1518
+ border-top: none;
1519
+ border-right: none;
1520
+ border-bottom: none;
1521
+ }
1522
+ select::-ms-expand {
1523
+ border: solid 2px #ffffff;
1524
+ border-top: none;
1525
+ border-bottom: none;
1526
+ border-right: none;
1527
+ color: #ffffff;
1528
+ background-color: transparent;
1529
+ padding: 0 2px;
1530
+ }
1531
+ select option:hover,
1532
+ select option:focus,
1533
+ select option:checked {
1534
+ background-color: #007aff;
1535
+ }
1536
+ option {
1537
+ color: #000000;
1538
+ padding: 5px;
1539
+ }
1540
+ .select-box-label {
1541
+ display: none;
1542
+ }
1543
+ html[dir=rtl] select::-ms-expand {
1544
+ border: none;
1545
+ border-right: solid 2px #ffffff;
1546
+ padding: 0 4px 0 0;
1547
+ }
1548
+ .searchBar {
1549
+ width: auto;
1550
+ box-sizing: border-box;
1551
+ height: 30px;
1552
+ margin-left: auto;
1553
+ display: -ms-flexbox;
1554
+ display: flex;
1555
+ -ms-flex-direction: row;
1556
+ flex-direction: row;
1557
+ -ms-flex-pack: flex-start;
1558
+ justify-content: flex-start;
1559
+ -ms-flex-align: center;
1560
+ align-items: center;
1561
+ }
1562
+ .searchBar > input[type="search"] {
1563
+ padding: 4px 0 4px 10px;
1564
+ width: auto;
1565
+ padding-left: 10px;
1566
+ margin-left: 25px;
1567
+ text-align: left;
1568
+ color: #000;
1569
+ background-color: #fff !important;
1570
+ border: none;
1571
+ border: solid 2px #fff;
1572
+ }
1573
+ .searchBar > input[type="search"]:focus {
1574
+ text-align: left;
1575
+ outline: none !important;
1576
+ color: #000;
1577
+ }
1578
+ .searchBar > input[type="search"]::-ms-clear {
1579
+ color: #000;
1580
+ border: solid 1px #000;
1581
+ height: 20px;
1582
+ margin: 2px 4px 2px 0;
1583
+ }
1584
+ .searchGlyph {
1585
+ font-family: 'Segoe UI Symbol';
1586
+ display: inline-block;
1587
+ height: 28px;
1588
+ width: 28px;
1589
+ box-sizing: border-box;
1590
+ padding: 2px;
1591
+ line-height: 16px;
1592
+ background-color: #000;
1593
+ border: solid 3px #fff;
1594
+ color: #fff;
1595
+ }
1596
+ /* ==============================
1597
+ Icon Styles
1598
+ =========================== */
1599
+ /*
1600
+ Put a class or id on each icon.
1601
+ The use a png or svg image as
1602
+ a background image. Apply a
1603
+ background color too.
1604
+ See page article of demo
1605
+ paging control for example.
1606
+ */
1607
+ .icon {
1608
+ height: 40px;
1609
+ width: 40px;
1610
+ background-repeat: no-repeat;
1611
+ background-position: center center;
1612
+ background-size: auto 70%;
1613
+ border-radius: 0;
1614
+ }
1615
+ /* ==============================
1616
+ Range Control
1617
+ =========================== */
1618
+ input[type="range"] {
1619
+ display: block;
1620
+ margin-top: 20px;
1621
+ margin-bottom: 20px;
1622
+ }
1623
+ /* Use color attribute for left side of range control */
1624
+ /* Use color attribute for right side of range control */
1625
+ /* ==============================
1626
+ Select List
1627
+ =========================== */
1628
+ .list.select li::before {
1629
+ content: '';
1630
+ display: block;
1631
+ float: left;
1632
+ transition: all 0.125s ease-in-out;
1633
+ border: solid 2px #ffffff;
1634
+ height: 16px;
1635
+ width: 16px;
1636
+ border-radius: 50%;
1637
+ margin-right: 10px;
1638
+ margin-top: 0px;
1639
+ }
1640
+ .list.select li:hover::before,
1641
+ .list.select li.selected::before {
1642
+ background-image: radial-gradient(circle, #ffffff 5px, transparent 5px);
1643
+ background-color: #3395ff;
1644
+ }
1645
+ .list.select li > input {
1646
+ display: none;
1647
+ }
1648
+ /* ==============================
1649
+ Sheet Control
1650
+ =========================== */
1651
+ .sheet {
1652
+ position: absolute;
1653
+ top: 0;
1654
+ left: 0;
1655
+ bottom: 0;
1656
+ right: 0;
1657
+ background-color: rgba(255, 255, 255, 0.85);
1658
+ transition: all 0.25s ease-in;
1659
+ transform: translate3d(0, -100%, 0);
1660
+ visibility: hidden;
1661
+ }
1662
+ .sheet.opened {
1663
+ visibility: visible;
1664
+ transform: translate3d(0, 0, 0);
1665
+ }
1666
+ .sheet .button {
1667
+ width: auto;
1668
+ margin: 0 auto;
1669
+ padding: 10px 20px;
1670
+ height: auto;
1671
+ background-color: #ffffff;
1672
+ border-color: #000000;
1673
+ color: #000000;
1674
+ }
1675
+ .sheet .button:hover,
1676
+ .sheet .button.selected {
1677
+ color: #ffffff;
1678
+ background-color: #007aff;
1679
+ border-color: #000000 !important;
1680
+ }
1681
+ .sheet > section {
1682
+ position: absolute;
1683
+ top: 36px;
1684
+ left: 0;
1685
+ bottom: 0;
1686
+ height: auto;
1687
+ right: 0;
1688
+ }
1689
+ .sheet > section > *,
1690
+ .sheet > section h2 {
1691
+ color: #appBkColor;
1692
+ }
1693
+ .sheet > section > .list {
1694
+ border: none;
1695
+ background-color: transparent !important;
1696
+ }
1697
+ .sheet > section > .list > li {
1698
+ border-bottom: solid 1px #4d4d4d;
1699
+ background-color: transparent !important;
1700
+ }
1701
+ .sheet > section > .list::before {
1702
+ content: none;
1703
+ }
1704
+ .sheet > div.handle {
1705
+ display: -ms-flexbox;
1706
+ display: flex;
1707
+ -ms-flex-direction: column;
1708
+ flex-direction: column;
1709
+ -ms-flex-pack: center;
1710
+ justify-content: center;
1711
+ -ms-flex-align: center;
1712
+ align-items: center;
1713
+ text-align: center;
1714
+ margin: 0 auto;
1715
+ color: #000000;
1716
+ cursor: pointer;
1717
+ height: 28pt;
1718
+ }
1719
+ .sheet > div.handle::before {
1720
+ content: '\E0A0';
1721
+ font-family: "Segoe UI Symbol";
1722
+ font-weight: normal;
1723
+ font-size: 24pt;
1724
+ text-align: left;
1725
+ color: #000000;
1726
+ display: block;
1727
+ margin-bottom: 10px;
1728
+ }
1729
+ /* ==============================
1730
+ Slide Out
1731
+ =========================== */
1732
+ .slide-out {
1733
+ position: absolute;
1734
+ top: 52pt;
1735
+ left: 0;
1736
+ bottom: 0;
1737
+ background-color: #000000;
1738
+ z-index: 111111111;
1739
+ width: 100%;
1740
+ visibility: hidden;
1741
+ transform: translate3d(-100%, 0, 0);
1742
+ transition: all 0.25s ease-out;
1743
+ overflow-x: hidden;
1744
+ overflow-y: auto;
1745
+ box-sizing: border-box;
1746
+ display: -ms-flexbox;
1747
+ display: flex;
1748
+ -ms-flex-direction: column;
1749
+ flex-direction: column;
1750
+ -ms-flex-pack: flex-start;
1751
+ justify-content: flex-start;
1752
+ -ms-flex-align: stretch;
1753
+ align-items: stretch;
1754
+ }
1755
+ .slide-out.open {
1756
+ visibility: visible;
1757
+ transform: translate3d(0, 0, 0);
1758
+ }
1759
+ .slide-out > section {
1760
+ -ms-flex: 1;
1761
+ flex: 1;
1762
+ padding-bottom: 100px;
1763
+ overflow-x: hidden;
1764
+ overflow-y: auto;
1765
+ -ms-overflow-style: -ms-autohiding-scrollbar;
1766
+ }
1767
+ .slide-out > section > ul.list {
1768
+ margin-top: 20px;
1769
+ }
1770
+ .button.slide-out-button {
1771
+ position: absolute;
1772
+ z-index: 1111111;
1773
+ top: 0 !important;
1774
+ left: 15px;
1775
+ height: 35px;
1776
+ width: 35px;
1777
+ box-sizing: border-box;
1778
+ margin-left: -5px !important;
1779
+ }
1780
+ .button.slide-out-button::before {
1781
+ content: '\E179';
1782
+ height: 35px;
1783
+ width: 35px;
1784
+ color: #ffffff;
1785
+ font-family: "Segoe UI Symbol";
1786
+ font-weight: normal;
1787
+ font-size: 14pt;
1788
+ text-align: left;
1789
+ display: block;
1790
+ margin: 2px 0 0 -5px;
1791
+ }
1792
+ .button.slide-out-button:hover::before {
1793
+ color: #000000;
1794
+ }
1795
+ body.slide-out-app > article,
1796
+ body.slide-out-app > nav:not(:first-of-type) {
1797
+ display: none !important;
1798
+ }
1799
+ body.slide-out-app > article.show,
1800
+ body.slide-out-app > nav.show {
1801
+ display: block !important;
1802
+ z-index: 100;
1803
+ }
1804
+ .slideout-header {
1805
+ background-color: #000000 !important;
1806
+ }
1807
+ .slideout-header h2 {
1808
+ margin-left: 0;
1809
+ color: #ffffff !important;
1810
+ margin-top: 20px !important;
1811
+ }
1812
+ html[dir=rtl] .slide-out {
1813
+ transform: translate3d(100%, 0, 0);
1814
+ }
1815
+ html[dir=rtl] .slide-out.open {
1816
+ transform: translate3d(0, 0, 0);
1817
+ }
1818
+ html[dir=rtl] .button.slide-out-button {
1819
+ margin-right: 10px !important;
1820
+ }
1821
+ html[dir=rtl] .button.slide-out-button::before {
1822
+ margin: 2px -17px 0 0 !important;
1823
+ }
1824
+ /* ==============================
1825
+ Stepper Control
1826
+ =========================== */
1827
+ .stepper {
1828
+ -ms-flex-align: start;
1829
+ display: flex;
1830
+ display: -ms-inline-flexbox;
1831
+ display: inline-flex;
1832
+ -ms-flex-direction: row;
1833
+ flex-direction: row;
1834
+ -ms-flex-pack: center;
1835
+ justify-content: center;
1836
+ -ms-flex-align: center;
1837
+ align-items: center;
1838
+ padding: 1px;
1839
+ }
1840
+ .stepper > input {
1841
+ margin: 0;
1842
+ display: none;
1843
+ }
1844
+ .stepper > label {
1845
+ display: block;
1846
+ border: solid 2px #ffffff;
1847
+ width: 36px;
1848
+ height: 32px;
1849
+ box-sizing: border-box;
1850
+ font: bold 14pt/20pt SegoeWP, SegoeUI, HelveticaNeue, Sans-serif;
1851
+ text-align: center;
1852
+ background-color: #ffffff;
1853
+ color: #000000;
1854
+ }
1855
+ .stepper > .button {
1856
+ display: inline-block;
1857
+ text-align: center;
1858
+ font-weight: bold;
1859
+ font-size: 12pt;
1860
+ line-height: 18pt;
1861
+ cursor: pointer !important;
1862
+ margin: 0;
1863
+ overflow: hidden;
1864
+ box-sizing: border-box;
1865
+ height: 32px;
1866
+ padding: 1px 10px;
1867
+ box-shadow: none;
1868
+ }
1869
+ .stepper > .button:first-of-type {
1870
+ border-right: none;
1871
+ }
1872
+ .stepper > .button:first-of-type::before {
1873
+ font-family: "Segoe UI Symbol";
1874
+ font-weight: normal;
1875
+ content: '\E108';
1876
+ }
1877
+ .stepper > .button:last-of-type {
1878
+ border-left: none;
1879
+ }
1880
+ .stepper > .button:last-of-type::before {
1881
+ font-family: "Segoe UI Symbol";
1882
+ font-weight: normal;
1883
+ content: '\E109';
1884
+ }
1885
+ html[dir=rtl] .stepper > .button:first-of-type {
1886
+ border-right: solid 2px #ffffff;
1887
+ }
1888
+ html[dir=rtl] .stepper > .button:last-of-type {
1889
+ border-left: solid 2px #ffffff;
1890
+ }
1891
+ /* ==============================
1892
+ Switched List Items
1893
+ =========================== */
1894
+ li.switched {
1895
+ display: -ms-flexbox;
1896
+ display: flex;
1897
+ -ms-flex-direction: row-reverse;
1898
+ flex-direction: row-reverse;
1899
+ -ms-flex-pack: flex-start;
1900
+ justify-content: flex-start;
1901
+ }
1902
+ li.switched h3 {
1903
+ width: auto;
1904
+ font-size: 13pt;
1905
+ line-height: 24pt;
1906
+ color: #9e9e9e;
1907
+ white-space: nowrap;
1908
+ overflow: hidden;
1909
+ text-overflow: ellipsis;
1910
+ -ms-flex: 1;
1911
+ flex: 1;
1912
+ }
1913
+ li.switched h4 {
1914
+ width: auto;
1915
+ text-align: right;
1916
+ margin-right: 10px;
1917
+ font-size: 14pt;
1918
+ line-height: 24pt;
1919
+ white-space: nowrap;
1920
+ overflow: hidden;
1921
+ text-overflow: ellipsis;
1922
+ color: #ffffff;
1923
+ max-width: 50%;
1924
+ }
1925
+ html[dir=rtl] li.switched h4 {
1926
+ margin-left: 10px;
1927
+ margin-right: auto;
1928
+ }
1929
+ /* ==============================
1930
+ Switch
1931
+ =========================== */
1932
+ .switch {
1933
+ position: relative;
1934
+ height: 25px;
1935
+ width: 60px;
1936
+ border: 2px solid #ffffff;
1937
+ background-color: #000000;
1938
+ display: -ms-flexbox;
1939
+ display: flex;
1940
+ -ms-flex-direction: row;
1941
+ flex-direction: row;
1942
+ -ms-flex-pack: space-around;
1943
+ justify-content: space-around;
1944
+ box-sizing: border-box;
1945
+ text-align: center;
1946
+ line-height: 28px;
1947
+ cursor: pointer;
1948
+ -ms-user-select: none;
1949
+ animation-duration: .65s;
1950
+ animation-timing-function: ease-in-out;
1951
+ animation-fill-mode: forwards;
1952
+ animation-name: switchAnimationOff;
1953
+ }
1954
+ .switch:before {
1955
+ content: '';
1956
+ display: block;
1957
+ position: absolute;
1958
+ z-index: 3;
1959
+ top: 0px;
1960
+ border: solid 1px #ffffff;
1961
+ background-color: #1f8aff;
1962
+ height: 19px;
1963
+ width: 0;
1964
+ transition: all 0.15s ease-in-out;
1965
+ }
1966
+ .switch.on:before {
1967
+ width: 54px;
1968
+ }
1969
+ .switch.on > em {
1970
+ -ms-transform: translate3d(48px, 0, 0);
1971
+ }
1972
+ .switch > em {
1973
+ display: block;
1974
+ position: relative;
1975
+ z-index: 3;
1976
+ top: -2px;
1977
+ left: -3px;
1978
+ background-color: #ffffff;
1979
+ width: 12px;
1980
+ height: 25px;
1981
+ pointer-events: none;
1982
+ -ms-transform: translate3d(-1px, 0, 0);
1983
+ -ms-transition: all 0.15s ease-in-out;
1984
+ transition: all 0.15s ease-in-out;
1985
+ -ms-touch-action: none;
1986
+ }
1987
+ .switch > input {
1988
+ display: none;
1989
+ }
1990
+ html[dir=rtl] .switch:before {
1991
+ left: 0;
1992
+ }
1993
+ html[dir=rtl] .switch > em {
1994
+ -ms-transform: translate3d(-40px, 0, 0);
1995
+ transform: translate3d(-40px, 0, 0);
1996
+ }
1997
+ html[dir=rtl] .switch.on > em {
1998
+ -ms-transform: translate3d(2px, 0, 0);
1999
+ transform: translate3d(2px, 0, 0);
2000
+ }
2001
+ /* ==============================
2002
+ Tab Bar
2003
+ =========================== */
2004
+ .tabbar {
2005
+ height: 47px;
2006
+ padding: 1px 0;
2007
+ display: block;
2008
+ box-sizing: border-box;
2009
+ font-size: 10px;
2010
+ text-align: left;
2011
+ position: absolute;
2012
+ top: 45pt;
2013
+ left: 25px;
2014
+ right: 20px;
2015
+ overflow: hidden;
2016
+ }
2017
+ .tabbar > .button {
2018
+ position: relative;
2019
+ display: inline-block !important;
2020
+ margin: 0;
2021
+ height: 30px;
2022
+ text-align: left;
2023
+ color: #ffffff;
2024
+ border-color: #000000;
2025
+ padding: 4px 10px 4px 0;
2026
+ border: none !important;
2027
+ }
2028
+ .tabbar > .button:hover,
2029
+ .tabbar > .button.selected {
2030
+ color: #007aff !important;
2031
+ opacity: 1 !important;
2032
+ background-color: transparent;
2033
+ }
2034
+ .tabbar > .button.more {
2035
+ font-size: 0;
2036
+ width: 40px;
2037
+ }
2038
+ .tabbar > .button.more::before {
2039
+ font-family: "Segoe UI Symbol";
2040
+ font-weight: normal;
2041
+ content: '\E10C';
2042
+ font-size: 20pt;
2043
+ }
2044
+ .tabbar > .button.more > label {
2045
+ display: none !important;
2046
+ }
2047
+ .tabbar > .button > label {
2048
+ font-size: 10pt !important;
2049
+ }
2050
+ body.hasTabBar > article {
2051
+ top: 95px !important;
2052
+ }
2053
+ /* ==============================
2054
+ Media Queries for landscape
2055
+ & portrait layouts
2056
+ =========================== */
2057
+ @media only screen and (device-width: 480px) and (orientation: portrait) {
2058
+ @-ms-viewport {
2059
+ width: 240px;
2060
+ }
2061
+ /*
2062
+ IMPORTANT! Define width for html and body
2063
+ to prevent horizontal scrolling when viewport is resized.
2064
+ */
2065
+ html,
2066
+ body,
2067
+ body {
2068
+ width: 240px;
2069
+ height: 400px;
2070
+ }
2071
+ nav > .button {
2072
+ -ms-flex: 0;
2073
+ flex: 0;
2074
+ }
2075
+ nav > h1 {
2076
+ -ms-flex: 2;
2077
+ flex: 2;
2078
+ }
2079
+ nav > h1 {
2080
+ font-size: large;
2081
+ }
2082
+ .list > li h3 {
2083
+ font-size: 14pt;
2084
+ }
2085
+ a.button.back,
2086
+ a.button.backTo {
2087
+ width: 30px;
2088
+ height: 30px;
2089
+ line-height: 18px !important;
2090
+ /* line-height must match the content box height. */
2091
+ -ms-flex: none;
2092
+ flex: none;
2093
+ }
2094
+ a.button.back::before,
2095
+ a.button.backTo::before {
2096
+ vertical-align: 52%;
2097
+ font-size: 11pt;
2098
+ margin-left: -17px;
2099
+ }
2100
+ .segmented.paging > .button {
2101
+ font-size: 20pt;
2102
+ width: 30px;
2103
+ height: 30px;
2104
+ }
2105
+ .segmented.paging > .button::before {
2106
+ height: 30px;
2107
+ width: 30px;
2108
+ line-height: 20pt;
2109
+ vertical-align: 50%;
2110
+ font-size: 20pt;
2111
+ margin: -4px 0 0 0;
2112
+ }
2113
+ .popover {
2114
+ height: 200px;
2115
+ }
2116
+ .switch:before {
2117
+ height: 12px !important;
2118
+ }
2119
+ .stepper > label {
2120
+ width: 28px;
2121
+ height: 26px;
2122
+ font: bold 14pt/20pt SegoeWP, SegoeUI, HelveticaNeue, Sans-serif;
2123
+ }
2124
+ .stepper > .button {
2125
+ font-size: 10pt;
2126
+ line-height: 14pt;
2127
+ height: 26px;
2128
+ padding: 1px 6px;
2129
+ }
2130
+ }
2131
+ /* ==============================
2132
+ Media Query Adjustments
2133
+ =========================== */
2134
+ /* For small, narrow phones in portrait mode: */
2135
+ @media only screen and (device-width: 480px) and (orientation: portrait) {
2136
+ .popover {
2137
+ width: 200px;
2138
+ }
2139
+ .popup {
2140
+ padding: 20px 10px;
2141
+ }
2142
+ .popup header > h1 {
2143
+ font-size: 14pt;
2144
+ }
2145
+ .splitlayout > nav:first-of-type {
2146
+ width: 150px;
2147
+ }
2148
+ .splitlayout > nav:last-of-type {
2149
+ left: 150px;
2150
+ }
2151
+ .splitlayout > article.master {
2152
+ width: 150px !important;
2153
+ }
2154
+ .splitlayout > article.detail {
2155
+ left: 150px !important;
2156
+ }
2157
+ .tabbar {
2158
+ display: -ms-flexbox;
2159
+ display: flex;
2160
+ }
2161
+ .tabbar > .button {
2162
+ font-size: 9pt;
2163
+ -ms-flex: 1;
2164
+ flex: 1;
2165
+ }
2166
+ .busy.align-flush {
2167
+ position: static;
2168
+ }
2169
+ .switch {
2170
+ height: 18px;
2171
+ width: 40px;
2172
+ }
2173
+ .switch > em {
2174
+ width: 12px;
2175
+ height: 18px;
2176
+ }
2177
+ .switch:before {
2178
+ height: 15px;
2179
+ }
2180
+ .switch.on > em {
2181
+ -ms-transform: translate3d(28px, 0, 0);
2182
+ }
2183
+ .switch.on:before {
2184
+ width: 26px;
2185
+ }
2186
+ .tabbar > .button > label {
2187
+ font-size: 8pt !important;
2188
+ }
2189
+ .tabbar > .button.more::before {
2190
+ font-size: 8pt;
2191
+ }
2192
+ .button.slide-out-button {
2193
+ top: 5px;
2194
+ left: 15px;
2195
+ height: 28px;
2196
+ width: 28px;
2197
+ margin-left: -5px !important;
2198
+ }
2199
+ .button.slide-out-button::before {
2200
+ height: 28px;
2201
+ width: 28px;
2202
+ font-size: 10pt;
2203
+ margin: -1px 0 0 -6px;
2204
+ }
2205
+ }
2206
+ /* For small, narrow phones in landscape mode: */
2207
+ @media only screen and (device-width: 480px) and (orientation: landscape) {
2208
+ @-ms-viewport {
2209
+ width: 480px;
2210
+ }
2211
+ .splitlayout > nav:first-of-type {
2212
+ width: 200px;
2213
+ }
2214
+ .splitlayout > nav:last-of-type {
2215
+ left: 200px;
2216
+ }
2217
+ .splitlayout > article.master {
2218
+ width: 200px !important;
2219
+ }
2220
+ .splitlayout > article.detail {
2221
+ left: 200px !important;
2222
+ }
2223
+ .busy.align-flush {
2224
+ position: static;
2225
+ }
2226
+ }
2227
+ /* For normal phones in portrait mode: */
2228
+ @media only screen and (device-width: 768px) and (orientation: portrait) {
2229
+ @-ms-viewport {
2230
+ width: 384px;
2231
+ }
2232
+ }
2233
+ /* For normal phones in landscape mode: */
2234
+ @media only screen and (device-width: 768px) and (orientation: landscape) {
2235
+ @-ms-viewport {
2236
+ width: 512px;
2237
+ }
2238
+ }
2239
+ /* ==============================
2240
+ Carousel styles
2241
+ =========================== */
2242
+ #carousel {
2243
+ width: 100%;
2244
+ height: 100%;
2245
+ margin: 10px auto;
2246
+ box-sizing: border-box;
2247
+ background-color: #000000;
2248
+ border: solid 1px #ffffff;
2249
+ }
2250
+ .carousel-track {
2251
+ margin: 0;
2252
+ padding: 0;
2253
+ }
2254
+ .carousel-track > li {
2255
+ box-sizing: border-box;
2256
+ list-style: none;
2257
+ margin: 0;
2258
+ padding: 0;
2259
+ position: relative;
2260
+ display: -ms-flexbox;
2261
+ display: flex;
2262
+ -ms-flex-direction: column;
2263
+ flex-direction: column;
2264
+ -ms-flex-pack: flex-start;
2265
+ justify-content: flex-start;
2266
+ -ms-flex-align: center;
2267
+ align-items: center;
2268
+ overflow: hidden;
2269
+ border-left: solid 1px #ffffff;
2270
+ padding: 1px 1px 10px;
2271
+ -ms-user-select: none;
2272
+ -ms-touch-action: none;
2273
+ }
2274
+ .carousel-track > li.carousel-panel-active {
2275
+ border: none;
2276
+ }
2277
+ .pagination {
2278
+ list-style: none;
2279
+ padding: 0;
2280
+ margin: 0 auto;
2281
+ display: -ms-flexbox;
2282
+ display: flex;
2283
+ -ms-flex-direction: row;
2284
+ flex-direction: row;
2285
+ -ms-flex-pack: space-around;
2286
+ justify-content: space-around;
2287
+ }
2288
+ .pagination::after {
2289
+ content: '';
2290
+ display: block;
2291
+ clear: both;
2292
+ }
2293
+ .pagination > li {
2294
+ list-style: none;
2295
+ padding: 0;
2296
+ margin: 0;
2297
+ height: 10px;
2298
+ width: 10px;
2299
+ background-color: #ffffff;
2300
+ margin-right: 5px;
2301
+ }
2302
+ .pagination > li:hover,
2303
+ .pagination > li.selected {
2304
+ background-color: #007aff;
2305
+ cursor: pointer;
2306
+ }
2307
+ .pagination > li:last-of-type {
2308
+ margin-right: 0;
2309
+ }
2310
+ html[dir=rtl] .pagination > li {
2311
+ margin-right: 0;
2312
+ margin-left: 5px;
2313
+ padding: 0;
2314
+ }
2315
+ html[dir=rtl] .pagination > li:last-of-type {
2316
+ margin-left: 0;
2317
+ }
2318
+ .horizontal-scroll-panel {
2319
+ width: 100%;
2320
+ height: 200px;
2321
+ background-color: #ccc;
2322
+ padding: 20px;
2323
+ overflow-x: hidden;
2324
+ overflow-y: auto;
2325
+ -webkit-overflow-scrolling: touch;
2326
+ -ms-overflow-style: -ms-autohiding-scrollbar;
2327
+ overflow-y: hidden !important;
2328
+ overflow-x: auto;
2329
+ }
2330
+ .horizontal-scroll-panel > ul {
2331
+ list-style: none;
2332
+ margin: 0;
2333
+ padding: 0;
2334
+ -webkit-padding-start: 0;
2335
+ font-size: 0;
2336
+ }
2337
+ .horizontal-scroll-panel > ul li {
2338
+ display: inline-block;
2339
+ border: solid 1px #666;
2340
+ box-shadow: 0 0 4px #666;
2341
+ width: 200px;
2342
+ height: 200px;
2343
+ overflow: hidden;
2344
+ margin-right: 20px;
2345
+ font-size: 0;
2346
+ }
2347
+ .horizontal-scroll-panel > ul:first-of-type {
2348
+ margin-left: 0 !important;
2349
+ }
2350
+ .horizontal-scroll-panel > ul:last-of-type {
2351
+ margin-right: 0 !important;
2352
+ }
2353
+ body.isWindows .horizontal-scroll-panel {
2354
+ background-color: #333;
2355
+ }
2356
+ [dir=rtl] .horizontal-scroll-panel li {
2357
+ margin-right: 0 !important;
2358
+ margin-left: 20px !important;
2359
+ }
2360
+ [dir=rtl] .horizontal-scroll-panel li:first-of-type {
2361
+ margin-right: 0 !important;
2362
+ }
2363
+ [dir=rtl] .horizontal-scroll-panel li:last-of-type {
2364
+ margin-left: 0 !important;
2365
+ }
2366
+ @media only screen and (max-device-width: 320px) {
2367
+ .horizontal-scroll-panel {
2368
+ height: 125px;
2369
+ padding: 10px;
2370
+ }
2371
+ .horizontal-scroll-panel li {
2372
+ height: 125px;
2373
+ width: 125px;
2374
+ }
2375
+ }