1<!doctype html> 2<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 3<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> 4<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> 5<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> 6<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]--> 7<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline --> 8<!--[if gt IE 9]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]--> 9<head> 10 <meta charset="utf-8"> 11 12 <!-- Use the .htaccess and remove these lines to avoid edge case issues. 13 More info: h5bp.com/b/378 --> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 15 16 <title>Gumby - A Flexible, Responsive CSS Framework - Powered by SASS</title> 17 <meta name="description" content="" /> 18 <meta name="keywords" content="" /> 19 <meta name="author" content="humans.txt"> 20 21 <link rel="shortcut icon" href="favicon.png" type="image/x-icon" /> 22 23 <!-- Facebook Metadata /--> 24 <meta property="fb:page_id" content="" /> 25 <meta property="og:image" content="" /> 26 <meta property="og:description" content=""/> 27 <meta property="og:title" content=""/> 28 29 <!-- Google+ Metadata /--> 30 <meta itemprop="name" content=""> 31 <meta itemprop="description" content=""> 32 <meta itemprop="image" content=""> 33 34 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> 35 36 <!-- We highly recommend you use SASS and write your custom styles in sass/_custom.scss. 37 However, there is a blank style.css in the css directory should you prefer --> 38 <link rel="stylesheet" href="css/gumby.css"> 39 <!-- <link rel="stylesheet" href="css/style.css"> --> 40 41 <script src="js/libs/modernizr-2.6.2.min.js"></script> 42</head> 43 44<style> 45 .btn,.drawer { margin-bottom:10px; } 46 .drawer { text-align: center; } 47 h1.lead { border-bottom: 1px dotted #ccc; margin-bottom: 30px; } 48 h4.lead { margin-bottom:10px; } 49 #icon_map ul li { font-size: 16px; } 50 .smallify { font-size: 13px; } 51 .modal h2, .modal .btn { margin: 5% 0 20px; } 52 .ttip.example { float: left; background: #eee; border: 1px dotted #ccc; padding: 20px; } 53</style> 54 55<body> 56 57 <div class="modal" id="modal1"> 58 <div class="content"> 59 <a class="close switch" gumby-trigger="|#modal1"><i class="icon-cancel" /></i></a> 60 <div class="row"> 61 <div class="ten columns centered text-center"> 62 <h2>This is a modal.</h2> 63 <p>Gumby modals are easy to make using Toggles & Switches. The <span class="label default">.modal</span> class already has the required styles which you can open and close using Toggles & Switches.</p> 64 </div> 65 </div> 66 </div> 67 </div> 68 69 <div class="navbar" id="nav1"> 70 <div class="row"> 71 <a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a> 72 <h1 class="four columns logo"> 73 <a href="#"> 74 <img src="img/gumby_mainlogo.png" gumby-retina /> 75 </a> 76 </h1> 77 <ul class="eight columns"> 78 <li><a href="http://digitalsurgeons.com">Features</a></li> 79 <li> 80 <a href="http://digitalsurgeons.com">Documentation</a> 81 <div class="dropdown"> 82 <ul> 83 <li><a href="http://digitalsurgeons.com">Item</a></li> 84 <li><a href="#">Item</a></li> 85 <li><a href="#">Item</a></li> 86 <li> 87 <a href="#">I HAVE STUFF NESTED UNDER ME</a> 88 <div class="dropdown"> 89 <ul> 90 <li><a href="http://digitalsurgeons.com">nested</a></li> 91 <li><a href="">nested</a></li> 92 <li><a href="">nested</a></li> 93 <li><a href="">nested</a></li> 94 <li><a href="">nested</a></li> 95 </ul> 96 </div> 97 </li> 98 <li><a href="#">Item</a></li> 99 <li><a href="#">Item</a></li> 100 <li><a href="#">Item</a></li> 101 <li><a href="#">Item</a></li> 102 <li><a href="#">Item</a></li> 103 <li><a href="#">Item</a></li> 104 <li><a href="#">Item</a></li> 105 </ul> 106 </div> 107 </li> 108 <li><a href="#">Customize</a></li> 109 <li class="field"><input class="search input" type="search" placeholder="Search" /></li> 110 </ul> 111 </div> 112 </div> 113 <div class="navbar row" id="nav2"> 114 <a class="toggle" gumby-trigger="#nav2 > ul" href="#"><i class="icon-menu"></i></a> 115 <h1 class="four columns logo"> 116 <a href="#"> 117 <img src="img/gumby_mainlogo.png" gumby-retina /> 118 </a> 119 </h1> 120 <ul class="eight columns"> 121 <li><a href="#">Features</a></li> 122 <li> 123 <a href="http://digitalsurgeons.com">Documentation</a> 124 <div class="dropdown"> 125 <ul> 126 <li><a href="#">Item</a></li> 127 <li><a href="#">Item</a></li> 128 <li><a href="#">Item</a></li> 129 <li><a href="#">Item</a></li> 130 <li><a href="#">Item</a></li> 131 </ul> 132 </div> 133 </li> 134 <li><a href="#">Customize</a></li> 135 <li> 136 <button class="medium pretty default btn"> 137 <a href="#">Download</a> 138 </button> 139 </li> 140 </ul> 141 </div> 142 143 <!-- container to normalize fixed navigation behavior when scrolling --> 144 <div class="navcontain"> 145 <div class="pretty navbar" gumby-fixed="top" id="nav3"> 146 <div class="row"> 147 <a class="toggle" gumby-trigger="#nav3 > .row > ul" href="#"><i class="icon-menu"></i></a> 148 <h1 class="four columns logo"> 149 <a href="#"> 150 <img src="img/gumby_mainlogo.png" gumby-retina /> 151 </a> 152 </h1> 153 <ul class="eight columns"> 154 <li><a href="#">Features</a></li> 155 <li> 156 <a href="#">Documentation</a> 157 <div class="dropdown"> 158 <ul> 159 <li><a href="#">Item</a></li> 160 <li><a href="#">Item</a></li> 161 <li><a href="#">Item</a></li> 162 <li><a href="#">Item</a></li> 163 <li><a href="#">Item</a></li> 164 </ul> 165 </div> 166 </li> 167 <li><a href="#">Customize</a></li> 168 <li class="field"><input class="search input" type="search" placeholder="Search" /></li> 169 </ul> 170 </div> 171 </div> 172 </div> 173 174 <div class="pretty navbar row" id="nav4"> 175 <a class="toggle" gumby-trigger="#nav4 > ul" href="#"><i class="icon-menu"></i></a> 176 <h1 class="four columns logo"> 177 <a href="#"> 178 <img src="img/gumby_mainlogo.png" gumby-retina /> 179 </a> 180 </h1> 181 <ul class="eight columns"> 182 <li><a href="#">About</a></li> 183 <li> 184 <a href="#">Documentation</a> 185 <div class="dropdown"> 186 <ul> 187 <li><a href="#">Item</a></li> 188 <li><a href="#">Item</a></li> 189 <li><a href="#">Item</a></li> 190 <li><a href="#">Item</a></li> 191 <li><a href="#">Item</a></li> 192 </ul> 193 </div> 194 </li> 195 <li><a href="#">Customize</a></li> 196 <li><a href="#">Contact</a></li> 197 </ul> 198 </div> 199 <div class="row"> 200 <h1 class="lead">Typography</h1> 201 <div class="row"> 202 <!-- Switch triggered when skiplink completes in main.js --> 203 <p><a href="#" id="skip-switch" class="skip switch" gumby-trigger="#drawer1" gumby-goto="#drawers" gumby-duration="500" gumby-offset="-130" gumby-update>Skip to drawers and open top one</a></p> 204 <h1>My Cool First Level Headline reaalllyyy long headline</h1> 205 <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p> 206 <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p> 207 <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p> 208 <h2>My Cool Second Level Headline</h2> 209 <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p> 210 <h3>My Cool Third Level Headline</h3> 211 <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p> 212 <h4>My Cool Fourth Level Headline</h4> 213 <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p> 214 <h5>My Cool Fifth Level Headline</h5> 215 <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p> 216 <h6>My Cool Sixth Level Headline</h6> 217 <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p> 218 </div> 219 <div class="row"> 220 <div class="four columns"> 221 <h4 class="lead">ul.disc</h4> 222 <ul class="disc"> 223 <li>List item</li> 224 <li>List item</li> 225 <li>List item</li> 226 <ul class="disc"> 227 <li>Nested item</li> 228 <li>Nested item</li> 229 </ul> 230 <li>List item</li> 231 <li>List item</li> 232 <li>List item</li> 233 <li>List item</li> 234 </ul> 235 </div> 236 <div class="four columns"> 237 <h4 class="lead">ul.circle</h4> 238 <ul class="circle"> 239 <li>List item</li> 240 <li>List item</li> 241 <li>List item</li> 242 <ul class="disc"> 243 <li>Nested item</li> 244 <li>Nested item</li> 245 </ul> 246 <li>List item</li> 247 <li>List item</li> 248 <li>List item</li> 249 <li>List item</li> 250 </ul> 251 </div> 252 <div class="four columns"> 253 <h4 class="lead">ul.square</h4> 254 <ul class="square"> 255 <li>List item</li> 256 <li>List item</li> 257 <li>List item</li> 258 <ul class="disc"> 259 <li>Nested item</li> 260 <li>Nested item</li> 261 </ul> 262 <li>List item</li> 263 <li>List item</li> 264 <li>List item</li> 265 <li>List item</li> 266 </ul> 267 </div> 268 </div> 269 <div class="row"> 270 <div class="four columns"> 271 <h4 class="lead">ol</h4> 272 <ol> 273 <li>List item</li> 274 <li>List item</li> 275 <li>List item</li> 276 <ul class="disc"> 277 <li>Nested item</li> 278 <li>Nested item</li> 279 </ul> 280 <li>List item</li> 281 <li>List item</li> 282 <li>List item</li> 283 <li>List item</li> 284 </ol> 285 </div> 286 <div class="eight columns"> 287 <h4 class="lead">Definition list</h4> 288 <dl> 289 <dt>Definition Term</dt> 290 <dd>Definition text, you can add as many of these as you need. The line-height matches paragraphs.</dd> 291 </dl> 292 </div> 293 </div> 294 295 </div> 296 <div class="row"> 297 <h1 class="lead">Buttons</h1> 298 <div class="row"> 299 <div class="four columns"> 300 <h4 class="lead">Sizes</h4> 301 <div class="xlarge btn default"><a href="#">Extra Large</a></div> 302 <div class="large btn default"><a href="#">Large</a></div> 303 <div class="medium btn default"><a href="#">Medium</a></div> 304 <div class="small btn default"><a href="#">Small</a></div> 305 <div class="medium oval btn default"><a href="#">Oval</a></div> 306 <div class="medium metro rounded btn default"><a href="#">Rounded</a></div> 307 <div class="medium squared btn default"><a href="#">Squared</a></div> 308 <div class="medium btn pill-left default"><a href="#">Pill Left</a></div> 309 <div class="medium btn pill-right default"><a href="#">Pill Right</a></div> 310 </div> 311 <div class="four columns"> 312 <h4 class="lead">Metro Style</h4> 313 <div class="medium primary btn"><a href="#">Primary</a></div> 314 <div class="medium secondary btn"><a href="#">Secondary</a></div> 315 <div class="medium default btn"><a href="#">Default</a></div> 316 <div class="medium info btn"><a href="#">Info</a></div> 317 <div class="medium danger btn"><a href="#">Danger</a></div> 318 <div class="medium warning btn"><a href="#">Warning</a></div> 319 <div class="medium success btn"><a href="#">Success</a></div> 320 <div class="medium info btn icon-left icon-mail"><a href="#">Icon Left</a></div> 321 <div class="medium default btn icon-right icon-camera"><a href="#">Icon Right</a></div> 322 <div class="medium default btn"><input type="submit" value="Submit" /></div> 323 <div class="medium info btn"><button>Button</button></div> 324 </div> 325 <div class="four columns pretty"> 326 <h4 class="lead">Pretty Style</h4> 327 <div class="pretty medium primary btn"><a href="#">Primary</a></div> 328 <div class="pretty medium secondary btn"><a href="#">Secondary</a></div> 329 <div class="pretty medium default btn"><a href="#">Default</a></div> 330 <div class="pretty medium info btn"><a href="#">Info</a></div> 331 <div class="pretty medium danger btn"><a href="#">Danger</a></div> 332 <div class="pretty medium warning btn"><a href="#">Warning</a></div> 333 <div class="pretty medium success btn"><a href="#">Success</a></div> 334 <div class="medium info btn icon-left icon-user"><a href="#">Icon Left</a></div> 335 <div class="medium default btn icon-right icon-camera"><a href="#">Icon Right</a></div> 336 <div class="pretty medium default btn"><input type="submit" value="Submit" /></div> 337 <div class="pretty medium info btn"><button>Button</button></div> 338 </div> 339 </div> 340 </div> 341 <div class="row"> 342 <h1 class="lead">Indicators</h1> 343 <div class="row"> 344 <div class="four columns"> 345 <h4 class="lead">Badges</h4> 346 <li class="primary badge">2</li> 347 <li class="secondary badge">2</li> 348 <li class="default badge">2</li> 349 <li class="info badge">2</li> 350 <li class="danger badge">2</li> 351 <li class="warning badge">2</li> 352 <li class="success badge">2</li> 353 <li class="light badge">2</li> 354 <li class="dark badge">2</li> 355 </div> 356 <div class="four columns"> 357 <h4 class="lead">Labels</h4> 358 <li class="primary label">Primary</li> 359 <li class="secondary label">Secondary</li> 360 <li class="default label">Default</li> 361 <li class="info label">Info</li> 362 <li class="danger label">Important</li> 363 <li class="warning label">Warning</li> 364 <li class="success label">Success</li> 365 <li class="light label">Light</li> 366 <li class="dark label">Dark</li> 367 </div> 368 <div class="four columns"> 369 <h4 class="lead">Alerts</h4> 370 <li class="primary alert">KHAAAAAAAAAAAAAAANNNN!!!!</li> 371 <li class="secondary alert">We are the Silence. And Silence will fall!</li> 372 <li class="default alert">Fez's are cool.</li> 373 <li class="info alert">Don't blink. Blink and you're dead.</li> 374 <li class="danger alert">I’m sorry, Dave. I’m afraid I can’t do that.</li> 375 <li class="warning alert">My spidey sense is tingling...</li> 376 <li class="success alert">Great Success! Very nice!</li> 377 </div> 378 </div> 379 </div> 380 <div class="row"> 381 <h1 class="lead">Forms</h1> 382 <div class="row"> 383 <div class="four columns"> 384 <h4 class="lead">Text Inputs</h4> 385 <form> 386 <ul> 387 <li class="field"><input class="text input" type="text" placeholder="Text input" /></li> 388 <li class="field"><input class="email input" type="email" placeholder="Email input" /></li> 389 <li class="field"><input class="password input" type="password" placeholder="Password input" /></li> 390 <li class="field"><input class="phone input" type="tel" placeholder="Telephone Number" /></li> 391 <li class="field"><input class="numeric input" type="number" placeholder="Numeric input" /></li> 392 <li class="field"><input class="search input" type="search" placeholder="Search input" /></li> 393 <li class="field"><textarea class="input textarea" placeholder="Textarea" rows="3"></textarea></li> 394 <li class="field success"><input class="text input" type="text" placeholder="Text input" /></li> 395 <li class="field warning"><input class="email input" type="email" placeholder="Email input" /></li> 396 <li class="field danger"><input class="password input" type="password" placeholder="Password input" /></li> 397 </ul> 398 </form> 399 </div> 400 <div class="four columns"> 401 <h4 class="lead">Conjoined Inputs</h4> 402 <form> 403 <ul> 404 <li class="prepend field"> 405 <span class="adjoined">@</span> 406 <input class="xwide text input" type="text" placeholder="Text input" /> 407 </li> 408 <li class="append field"> 409 <input class="xwide email input" type="email" placeholder="Email input" /> 410 <span class="adjoined">@</span> 411 </li> 412 <li class="prepend append field"> 413 <span class="adjoined">$</span> 414 <input class="wide text input" type="text" placeholder="Text input" /> 415 <span class="adjoined">.00</span> 416 </li> 417 <li class="prepend field"> 418 <div class="medium primary btn"><a href="#">Go</a></div> 419 <input class="wide text input" type="text" placeholder="Text input" /> 420 </li> 421 <li class="append field"> 422 <input class="wide email input" type="email" placeholder="Email input" /> 423 <div class="medium primary btn"><a href="#">Go</a></div> 424 </li> 425 <li class="prepend append field"> 426 <span class="adjoined">$</span> 427 <input class="normal text input" type="text" placeholder="Text input" /> 428 <div class="medium primary btn"><a href="#">Go</a></div> 429 </li> 430 <li class="prepend append double field"> 431 <input class="text input" type="text" placeholder="Text input" /> 432 <input class="password input" type="password" placeholder="Password input" /> 433 </li> 434 </ul> 435 </form> 436 </div> 437 <div class="four columns"> 438 <h4 class="lead">Input Sizes</h4> 439 <form> 440 <ul> 441 <li class="field"><input class="xxwide text input" type="text" placeholder="xxwide input" /></li> 442 <li class="field"> 443 <input class="xwide email input" type="email" placeholder="xwide input" /> 444 <input class="xnarrow text input" type="text" placeholder="xnarrow input" /> 445 </li> 446 <li class="field"> 447 <input class="wide text input" type="password" placeholder="wide input" /> 448 <input class="narrow text input" type="text" placeholder="narrow input" /> 449 </li> 450 <li class="field"> 451 <input class="normal text input" type="text" placeholder="normal input" /> 452 <input class="normal text input" type="text" placeholder="normal input" /> 453 </li> 454 <li class="field"> 455 <input class="narrow text input" type="text" placeholder="narrow input" /> 456 <input class="wide text input" type="text" placeholder="wide input" /> 457 </li> 458 <li class="field"> 459 <input class="xnarrow text input" type="text" placeholder="xnarrow input" /> 460 <input class="xwide text input" type="text" placeholder="xwide input" /> 461 </li> 462 </ul> 463 <fieldset> 464 <legend>Fieldset with legend</legend> 465 <ul> 466 <li class="field"> 467 <label class="inline" for="text1">Label 1</label> 468 <input class="wide text input" name="text1" type="text" placeholder="wide input" /> 469 </li> 470 <li class="field"> 471 <label class="inline" for="text2">Label 2</label> 472 <input class="wide password input" name="text2" type="password" placeholder="wide input" /> 473 </li> 474 </ul> 475 </fieldset> 476 </form> 477 </div> 478 </div> 479 <div class="row"> 480 <div class="four columns"> 481 <h4 class="lead">Picker (<select>)</h4> 482 <form> 483 <ul> 484 <li class="field"> 485 <div class="picker"> 486 <select> 487 <option value="#" disabled>Favorite Dalek phrase...</option> 488 <option>EXTERMINATE</option> 489 <option>EXTERMINATE</option> 490 <option>EXTERMINATE</option> 491 <option>EXTERMINATE</option> 492 <option>EXTERMINATE</option> 493 <option>EXTERMINATE</option> 494 <option>EXTERMINATE</option> 495 <option>EXTERMINATE</option> 496 </select> 497 </div> 498 </li> 499 </ul> 500 </form> 501 </div> 502 <div class="four columns"> 503 <h4 class="lead">Radio Buttons</h4> 504 <form> 505 <ul> 506 <li class="field"> 507 <label class="radio checked" for="radio1"> 508 <input name="radio" value="1" type="radio" id="radio1" checked="checked"> 509 <span></span> Radio Button 1 510 </label> 511 <label class="radio" for="radio2"> 512 <input name="radio" value="2" type="radio" id="radio2"> 513 <span></span> Radio Button 2 514 </label> 515 <label class="radio" for="radio3"> 516 <input name="radio" value="3" type="radio" id="radio3"> 517 <span></span> Radio Button 3 518 </label> 519 </li> 520 </ul> 521 </form> 522 </div> 523 <div class="four columns"> 524 <h4 class="lead">Check Boxes</h4> 525 <form> 526 <ul> 527 <li class="field"> 528 <label class="checkbox" for="checkbox1"> 529 <input name="checkbox1" type="checkbox" id="checkbox1"> 530 <span></span> Checkbox 1 531 </label> 532 <label class="checkbox" for="checkbox2"> 533 <input name="checkbox2" type="checkbox" id="checkbox2"> 534 <span></span> Checkbox 2 535 </label> 536 <label class="checkbox checked" for="checkbox3"> 537 <input name="checkbox3" checked="checked" type="checkbox" id="checkbox3"> 538 <span></span> Checkbox 3 539 </label> 540 </li> 541 </ul> 542 </form> 543 </div> 544 </div> 545 </div> 546 <div class="row"> 547 <h1 class="lead">Tables</h1> 548 <div class="row"> 549 <div class="six columns"> 550 <table> 551 <caption>Default Table</caption> 552 <thead> 553 <tr> 554 <th>Header</th> 555 <th>Header</th> 556 </tr> 557 </thead> 558 <tbody> 559 <tr> 560 <td>Lorem ipsum</td> 561 <td>This is a slightly longer block of content to show how the cells will wrap when necessary</td> 562 </tr> 563 </tbody> 564 </table> 565 </div> 566 <div class="six columns"> 567 <table class="rounded"> 568 <caption>Rounded Table</caption> 569 <thead> 570 <tr> 571 <th>Header</th> 572 <th>Header</th> 573 </tr> 574 </thead> 575 <tbody> 576 <tr> 577 <td>Lorem ipsum</td> 578 <td>This is a slightly longer block of content to show how the cells will wrap when necessary</td> 579 </tr> 580 </tbody> 581 </table> 582 </div> 583 </div> 584 <div class="row"> 585 <div class="twelve columns"> 586 <table class="striped rounded"> 587 <caption>Striped and Rounded Table</caption> 588 <thead> 589 <tr> 590 <th>Table Header</th> 591 <th>Table Header</th> 592 </tr> 593 </thead> 594 <tbody> 595 <tr> 596 <td>Lorem ipsum</td> 597 <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et dignissim magna, id molestie dui.</td> 598 </tr> 599 <tr> 600 <td>Lorem ipsum</td> 601 <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et dignissim magna, id molestie dui.</td> 602 </tr> 603 <tr> 604 <td>Lorem ipsum</td> 605 <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et dignissim magna, id molestie dui.</td> 606 </tr> 607 <tr> 608 <td>Lorem ipsum</td> 609 <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et dignissim magna, id molestie dui.</td> 610 </tr> 611 </tbody> 612 </table> 613 </div> 614 </div> 615 </div> 616 <div class="row"> 617 <h1 class="lead">Tabs</h1> 618 <div class="row"> 619 <div class="six columns"> 620 <section class="tabs" id="tabs"> 621 <h4 class="lead">Basic Tabs</h4> 622 <ul class="tab-nav"> 623 <li><a href="#">Tab 1</a></li> 624 <li class="active"><a href="#">Tab 2</a></li> 625 <li><a href="#">Tab 3</a></li> 626 </ul> 627 <div class="tab-content"> 628 <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 629 </div> 630 <div class="tab-content active"> 631 <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 632 </div> 633 <div class="tab-content"> 634 <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 635 <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.</p> 636 <div class="medium primary btn pull_left"><a href="">My cool button</a></div> 637 </div> 638 </section> 639 </div> 640 <div class="six columns"> 641 <section class="pill tabs"> 642 <h4 class="lead">Pill Tabs</h4> 643 <ul class="tab-nav"> 644 <li class="active"><a href="#">Tab 1</a></li> 645 <li><a href="#">Tab 2</a></li> 646 <li><a href="#">Tab 3</a></li> 647 </ul> 648 <div class="tab-content active"> 649 <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 650 <div class="medium primary btn pull_left"><a href="">My cool button</a></div> 651 </div> 652 <div class="tab-content"> 653 <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 654 </div> 655 <div class="tab-content"> 656 <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 657 <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 658 </div> 659 </section> 660 </div> 661 </div> 662 <div class="row"> 663 <div class="eight columns"> 664 <section class="vertical tabs"> 665 <h4 class="lead">Vertical Tabs</h4> 666 <ul class="tab-nav four columns"> 667 <li><a href="#">Tab 1</a></li> 668 <li class="active"><a href="#">Tab 2</a></li> 669 <li><a href="#">Tab 3</a></li> 670 </ul> 671 <div class="tab-content eight columns"> 672 <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 673 </div> 674 <div class="tab-content eight columns active"> 675 <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 676 <div class="row"> 677 <div class="medium primary btn six columns centered"><a href="">My cool button</a></div> 678 </div> 679 </div> 680 <div class="tab-content eight columns"> 681 <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 682 <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.</p> 683 </div> 684 </section> 685 </div> 686 </div> 687 </div> 688 <div class="row" id="drawers"> 689 <h1 class="lead">Drawers</h1> 690 <p class="btn medium primary"> 691 <a href="#" class="switch" gumby-trigger="#drawer1">Open Top Drawer</a> 692 </p> 693 <p class="btn medium primary"> 694 <a href="#" class="toggle" gumby-trigger="#drawer2|#drawer3">Toggle Bottom Drawers</a> 695 </p> 696 <p class="btn medium primary"> 697 <a href="#" class="switch" gumby-trigger="|.drawer">Close All Drawers</a> 698 </p> 699 <div class="row"> 700 <div class="twelve columns"> 701 <div class="drawer" id="drawer1"> 702 <h2><a href="http://www.digitalsurgeons.com">Digital Surgeons</a></h2> 703 </div> 704 </div> 705 </div> 706 <div class="row"> 707 <div class="six columns"> 708 <div class="drawer" id="drawer2"> 709 <h2><a href="http://www.digitalsurgeons.com">Digital Surgeons</a></h2> 710 </div> 711 </div> 712 <div class="six columns"> 713 <div class="drawer" id="drawer3"> 714 <h2><a href="http://www.digitalsurgeons.com">Digital Surgeons</a></h2> 715 </div> 716 </div> 717 </div> 718 </div> 719 <div class="row" id="modals"> 720 <h1 class="lead">Modals</h1> 721 <p class="btn primary medium"><a href="#" class="switch" gumby-trigger="#modal1">Open Modal</a></p> 722 </div> 723 <div class="row"> 724 <h1 class="lead">Skip Links</h1> 725 <div class="row"> 726 <div class="twelve columns"> 727 <div id="skiplink_1" style="position: relative;"> 728 <h4>First</h4> 729 <p class="skiplink medium info"><a href="#" gumby-goto="#skiplink_2" gumby-offset="-60">Skip to second content</a></p> 730 <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. <a href="#" class="skip" gumby-goto="#skiplink_2" gumby-offset="-60">Unstyled skip link</a>. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.</p> 731 </div> 732 <div id="skiplink_2" style="position: relative;"> 733 <h4>Second</h4> 734 <p class="skiplink medium primary"><a href="#" gumby-goto="#skiplink_3" gumby-duration="2000" gumby-offset="-60">Skip to third content</a></p> 735 <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.</p> 736 </div> 737 <div id="skiplink_3" style="position: relative;"> 738 <h4>Third</h4> 739 <p class="skiplink medium secondary pretty"><a href="#" gumby-goto="#skiplink_1" gumby-offset="-60">Go back to first content</a></p> 740 <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. <a href="#" class="skip" gumby-goto="#skiplink_1" gumby-offset="-60">Unstyled skip link</a>. Vestibulum non ante.</p> 741 742 <p class="skiplink medium default"> 743 <a href="#" gumby-goto="top"><i class="icon-up-open-big"></i> Top of page</a> 744 </p> 745 746 <p class="skiplink medium default"> 747 <a href="#" gumby-goto="240"><i class="icon-up-open-big"></i> Skip to 240px</a> 748 </p> 749 </div> 750 </div> 751 </div> 752 </div> 753 <div class="row"> 754 <h1 class="lead">Images</h1> 755 <div class="row"> 756 <div class="twelve columns"> 757 <div class="row"> 758 <div class="five columns image circle"> 759 <img src="img/img_silence_demo.jpg"/> 760 </div> 761 <div class="three columns image circle"> 762 <img src="img/img_silence_demo.jpg"/> 763 </div> 764 <div class="two columns image circle"> 765 <img src="img/img_silence_demo.jpg"/> 766 </div> 767 <div class="one columns image circle"> 768 <img src="img/img_silence_demo.jpg"/> 769 </div> 770 </div> 771 <div class="row"> 772 <div class="four columns image rounded"> 773 <img src="img/img_silence_demo.jpg"/> 774 </div> 775 <div class="four columns image photo"> 776 <img src="img/img_silence_demo.jpg"/> 777 </div> 778 <div class="four columns image polaroid photo"> 779 <img src="img/img_silence_demo.jpg"/> 780 </div> 781 </div> 782 </div> 783 </div> 784 </div> 785 <div class="row" id="tiles"> 786 <h1 class="lead">Tiles</h1> 787 <div class="row"> 788 <div class="four columns"> 789 <h4 class="lead">2-up</h4> 790 <ul class="two_up tiles"> 791 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 792 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 793 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 794 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 795 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 796 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 797 </ul> 798 </div> 799 <div class="four columns"> 800 <h4 class="lead">3-up</h4> 801 <ul class="three_up tiles"> 802 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 803 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 804 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 805 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 806 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 807 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 808 </ul> 809 </div> 810 <div class="four columns"> 811 <h4 class="lead">4-up</h4> 812 <ul class="four_up tiles"> 813 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 814 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 815 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 816 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 817 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 818 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 819 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 820 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 821 </ul> 822 </div> 823 </div> 824 <div class="row"> 825 <div class="four columns"> 826 <h4 class="lead">5-up</h4> 827 <ul class="five_up tiles"> 828 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 829 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 830 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 831 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 832 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 833 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 834 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 835 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 836 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 837 <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li> 838 </ul> 839 </div> 840 </div> 841 </div> 842 <div class="row" id="tooltips"> 843 <h1 class="lead">Tooltips</h1> 844 <div class="row"> 845 <article class="three columns"> 846 <div class="image photo ttip" data-tooltip="Silence will fall."> 847 <img src="img/img_silence_demo.jpg" alt=""> 848 </div> 849 </article> 850 <article class="nine columns"> 851 <h3>Mauris <a href="#" class="ttip" data-tooltip="Tooltip on a link">eleifend</a> est et turpis.</h3> 852 <p>Proin elit arcu, <em class="ttip" data-tooltip="Another tooltip!">rutrum</em> commodo, vehicula tempus, commodo a, risus.</p> 853 </div> 854 </div> 855 <div class="row" id="icon_map"> 856 <div class="row"> 857 <h1 class="lead">Icon Map</h1> 858 <p>All icons are (class="icon-*")</p> 859 </div> 860 <ul class="row"> 861 <li class="two columns"><i class="icon-note"></i> note</li> 862 <li class="two columns"><i class="icon-note-beamed"></i> note-beamed</li> 863 <li class="two columns"><i class="icon-music"></i> music</li> 864 <li class="two columns"><i class="icon-search"></i> search</li> 865 <li class="two columns"><i class="icon-flashlight"></i> flashlight</li> 866 <li class="two columns"><i class="icon-mail"></i> mail</li> 867 </ul> 868 <ul class="row"> 869 <li class="two columns"><i class="icon-heart"></i> heart</li> 870 <li class="two columns"><i class="icon-heart-empty"></i> heart-empty</li> 871 <li class="two columns"><i class="icon-star"></i> star</li> 872 <li class="two columns"><i class="icon-star-empty"></i> star-empty</li> 873 <li class="two columns"><i class="icon-user"></i> user</li> 874 <li class="two columns"><i class="icon-users"></i> users</li> 875 </ul> 876 <ul class="row"> 877 <li class="two columns"><i class="icon-user-add"></i> user-add</li> 878 <li class="two columns"><i class="icon-video"></i> video</li> 879 <li class="two columns"><i class="icon-picture"></i> picture</li> 880 <li class="two columns"><i class="icon-camera"></i> camera</li> 881 <li class="two columns"><i class="icon-layout"></i> layout</li> 882 <li class="two columns"><i class="icon-menu"></i> menu</li> 883 </ul> 884 <ul class="row"> 885 <li class="two columns"><i class="icon-check"></i> check</li> 886 <li class="two columns"><i class="icon-cancel"></i> cancel</li> 887 <li class="two columns"><i class="icon-cancel-circled"></i> cancel-circled</li> 888 <li class="two columns"><i class="icon-cancel-squared"></i> cancel-square</li> 889 <li class="two columns"><i class="icon-plus"></i> plus</li> 890 <li class="two columns"><i class="icon-plus-circled"></i> plus-circled</li> 891 </ul> 892 <ul class="row"> 893 <li class="two columns"><i class="icon-plus-squared"></i> plus-squared</li> 894 <li class="two columns"><i class="icon-minus"></i> minus</li> 895 <li class="two columns"><i class="icon-minus-circled"></i> minus-circled</li> 896 <li class="two columns"><i class="icon-minus-squared"></i> minus-square</li> 897 <li class="two columns"><i class="icon-help"></i> help</li> 898 <li class="two columns"><i class="icon-help-circled"></i> help-circled</li> 899 </ul> 900 <ul class="row"> 901 <li class="two columns"><i class="icon-info"></i> info</li> 902 <li class="two columns"><i class="icon-info-circled"></i> info-circled</li> 903 <li class="two columns"><i class="icon-back"></i> back</li> 904 <li class="two columns"><i class="icon-home"></i> home</li> 905 <li class="two columns"><i class="icon-link"></i> link</li> 906 <li class="two columns"><i class="icon-attach"></i> attach</li> 907 </ul> 908 <ul class="row"> 909 <li class="two columns"><i class="icon-lock"></i> lock</li> 910 <li class="two columns"><i class="icon-lock-open"></i> lock-open</li> 911 <li class="two columns"><i class="icon-eye"></i> eye</li> 912 <li class="two columns"><i class="icon-tag"></i> tag</li> 913 <li class="two columns"><i class="icon-bookmark"></i> bookmark</li> 914 <li class="two columns"><i class="icon-bookmarks"></i> bookmarks</li> 915 </ul> 916 <ul class="row"> 917 <li class="two columns"><i class="icon-flag"></i> flag</li> 918 <li class="two columns"><i class="icon-thumbs-up"></i> thumbs-up</li> 919 <li class="two columns"><i class="icon-thumbs-down"></i> thumbs-down</li> 920 <li class="two columns"><i class="icon-download"></i> download</li> 921 <li class="two columns"><i class="icon-upload"></i> upload</li> 922 <li class="two columns"><i class="icon-upload-cloud"></i> upload-cloud</li> 923 </ul> 924 <ul class="row"> 925 <li class="two columns"><i class="icon-reply"></i> reply</li> 926 <li class="two columns"><i class="icon-reply-all"></i> reply-all</li> 927 <li class="two columns"><i class="icon-forward"></i> forward</li> 928 <li class="two columns"><i class="icon-quote"></i> quote</li> 929 <li class="two columns"><i class="icon-code"></i> code</li> 930 <li class="two columns"><i class="icon-export"></i> export</li> 931 </ul> 932 <ul class="row"> 933 <li class="two columns"><i class="icon-pencil"></i> pencil</li> 934 <li class="two columns"><i class="icon-feather"></i> feather</li> 935 <li class="two columns"><i class="icon-print"></i> print</li> 936 <li class="two columns"><i class="icon-retweet"></i> retweet</li> 937 <li class="two columns"><i class="icon-keyboard"></i> keyboard</li> 938 <li class="two columns"><i class="icon-comment"></i> comment</li> 939 </ul> 940 <ul class="row"> 941 <li class="two columns"><i class="icon-chat"></i> chat</li> 942 <li class="two columns"><i class="icon-bell"></i> bell</li> 943 <li class="two columns"><i class="icon-attention"></i> attention</li> 944 <li class="two columns"><i class="icon-alert"></i>alert</li> 945 <li class="two columns"><i class="icon-vcard"></i> vcard</li> 946 <li class="two columns"><i class="icon-address"></i> address</li> 947 </ul> 948 <ul class="row"> 949 <li class="two columns"><i class="icon-location"></i> location</li> 950 <li class="two columns"><i class="icon-map"></i> map</li> 951 <li class="two columns"><i class="icon-direction"></i> direction</li> 952 <li class="two columns"><i class="icon-compass"></i> compass</li> 953 <li class="two columns"><i class="icon-cup"></i> cup</li> 954 <li class="two columns"><i class="icon-trash"></i> trash</li> 955 </ul> 956 <ul class="row"> 957 <li class="two columns"><i class="icon-doc"></i> doc</li> 958 <li class="two columns"><i class="icon-docs"></i> docs</li> 959 <li class="two columns"><i class="icon-doc-landscape"></i> <span class="smallify">doc-landscape</span></li> 960 <li class="two columns"><i class="icon-doc-text"></i> doc-text</li> 961 <li class="two columns"><i class="icon-doc-text-inv"></i> doc-text-inv</li> 962 <li class="two columns"><i class="icon-newspaper"></i> newspaper</li> 963 </ul> 964 <ul class="row"> 965 <li class="two columns"><i class="icon-book"></i> book</li> 966 <li class="two columns"><i class="icon-book-open"></i> book-open</li> 967 <li class="two columns"><i class="icon-folder"></i> folder</li> 968 <li class="two columns"><i class="icon-archive"></i> archive</li> 969 <li class="two columns"><i class="icon-box"></i> box</li> 970 <li class="two columns"><i class="icon-rss"></i> rss</li> 971 </ul> 972 <ul class="row"> 973 <li class="two columns"><i class="icon-phone"></i> phone</li> 974 <li class="two columns"><i class="icon-cog"></i> cog</li> 975 <li class="two columns"><i class="icon-tools"></i> tools</li> 976 <li class="two columns"><i class="icon-share"></i> share</li> 977 <li class="two columns"><i class="icon-shareable"></i> shareable</li> 978 <li class="two columns"><i class="icon-basket"></i> basket</li> 979 </ul> 980 <ul class="row"> 981 <li class="two columns"><i class="icon-bag"></i> bag</li> 982 <li class="two columns"><i class="icon-calendar"></i> calendar</li> 983 <li class="two columns"><i class="icon-login"></i> login</li> 984 <li class="two columns"><i class="icon-logout"></i> logout</li> 985 <li class="two columns"><i class="icon-mic"></i> mic</li> 986 <li class="two columns"><i class="icon-mute"></i> mute</li> 987 </ul> 988 <ul class="row"> 989 <li class="two columns"><i class="icon-sound"></i> sound</li> 990 <li class="two columns"><i class="icon-volume"></i> volume</li> 991 <li class="two columns"><i class="icon-clock"></i> clock</li> 992 <li class="two columns"><i class="icon-hourglass"></i> hourglass</li> 993 <li class="two columns"><i class="icon-lamp"></i> lamp</li> 994 <li class="two columns"><i class="icon-light-down"></i> light-down</li> 995 </ul> 996 <ul class="row"> 997 <li class="two columns"><i class="icon-light-up"></i> light-up</li> 998 <li class="two columns"><i class="icon-adjust"></i> adjust</li> 999 <li class="two columns"><i class="icon-block"></i> block</li> 1000 <li class="two columns"><i class="icon-resize-full"></i> resize-full</li> 1001 <li class="two columns"><i class="icon-resize-small"></i> resize-small</li> 1002 <li class="two columns"><i class="icon-popup"></i> popup</li> 1003 </ul> 1004 <ul class="row"> 1005 <li class="two columns"><i class="icon-publish"></i> publish</li> 1006 <li class="two columns"><i class="icon-window"></i> window</li> 1007 <li class="two columns"><i class="icon-arrow-combo"></i> arrow-combo</li> 1008 <li class="two columns"><i class="icon-down-circled"></i> down-circled</li> 1009 <li class="two columns"><i class="icon-left-circled"></i> left-circled</li> 1010 <li class="two columns"><i class="icon-right-circled"></i> right-circled</li> 1011 </ul> 1012 <ul class="row"> 1013 <li class="two columns"><i class="icon-up-circled"></i> up-circled</li> 1014 <li class="two columns"><i class="icon-up-open"></i> up-open</li> 1015 <li class="two columns"><i class="icon-down-open"></i> down-open</li> 1016 <li class="two columns"><i class="icon-left-open"></i> left-open</li> 1017 <li class="two columns"><i class="icon-right-open"></i> right-open</li> 1018 <li class="two columns"><i class="icon-up-open-mini"></i> up-open-mini</li> 1019 </ul> 1020 <ul class="row"> 1021 <li class="two columns"><i class="icon-down-open-mini"></i> <span class="smallify">down-open-mini</span></li> 1022 <li class="two columns"><i class="icon-left-open-mini"></i> left-open-mini</li> 1023 <li class="two columns"><i class="icon-right-open-mini"></i> <span class="smallify">right-open-mini</span></li> 1024 <li class="two columns"><i class="icon-up-open-big"></i> up-open-big</li> 1025 <li class="two columns"><i class="icon-down-open-big"></i> <span class="smallify">down-open-big</span></li> 1026 <li class="two columns"><i class="icon-left-open-big"></i> left-open-big</li> 1027 </ul> 1028 <ul class="row"> 1029 <li class="two columns"><i class="icon-right-open-big"></i> <span class="smallify">right-open-big</span></li> 1030 <li class="two columns"><i class="icon-down"></i> down</li> 1031 <li class="two columns"><i class="icon-arrow-left"></i> arrow-left</li> 1032 <li class="two columns"><i class="icon-arrow-right"></i> arrow-right</li> 1033 <li class="two columns"><i class="icon-up"></i> up</li> 1034 <li class="two columns"><i class="icon-up-dir"></i> up-dir</li> 1035 </ul> 1036 <ul class="row"> 1037 <li class="two columns"><i class="icon-down-dir"></i> down-dir</li> 1038 <li class="two columns"><i class="icon-left-dir"></i> left-dir</li> 1039 <li class="two columns"><i class="icon-right-dir"></i> right-dir</li> 1040 <li class="two columns"><i class="icon-up-bold"></i> up-bold</li> 1041 <li class="two columns"><i class="icon-down-bold"></i> down-bold</li> 1042 <li class="two columns"><i class="icon-left-bold"></i> left-bold</li> 1043 </ul> 1044 <ul class="row"> 1045 <li class="two columns"><i class="icon-right-bold"></i> right-bold</li> 1046 <li class="two columns"><i class="icon-up-thin"></i> up-thin</li> 1047 <li class="two columns"><i class="icon-down-thin"></i> down-thin</li> 1048 <li class="two columns"><i class="icon-left-thin"></i> left-thin</li> 1049 <li class="two columns"><i class="icon-right-thin"></i> right-thin</li> 1050 <li class="two columns"><i class="icon-ccw"></i> ccw</li> 1051 </ul> 1052 <ul class="row"> 1053 <li class="two columns"><i class="icon-cw"></i> cw</li> 1054 <li class="two columns"><i class="icon-arrows-ccw"></i> arrows-ccw</li> 1055 <li class="two columns"><i class="icon-level-down"></i> level-down</li> 1056 <li class="two columns"><i class="icon-level-up"></i> level-up</li> 1057 <li class="two columns"><i class="icon-shuffle"></i> shuffle</li> 1058 <li class="two columns"><i class="icon-loop"></i> loop</li> 1059 </ul> 1060 <ul class="row"> 1061 <li class="two columns"><i class="icon-switch"></i> switch</li> 1062 <li class="two columns"><i class="icon-play"></i> play</li> 1063 <li class="two columns"><i class="icon-stop"></i> stop</li> 1064 <li class="two columns"><i class="icon-pause"></i> pause</li> 1065 <li class="two columns"><i class="icon-record"></i> record</li> 1066 <li class="two columns"><i class="icon-to-end"></i> to-end</li> 1067 </ul> 1068 1069 <ul class="row"> 1070 <li class="two columns"><i class="icon-to-start"></i> to-start</li> 1071 <li class="two columns"><i class="icon-fast-forward"></i> fast-forward</li> 1072 <li class="two columns"><i class="icon-fast-backward"></i> fast-backward</li> 1073 <li class="two columns"><i class="icon-progress-0"></i> progress-0</li> 1074 <li class="two columns"><i class="icon-progress-1"></i> progress-1</li> 1075 <li class="two columns"><i class="icon-progress-2"></i> progress-2</li> 1076 </ul> 1077 <ul class="row"> 1078 <li class="two columns"><i class="icon-progress-3"></i> progress-3</li> 1079 <li class="two columns"><i class="icon-target"></i> target</li> 1080 <li class="two columns"><i class="icon-palette"></i> palette</li> 1081 <li class="two columns"><i class="icon-list"></i> list</li> 1082 <li class="two columns"><i class="icon-list-add"></i> list-add</li> 1083 <li class="two columns"><i class="icon-signal"></i> signal</li> 1084 </ul> 1085 <ul class="row"> 1086 <li class="two columns"><i class="icon-trophy"></i> trophy</li> 1087 <li class="two columns"><i class="icon-battery"></i> battery</li> 1088 <li class="two columns"><i class="icon-back-in-time"></i> back-in-time</li> 1089 <li class="two columns"><i class="icon-monitor"></i> monitor</li> 1090 <li class="two columns"><i class="icon-mobile"></i> mobile</li> 1091 <li class="two columns"><i class="icon-network"></i> network</li> 1092 </ul> 1093 <ul class="row"> 1094 <li class="two columns"><i class="icon-cd"></i> cd</li> 1095 <li class="two columns"><i class="icon-inbox"></i> inbox</li> 1096 <li class="two columns"><i class="icon-install"></i> install</li> 1097 <li class="two columns"><i class="icon-globe"></i> globe</li> 1098 <li class="two columns"><i class="icon-cloud"></i> cloud</li> 1099 <li class="two columns"><i class="icon-cloud-thunder"></i> <span class="smallify">cloud-thunder</span></li> 1100 </ul> 1101 <ul class="row"> 1102 <li class="two columns"><i class="icon-flash"></i> flash</li> 1103 <li class="two columns"><i class="icon-moon"></i> moon</li> 1104 <li class="two columns"><i class="icon-flight"></i> flight</li> 1105 <li class="two columns"><i class="icon-paper-plane"></i> paper-plane</li> 1106 <li class="two columns"><i class="icon-leaf"></i> leaf</li> 1107 <li class="two columns"><i class="icon-lifebuoy"></i> lifebuoy</li> 1108 </ul> 1109 <ul class="row"> 1110 <li class="two columns"><i class="icon-mouse"></i> mouse</li> 1111 <li class="two columns"><i class="icon-briefcase"></i> briefcase</li> 1112 <li class="two columns"><i class="icon-suitcase"></i> suitcase</li> 1113 <li class="two columns"><i class="icon-dot"></i> dot</li> 1114 <li class="two columns"><i class="icon-dot-2"></i> dot-2</li> 1115 <li class="two columns"><i class="icon-dot-3"></i> dot-3</li> 1116 </ul> 1117 <ul class="row"> 1118 <li class="two columns"><i class="icon-brush"></i> brush</li> 1119 <li class="two columns"><i class="icon-magnet"></i> magnet</li> 1120 <li class="two columns"><i class="icon-infinity"></i> infinity</li> 1121 <li class="two columns"><i class="icon-erase"></i> erase</li> 1122 <li class="two columns"><i class="icon-chart-pie"></i> chart-pie</li> 1123 <li class="two columns"><i class="icon-chart-line"></i> chart-line</li> 1124 </ul> 1125 <ul class="row"> 1126 <li class="two columns"><i class="icon-chart-bar"></i> chart-bar</li> 1127 <li class="two columns"><i class="icon-chart-area"></i> chart-area</li> 1128 <li class="two columns"><i class="icon-tape"></i> tape</li> 1129 <li class="two columns"><i class="icon-graduation-cap"></i> <span class="smallify">graduation-cap</span></li> 1130 <li class="two columns"><i class="icon-language"></i> language</li> 1131 <li class="two columns"><i class="icon-ticket"></i> ticket</li> 1132 </ul> 1133 <ul class="row"> 1134 <li class="two columns"><i class="icon-water"></i> water</li> 1135 <li class="two columns"><i class="icon-droplet"></i> droplet</li> 1136 <li class="two columns"><i class="icon-air"></i> air</li> 1137 <li class="two columns"><i class="icon-credit-card"></i> credit-card</li> 1138 <li class="two columns"><i class="icon-floppy"></i> floppy</li> 1139 <li class="two columns"><i class="icon-clipboard"></i> clipboard</li> 1140 </ul> 1141 <ul class="row"> 1142 <li class="two columns"><i class="icon-megaphone"></i> megaphone</li> 1143 <li class="two columns"><i class="icon-database"></i> database</li> 1144 <li class="two columns"><i class="icon-drive"></i> drive</li> 1145 <li class="two columns"><i class="icon-bucket"></i> bucket</li> 1146 <li class="two columns"><i class="icon-thermometer"></i> thermometer</li> 1147 <li class="two columns"><i class="icon-key"></i> key</li> 1148 </ul> 1149 <ul class="row"> 1150 <li class="two columns"><i class="icon-flow-cascade"></i> flow-cascade</li> 1151 <li class="two columns"><i class="icon-flow-branch"></i> flow-branch</li> 1152 <li class="two columns"><i class="icon-flow-tree"></i> flow-tree</li> 1153 <li class="two columns"><i class="icon-flow-line"></i> flow-line</li> 1154 <li class="two columns"><i class="icon-flow-parallel"></i> flow-parallel</li> 1155 <li class="two columns"><i class="icon-rocket"></i> rocket</li> 1156 </ul> 1157 1158 <ul class="row"> 1159 <li class="two columns"><i class="icon-gauge"></i> gauge</li> 1160 <li class="two columns"><i class="icon-traffic-cone"></i> traffic-cone</li> 1161 <li class="two columns"><i class="icon-cc"></i> cc</li> 1162 <li class="two columns"><i class="icon-cc-by"></i> cc-by</li> 1163 <li class="two columns"><i class="icon-cc-nc"></i> cc-nc</li> 1164 <li class="two columns"><i class="icon-cc-nc-eu"></i> cc-nc-eu</li> 1165 </ul> 1166 <ul class="row"> 1167 <li class="two columns"><i class="icon-cc-nc-jp"></i> cc-nc-jp</li> 1168 <li class="two columns"><i class="icon-cc-sa"></i> cc-sa</li> 1169 <li class="two columns"><i class="icon-cc-nd"></i> cc-nd</li> 1170 <li class="two columns"><i class="icon-cc-pd"></i> cc-pd</li> 1171 <li class="two columns"><i class="icon-cc-zero"></i> cc-zero</li> 1172 <li class="two columns"><i class="icon-cc-share"></i> cc-share</li> 1173 </ul> 1174 <ul class="row"> 1175 <li class="two columns"><i class="icon-cc-remix"></i> cc-remix</li> 1176 <li class="two columns"><i class="icon-github"></i> github</li> 1177 <li class="two columns"><i class="icon-github-circled"></i> github-circled</li> 1178 <li class="two columns"><i class="icon-flickr"></i> flickr</li> 1179 <li class="two columns"><i class="icon-flickr-circled"></i> flickr-circled</li> 1180 <li class="two columns"><i class="icon-vimeo"></i> vimeo</li> 1181 </ul> 1182 <ul class="row"> 1183 <li class="two columns"><i class="icon-vimeo-circled"></i> vimeo-circled</li> 1184 <li class="two columns"><i class="icon-gplus"></i> gplus</li> 1185 <li class="two columns"><i class="icon-gplus-circled"></i> gplus-circled</li> 1186 <li class="two columns"><i class="icon-pinterest"></i> pinterest</li> 1187 <li class="two columns"><i class="icon-pinterest-circled"></i> <span class="smallify">pinterest-circled</span></li> 1188 <li class="two columns"><i class="icon-tumblr"></i> tumblr</li> 1189 </ul> 1190 <ul class="row"> 1191 <li class="two columns"><i class="icon-tumblr-circled"></i> <span class="smallify">tumblr-circled</span></li> 1192 <li class="two columns"><i class="icon-linkedin"></i> linkedin</li> 1193 <li class="two columns"><i class="icon-linkedin-circled"></i> <span class="smallify">linkedin-circled</span></li> 1194 <li class="two columns"><i class="icon-dribbble"></i> dribbble</li> 1195 <li class="two columns"><i class="icon-dribbble-circled"></i> <span class="smallify">dribbble-circled</span></li> 1196 <li class="two columns"><i class="icon-facebook"></i> facebook</li> 1197 </ul> 1198 <ul class="row"> 1199 <li class="two columns"><i class="icon-facebook-circled"></i> <span class="smallify">facebook-circled</span></li> 1200 <li class="two columns"><i class="icon-facebook-squared"></i> <span style="font-size: 12px">facebook-squared</span></li> 1201 <li class="two columns"><i class="icon-twitter"></i> twitter</li> 1202 <li class="two columns"><i class="icon-twitter-circled"></i> twitter-circled</li> 1203 <li class="two columns"><i class="icon-lastfm"></i> lastfm</li> 1204 <li class="two columns"><i class="icon-lastfm-circled"></i> lastfm-circled</li> 1205 </ul> 1206 <ul class="row"> 1207 <li class="two columns"><i class="icon-rdio"></i> rdio</li> 1208 <li class="two columns"><i class="icon-rdio-circled"></i> rdio-circled</li> 1209 <li class="two columns"><i class="icon-spotify"></i> spotify</li> 1210 <li class="two columns"><i class="icon-spotify-circled"></i> spotify-circled</li> 1211 <li class="two columns"><i class="icon-instagram"></i> instagram</li> 1212 <li class="two columns"><i class="icon-qq"></i> qq</li> 1213 </ul> 1214 <ul class="row"> 1215 <li class="two columns"><i class="icon-dropbox"></i> dropbox</li> 1216 <li class="two columns"><i class="icon-evernote"></i> evernote</li> 1217 <li class="two columns"><i class="icon-skype"></i> skype</li> 1218 <li class="two columns"><i class="icon-skype-circled"></i> skype-circled</li> 1219 <li class="two columns"><i class="icon-flattr"></i> flattr</li> 1220 <li class="two columns"><i class="icon-renren"></i> renren</li> 1221 </ul> 1222 <ul class="row"> 1223 <li class="two columns"><i class="icon-sina-weibo"></i> sina-weibo</li> 1224 <li class="two columns"><i class="icon-paypal"></i> paypal</li> 1225 <li class="two columns"><i class="icon-picasa"></i> picasa</li> 1226 <li class="two columns"><i class="icon-soundcloud"></i> soundcloud</li> 1227 <li class="two columns"><i class="icon-mixi"></i> mixi</li> 1228 <li class="two columns"><i class="icon-behance"></i> behance</li> 1229 </ul> 1230 <ul class="row"> 1231 <li class="two columns"><i class="icon-google-circles"></i> google-circles</li> 1232 <li class="two columns"><i class="icon-vkontakte"></i> vkontakte</li> 1233 <li class="two columns"><i class="icon-smashing"></i> smashing</li> 1234 <li class="two columns"><i class="icon-sweden"></i> sweden</li> 1235 <li class="two columns"><i class="icon-db-shape"></i> db-shape</li> 1236 <li class="two columns"><i class="icon-logo-db"></i> logo-db</li> 1237 </ul> 1238 </div> 1239 1240 1241 <!-- Grab Google CDN's jQuery, fall back to local if offline --> 1242 <!-- 2.0 for modern browsers, 1.10 for .oldie --> 1243 <script> 1244 var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g)); 1245 if(!oldieCheck) { 1246 document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>'); 1247 } else { 1248 document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>'); 1249 } 1250 </script> 1251 <script> 1252 if(!window.jQuery) { 1253 if(!oldieCheck) { 1254 document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>'); 1255 } else { 1256 document.write('<script src="js/libs/jquery-1.10.1.min.js"><\/script>'); 1257 } 1258 } 1259 </script> 1260 1261 <!-- 1262 Include gumby.js followed by UI modules followed by gumby.init.js 1263 Or concatenate and minify into a single file --> 1264 <script gumby-touch="js/libs" src="js/libs/gumby.js"></script> 1265 <script src="js/libs/ui/gumby.retina.js"></script> 1266 <script src="js/libs/ui/gumby.fixed.js"></script> 1267 <script src="js/libs/ui/gumby.skiplink.js"></script> 1268 <script src="js/libs/ui/gumby.toggleswitch.js"></script> 1269 <script src="js/libs/ui/gumby.checkbox.js"></script> 1270 <script src="js/libs/ui/gumby.radiobtn.js"></script> 1271 <script src="js/libs/ui/gumby.tabs.js"></script> 1272 <script src="js/libs/ui/gumby.navbar.js"></script> 1273 <script src="js/libs/ui/jquery.validation.js"></script> 1274 <script src="js/libs/gumby.init.js"></script> 1275 1276 <!-- 1277 Google's recommended deferred loading of JS 1278 gumby.min.js contains gumby.js, all UI modules and gumby.init.js 1279 1280 Note: If you opt to use this method of defered loading, 1281 ensure that any javascript essential to the initial 1282 display of the page is included separately in a normal 1283 script tag. 1284 1285 <script type="text/javascript"> 1286 function downloadJSAtOnload() { 1287 var element = document.createElement("script"); 1288 element.src = "js/libs/gumby.min.js"; 1289 document.body.appendChild(element); 1290 } 1291 if (window.addEventListener) 1292 window.addEventListener("load", downloadJSAtOnload, false); 1293 else if (window.attachEvent) 1294 window.attachEvent("onload", downloadJSAtOnload); 1295 else window.onload = downloadJSAtOnload; 1296 </script> --> 1297 1298 <script src="js/plugins.js"></script> 1299 <script src="js/main.js"></script> 1300 1301 <!-- Change UA-XXXXX-X to be your site's ID --> 1302 <!--<script> 1303 window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']]; 1304 Modernizr.load({ 1305 load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js' 1306 }); 1307 </script>--> 1308 1309 <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6. 1310 chromium.org/developers/how-tos/chrome-frame-getting-started --> 1311 <!--[if lt IE 7 ]> 1312 <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script> 1313 <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script> 1314 <![endif]--> 1315 1316 </body> 1317</html> 1318
