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