├── README.md └── html ├── assets ├── avatar.jpg └── photos │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── index.html ├── styles.css └── vendor ├── html5shiv.js └── respond.min.js /README.md: -------------------------------------------------------------------------------- 1 | ## Kendo UI with Twitter Bootstrap - Responsive demo 2 | 3 | This demo page shows how to use [Kendo UI](https://www.telerik.com/kendo-ui) alongside [Twitter Bootstrap](https://getbootstrap.com/). 4 | 5 | The relevant ASP.NET MVC demo is available in [this repository](https://github.com/telerik/mvc-bootstrap-demo). The relevant ASP.NET Core demo is available in [this repository](https://github.com/telerik/core-bootstrap-demo). The relevant PHP demo is available in [this repository](https://github.com/telerik/php-bootstrap-demo). 6 | 7 | The grid layout and responsive CSS is provided by Bootstrap, and components are provided by Kendo UI. To see the responsive features, you can resize the page or customize it using the pickers on top. 8 | 9 | See more information how to [use Kendo UI alongside Twitter Bootstrap](https://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap). -------------------------------------------------------------------------------- /html/assets/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-bootstrap-demo/bcbbbfd9a5bef6b186df02fed92a7f18a167d5b1/html/assets/avatar.jpg -------------------------------------------------------------------------------- /html/assets/photos/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-bootstrap-demo/bcbbbfd9a5bef6b186df02fed92a7f18a167d5b1/html/assets/photos/1.jpg -------------------------------------------------------------------------------- /html/assets/photos/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-bootstrap-demo/bcbbbfd9a5bef6b186df02fed92a7f18a167d5b1/html/assets/photos/10.jpg -------------------------------------------------------------------------------- /html/assets/photos/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-bootstrap-demo/bcbbbfd9a5bef6b186df02fed92a7f18a167d5b1/html/assets/photos/11.jpg -------------------------------------------------------------------------------- /html/assets/photos/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-bootstrap-demo/bcbbbfd9a5bef6b186df02fed92a7f18a167d5b1/html/assets/photos/12.jpg -------------------------------------------------------------------------------- /html/assets/photos/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-bootstrap-demo/bcbbbfd9a5bef6b186df02fed92a7f18a167d5b1/html/assets/photos/2.jpg -------------------------------------------------------------------------------- /html/assets/photos/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-bootstrap-demo/bcbbbfd9a5bef6b186df02fed92a7f18a167d5b1/html/assets/photos/3.jpg -------------------------------------------------------------------------------- /html/assets/photos/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-bootstrap-demo/bcbbbfd9a5bef6b186df02fed92a7f18a167d5b1/html/assets/photos/4.jpg -------------------------------------------------------------------------------- /html/assets/photos/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-bootstrap-demo/bcbbbfd9a5bef6b186df02fed92a7f18a167d5b1/html/assets/photos/5.jpg -------------------------------------------------------------------------------- /html/assets/photos/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-bootstrap-demo/bcbbbfd9a5bef6b186df02fed92a7f18a167d5b1/html/assets/photos/6.jpg -------------------------------------------------------------------------------- /html/assets/photos/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-bootstrap-demo/bcbbbfd9a5bef6b186df02fed92a7f18a167d5b1/html/assets/photos/7.jpg -------------------------------------------------------------------------------- /html/assets/photos/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-bootstrap-demo/bcbbbfd9a5bef6b186df02fed92a7f18a167d5b1/html/assets/photos/8.jpg -------------------------------------------------------------------------------- /html/assets/photos/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-bootstrap-demo/bcbbbfd9a5bef6b186df02fed92a7f18a167d5b1/html/assets/photos/9.jpg -------------------------------------------------------------------------------- /html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Kendo UI ♥ Twitter Bootstrap: Responsive demo 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 |
23 |

24 | Kendo UI for jQuery ♥ Bootstrap 25 |

26 | 27 | 30 | 31 |
32 |
33 | 37 | 38 | 42 | 43 | 47 |
48 |
49 |
50 |
51 |
52 | 53 |
54 |
55 |
What is this page?
56 |
57 |

58 | This page shows how to use Kendo UI for jQuery alongside Twitter 59 | Bootstrap. 60 |

61 | 62 |

63 | The grid layout and responsive CSS is provided by Bootstrap, and 64 | components are provided by Kendo UI for jQuery. 65 |

66 | 67 |

68 | Resize the page or customize it using the pickers above to see its 69 | responsive features. 70 |

71 |
72 |
73 | 74 | 84 | 85 |
86 |
87 |
88 |
Profile
89 | 90 |
91 |
92 |
93 | 94 |
95 | 96 |
97 | Jonathan 98 | Dodsworth 99 |
Inside Sales Coordinator
100 |
101 |
102 |
103 |
104 |
105 | 106 |
107 |
108 |
    109 |
  • 110 | Revenue 111 |
    • 112 |
  • 113 | Sales / day 114 |
    • 115 |
  • 116 | Sales / region 117 |
    • 118 |
  • 119 | Market share 120 |
    • 121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 | 141 |
142 |
Profile Setup
143 | 144 |
145 |
146 |
147 | 148 |
149 | 150 |
151 |
152 | 153 |
154 | 155 |
156 | 157 |
158 |
159 | 160 |
161 | 162 |
163 | 167 |
168 |
169 | 170 |
171 | 172 |
173 | 177 |
178 |
179 |
180 | 181 |
182 |
183 | 184 |
185 | 186 |
187 |
188 | 189 |
190 | 191 |
192 | 204 |
205 |
206 | 207 |
208 | 209 |
210 | 211 |
212 |
213 |
214 | 215 |
216 | 217 |
218 |
219 | 220 |
221 | 222 |
223 |
224 |
225 | 226 |
227 | 228 | 229 |
230 |
231 |
232 | 233 |
234 | 235 |
236 | 237 | 250 | 255 | 256 |
257 |
258 | FAQ 259 |
260 | 261 |
262 |
    263 |
  • 264 | What is Kendo UI? 265 |
    266 |

    267 | Kendo UI for jQuery is a HTML5, jQuery-based framework for 268 | building modern HTML apps. Kendo UI for jQuery combines the 269 | best of HTML5, CSS3, and JavaScript technologies with robust, 270 | cross-browser techniques to deliver a framework that is both 271 | powerfully rich and broadly compatible with older browsers. 272 |

    273 |

    274 | Kendo UI for jQuery combines everything that a developer needs 275 | to build a rich JavaScript app, eliminating the traditional 276 | challenge of manually researching and combining all of the 277 | needed plug-ins, frameworks, and libraries needed to build 278 | apps. Kendo UI for jQuery includes rich UI controls for 279 | desktop, mobile and data vizualization, a JavaScript 280 | DataSource, fast Templates, cross-device Drag and Drop API, 281 | Globalization, Validation and MVVM framework extensions, and 282 | more. 283 |

    284 |

    285 | Download Kendo UI for jQuery 286 | and experience the difference today 287 |

    288 |
    289 |
    • 290 |
  • 291 | Who should use Kendo UI for jQuery? 292 |
    293 |

    294 | Kendo UI for jQuery is for all HTML developers. Kendo UI for 295 | jQuery can be used with (or without) any server-side 296 | technology, making it the perfect front-end for every modern, 297 | browser-based HTML app. Kendo UI for jQuery only requires 298 | jQuery. After that, everything that's needed is included. 299 |

    300 |
    301 |
    • 302 |
  • 303 | What are Kendo UI for jQuery components? 304 |
    305 |

    306 | Kendo UI for jQuery components are part of the Kendo UI for 307 | jQuery Framework. 308 |

    309 |

    310 | All components complement the tooling you need for modern 311 | HTML5 and JavaScript development.
    312 |
    313 | The Kendo UI for jQuery Framework provides more than UI, and 314 | in the future Kendo UI for jQuery will offer additional tools 315 | to modern HTML developers. 316 |

    317 |
    318 |
    • 319 |
  • 320 | How do you use Kendo UI for jQuery? 321 |
    322 |

    323 | Kendo UI for jQuery is a pure JavaScript framework, so using 324 | Kendo UI for jQuery is as simple as referencing JavaScript and 325 | CSS resources on your page. Once Kendo UI for jQuery is 326 | configured on your page, the rich API gives you everything you 327 | need to initialize and configure an application. 328 |

    329 |

    330 | To learn more about using and installing Kendo UI for jQuery, 331 | visit the Kendo UI for jQuery online demos. 332 |

    333 |
    334 |
    • 335 |
336 |
337 |
338 | 339 | 347 |
348 | 349 | 1380 | 1381 | 1382 | -------------------------------------------------------------------------------- /html/styles.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Kendo UI"; 3 | src: url("https://kendo.cdn.telerik.com/2023.1.117/styles/images/kendoui.woff") 4 | format("woff"), 5 | url("https://kendo.cdn.telerik.com/2023.1.117/styles/images/kendoui.ttf") 6 | format("truetype"); 7 | } 8 | 9 | body:before { 10 | font-family: "Kendo UI"; 11 | content: "\a0"; 12 | font-size: 0; 13 | width: 0; 14 | height: 0; 15 | position: absolute; 16 | z-index: -1; 17 | } 18 | 19 | html, 20 | body { 21 | margin: 0; 22 | padding: 0; 23 | min-width: 320px; 24 | } 25 | 26 | #example { 27 | padding-top: 2em; 28 | } 29 | 30 | header { 31 | margin: 0; 32 | font-size: 20px; 33 | color: #fff; 34 | background-color: #272727; 35 | } 36 | 37 | header h1, 38 | header button { 39 | display: inline-block; 40 | vertical-align: middle; 41 | font-size: 20px; 42 | } 43 | 44 | header .container h1 { 45 | margin: 0; 46 | font-size: 20px; 47 | padding-top: 20px; 48 | padding-left: 0; 49 | } 50 | 51 | #configure, 52 | header label { 53 | border-style: solid; 54 | border-color: #636363; 55 | border-width: 0 0 0 1px; 56 | margin-bottom: 0; 57 | font-weight: normal; 58 | } 59 | 60 | header .container { 61 | position: relative; 62 | } 63 | 64 | header .description { 65 | text-transform: uppercase; 66 | color: #ccc; 67 | font-size: 10px; 68 | line-height: 29px; 69 | } 70 | 71 | header .k-dropdown, 72 | header #font-size-value { 73 | font-size: 18px; 74 | line-height: 45px; 75 | margin-bottom: 9px; 76 | } 77 | 78 | header .k-dropdown { 79 | width: 100%; 80 | } 81 | 82 | header .k-dropdown { 83 | background-image: none !important; 84 | } 85 | 86 | header .k-dropdown { 87 | background-color: transparent; 88 | border-color: #5c5c5c; 89 | border-radius: 0; 90 | } 91 | 92 | header .k-dropdown.k-focused { 93 | box-shadow: none; 94 | } 95 | 96 | header .k-dropdown .k-input { 97 | padding-top: 0; 98 | padding-bottom: 0; 99 | text-indent: 14px; 100 | } 101 | 102 | header .k-dropdown .k-input, 103 | header .k-dropdown .k-select { 104 | line-height: 45px; 105 | } 106 | 107 | header .k-dropdown .k-i-arrow-s { 108 | background-image: url("http://cdn.kendostatic.com/2023.1.117/styles/Bootstrap/sprite.png"); 109 | background-position: -16px -32px; 110 | } 111 | 112 | header .k-dropdown .k-input { 113 | color: #fff; 114 | } 115 | 116 | .header-description { 117 | line-height: 33px; 118 | align-self: center; 119 | } 120 | 121 | #configurator label { 122 | padding-bottom: 12px !important; 123 | } 124 | 125 | .card { 126 | margin-bottom: 20px; 127 | } 128 | 129 | .k-popup.ra-list { 130 | background-color: #010101; 131 | border-color: #5c5c5c; 132 | color: #fff; 133 | padding: 0; 134 | border-radius: 0; 135 | } 136 | 137 | .k-popup { 138 | height: auto !important; 139 | } 140 | 141 | .ra-list .k-list-item { 142 | border-radius: 0; 143 | text-indent: 7px; 144 | } 145 | 146 | .ra-list .k-list-item-text { 147 | font-size: 1rem !important; 148 | line-height: 1.5 !important; 149 | } 150 | 151 | #configure { 152 | z-index: 10; 153 | width: 62px; 154 | height: 62px; 155 | overflow: hidden; 156 | border-width: 0 0 0 1px; 157 | background-color: transparent; 158 | position: absolute; 159 | top: 0; 160 | right: 0; 161 | color: #fff; 162 | } 163 | 164 | #configure .k-i-menu { 165 | font-size: 18px !important; 166 | } 167 | 168 | #demo { 169 | padding-top: 46px; 170 | } 171 | 172 | #menu { 173 | margin-bottom: 30px; 174 | } 175 | 176 | #profile { 177 | position: relative; 178 | } 179 | 180 | #profile .card-body { 181 | min-height: 158px; 182 | } 183 | 184 | .card-header { 185 | font-size: 1.2857em; 186 | line-height: 1.2857em; 187 | } 188 | 189 | .avatar { 190 | border: 1px solid #e7e7e7; 191 | border-radius: 2px; 192 | } 193 | 194 | .ra-first-name { 195 | display: block; 196 | margin-top: 0.8571em; 197 | } 198 | 199 | .ra-last-name { 200 | display: block; 201 | font-size: 1.7143em; 202 | line-height: 1.3em; 203 | } 204 | 205 | .ra-position { 206 | font-size: 0.8571em; 207 | color: #999; 208 | padding-bottom: 2em; 209 | } 210 | 211 | .form-group .k-widget, 212 | .form-group .k-textbox { 213 | width: 100%; 214 | } 215 | 216 | .buttons-wrap { 217 | border-top: 1px solid #e7e7e7; 218 | padding-top: 0.5em; 219 | text-align: right; 220 | } 221 | 222 | .ra-section { 223 | margin-bottom: 20px; 224 | } 225 | 226 | .ra-well-overlay { 227 | margin: -16px -17px -19px; 228 | } 229 | 230 | #tabstrip .k-content { 231 | min-height: 156px; 232 | } 233 | 234 | #tabstrip .k-chart { 235 | height: 156px; 236 | } 237 | 238 | #tabstrip .k-content { 239 | padding: 1px; 240 | } 241 | 242 | #tabstrip-4 { 243 | text-align: center; 244 | } 245 | 246 | #tabstrip .km-icon:after { 247 | font: 1.3em/1em "Kendo UI" !important; 248 | } 249 | 250 | .revenue:after { 251 | content: "\E08C"; 252 | } 253 | .spd:after { 254 | content: "\E04B"; 255 | } 256 | .spr:after { 257 | content: "\E050"; 258 | } 259 | .share:after { 260 | content: "\E04E"; 261 | } 262 | 263 | #tabstrip .k-tabstrip-items span { 264 | float: left; 265 | line-height: 1.3em; 266 | vertical-align: middle; 267 | } 268 | 269 | #tabstrip .k-tabstrip-items .d-none { 270 | margin-left: 4px; 271 | } 272 | 273 | .market-donut { 274 | display: inline-block; 275 | width: 170px; 276 | } 277 | 278 | #panelbar .k-content { 279 | padding: 1em; 280 | } 281 | 282 | #panelbar ul { 283 | margin-bottom: 10px; 284 | } 285 | 286 | #listview { 287 | list-style-type: none; 288 | padding: 0 0 15px; 289 | } 290 | 291 | #listview .k-listview-content { 292 | display: flex; 293 | flex-wrap: wrap; 294 | margin-left: 40px; 295 | padding-top: 15px; 296 | } 297 | 298 | .k-listview-item { 299 | margin-right: 40px; 300 | } 301 | 302 | #listview figure { 303 | border: 1px solid #e7e7e7; 304 | border-radius: 3px; 305 | padding: 5px; 306 | } 307 | 308 | figure h4 { 309 | font-size: 1.15em; 310 | } 311 | 312 | figure p.d-sm-none { 313 | min-height: 80px; 314 | } 315 | 316 | footer { 317 | text-align: right; 318 | font-size: 0.8571em; 319 | padding: 2em 0; 320 | } 321 | 322 | @media (max-width: 1360px) { 323 | .k-listview-content { 324 | justify-content: space-evenly; 325 | } 326 | } 327 | 328 | @media (max-width: 996px) and (min-width: 768px) { 329 | .header-description { 330 | padding-top: 0px; 331 | padding-bottom: 0px; 332 | font-size: 16px; 333 | } 334 | } 335 | 336 | @media (max-width: 768px) { 337 | .k-menu.k-menu-horizontal .k-item { 338 | float: none; 339 | } 340 | 341 | header .container { 342 | padding-right: 0; 343 | } 344 | 345 | header .container h1 { 346 | padding-top: 0; 347 | line-height: 50px; 348 | } 349 | 350 | header label { 351 | border-width: 1px 0 0 0; 352 | display: block; 353 | } 354 | 355 | #configurator-wrap { 356 | position: absolute; 357 | overflow: hidden; 358 | height: 260px; 359 | right: 0; 360 | top: 64px; 361 | z-index: 1000; 362 | padding: 0; 363 | width: 320px; 364 | } 365 | 366 | #configurator { 367 | background-color: #272727; 368 | position: absolute; 369 | width: 100%; 370 | margin: 0; 371 | } 372 | 373 | .header-description { 374 | font-size: 14px; 375 | } 376 | } 377 | 378 | @media (max-width: 768px) { 379 | .k-listview-content .img-fluid { 380 | max-width: 80vw; 381 | } 382 | 383 | .header-description { 384 | min-height: 56px; 385 | padding-top: 12px; 386 | } 387 | } 388 | 389 | .k-black body, 390 | .k-black .card, 391 | .k-black .card-header, 392 | .k-black .buttons-wrap { 393 | border-color: #444; 394 | background-color: #1e1e1e; 395 | color: #fff; 396 | } 397 | -------------------------------------------------------------------------------- /html/vendor/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f); 8 | if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d #mq-test-1 { width: 42px; }',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b