siftal
Version:
CSS Framework, not bad ;)
1,376 lines (1,374 loc) • 217 kB
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Siftal</title>
<meta charset="utf-8">
<meta name="description" content="Siftal, a simple CSS framework with usefull tools for Ermile projects">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0 maximum-scale=1.2, minimal-ui"/>
<link rel="shortcut icon" href="../dist/images/siftal/siftal.ico">
<link rel="icon" href="../dist/images/siftal/siftal.png" type="image/png">
<link rel="stylesheet" href="../dist/css/siftal.css">
<style>
body{background-color:#eee;}
</style>
<style>#content h2{margin:40px 0 20px;font-weight:700;font-size:38px;line-height:32px;color:#fb565e}#content h3{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercase;font-weight:500}.small{font-size:14px;color:#a5adb4;}.small a{color:#a5adb4;}.small a:hover{color:#fb565e}.glyphs.character-mapping{margin:0 0 20px 0;padding:20px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;-webkit-border-radius:3px;border-radius:3px;}.glyphs.character-mapping li{margin:0 30px 20px 0;display:inline-block;width:90px}.glyphs.character-mapping .icon{margin:10px 0 10px 15px;padding:15px;position:relative;width:55px;height:55px;color:#162a36 !important;overflow:hidden;-webkit-border-radius:3px;border-radius:3px;font-size:32px;}.glyphs.character-mapping .icon svg{fill:#000}.glyphs.character-mapping input{margin:0;padding:5px 0;line-height:12px;font-size:12px;display:block;width:100%;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;text-align:center;outline:0;}.glyphs.character-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}.glyphs.character-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}.glyphs.css-mapping{margin:0 0 60px 0;padding:30px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;-webkit-border-radius:3px;border-radius:3px;}.glyphs.css-mapping li{margin:0 10px 20px 0;padding:0;display:inline-block;overflow:hidden}.glyphs.css-mapping .icon{margin:0;margin-right:10px;padding:13px;height:50px;width:50px;color:#162a36 !important;overflow:hidden;float:left;font-size:24px}.glyphs.css-mapping input{margin:0;margin-top:5px;padding:8px;line-height:16px;font-size:16px;display:block;width:150px;height:40px;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;background:#fff;outline:0;float:right;}.glyphs.css-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}.glyphs.css-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}</style>
</head>
<body class="ltr">
<div class="cn">
<div class="tbox">
<h2>siftal</h2>
<p class="small">This was created with <a href="http://fontastic.me/">Fontastic</a></p>
</div>
<h3>CSS mapping</h3>
<ul class="glyphs css-mapping txtC">
<li>
<div class="icon sf-angle-down"></div>
<input type="text" readonly="readonly" value="angle-down">
</li>
<li>
<div class="icon sf-angle-left"></div>
<input type="text" readonly="readonly" value="angle-left">
</li>
<li>
<div class="icon sf-angle-right"></div>
<input type="text" readonly="readonly" value="angle-right">
</li>
<li>
<div class="icon sf-angle-up"></div>
<input type="text" readonly="readonly" value="angle-up">
</li>
<li>
<div class="icon sf-bell"></div>
<input type="text" readonly="readonly" value="bell">
</li>
<li>
<div class="icon sf-bell-o"></div>
<input type="text" readonly="readonly" value="bell-o">
</li>
<li>
<div class="icon sf-bell-slash"></div>
<input type="text" readonly="readonly" value="bell-slash">
</li>
<li>
<div class="icon sf-bell-slash-o"></div>
<input type="text" readonly="readonly" value="bell-slash-o">
</li>
<li>
<div class="icon sf-bug"></div>
<input type="text" readonly="readonly" value="bug">
</li>
<li>
<div class="icon sf-bolt"></div>
<input type="text" readonly="readonly" value="bolt">
</li>
<li>
<div class="icon sf-check"></div>
<input type="text" readonly="readonly" value="check">
</li>
<li>
<div class="icon sf-chain-broken"></div>
<input type="text" readonly="readonly" value="chain-broken">
</li>
<li>
<div class="icon sf-cc-paypal"></div>
<input type="text" readonly="readonly" value="cc-paypal">
</li>
<li>
<div class="icon sf-cc-visa"></div>
<input type="text" readonly="readonly" value="cc-visa">
</li>
<li>
<div class="icon sf-cloud-download"></div>
<input type="text" readonly="readonly" value="cloud-download">
</li>
<li>
<div class="icon sf-cloud-upload"></div>
<input type="text" readonly="readonly" value="cloud-upload">
</li>
<li>
<div class="icon sf-cloud"></div>
<input type="text" readonly="readonly" value="cloud">
</li>
<li>
<div class="icon sf-comment"></div>
<input type="text" readonly="readonly" value="comment">
</li>
<li>
<div class="icon sf-comment-o"></div>
<input type="text" readonly="readonly" value="comment-o">
</li>
<li>
<div class="icon sf-commenting"></div>
<input type="text" readonly="readonly" value="commenting">
</li>
<li>
<div class="icon sf-clone"></div>
<input type="text" readonly="readonly" value="clone">
</li>
<li>
<div class="icon sf-commenting-o"></div>
<input type="text" readonly="readonly" value="commenting-o">
</li>
<li>
<div class="icon sf-comments"></div>
<input type="text" readonly="readonly" value="comments">
</li>
<li>
<div class="icon sf-comments-o"></div>
<input type="text" readonly="readonly" value="comments-o">
</li>
<li>
<div class="icon sf-cog"></div>
<input type="text" readonly="readonly" value="cog">
</li>
<li>
<div class="icon sf-desktop"></div>
<input type="text" readonly="readonly" value="desktop">
</li>
<li>
<div class="icon sf-envelope-o"></div>
<input type="text" readonly="readonly" value="envelope-o">
</li>
<li>
<div class="icon sf-envelope"></div>
<input type="text" readonly="readonly" value="envelope">
</li>
<li>
<div class="icon sf-ellipsis-v"></div>
<input type="text" readonly="readonly" value="ellipsis-v">
</li>
<li>
<div class="icon sf-ellipsis-h"></div>
<input type="text" readonly="readonly" value="ellipsis-h">
</li>
<li>
<div class="icon sf-crop"></div>
<input type="text" readonly="readonly" value="crop">
</li>
<li>
<div class="icon sf-crosshairs"></div>
<input type="text" readonly="readonly" value="crosshairs">
</li>
<li>
<div class="icon sf-bar-chart"></div>
<input type="text" readonly="readonly" value="bar-chart">
</li>
<li>
<div class="icon sf-balance-scale"></div>
<input type="text" readonly="readonly" value="balance-scale">
</li>
<li>
<div class="icon sf-arrows-h"></div>
<input type="text" readonly="readonly" value="arrows-h">
</li>
<li>
<div class="icon sf-arrows-v"></div>
<input type="text" readonly="readonly" value="arrows-v">
</li>
<li>
<div class="icon sf-arrows-alt"></div>
<input type="text" readonly="readonly" value="arrows-alt">
</li>
<li>
<div class="icon sf-arrows"></div>
<input type="text" readonly="readonly" value="arrows">
</li>
<li>
<div class="icon sf-android"></div>
<input type="text" readonly="readonly" value="android">
</li>
<li>
<div class="icon sf-align-right"></div>
<input type="text" readonly="readonly" value="align-right">
</li>
<li>
<div class="icon sf-align-left"></div>
<input type="text" readonly="readonly" value="align-left">
</li>
<li>
<div class="icon sf-align-justify"></div>
<input type="text" readonly="readonly" value="align-justify">
</li>
<li>
<div class="icon sf-align-center"></div>
<input type="text" readonly="readonly" value="align-center">
</li>
<li>
<div class="icon sf-bullhorn"></div>
<input type="text" readonly="readonly" value="bullhorn">
</li>
<li>
<div class="icon sf-asterisk"></div>
<input type="text" readonly="readonly" value="asterisk">
</li>
<li>
<div class="icon sf-bookmark-o"></div>
<input type="text" readonly="readonly" value="bookmark-o">
</li>
<li>
<div class="icon sf-bookmark"></div>
<input type="text" readonly="readonly" value="bookmark">
</li>
<li>
<div class="icon sf-caret-right"></div>
<input type="text" readonly="readonly" value="caret-right">
</li>
<li>
<div class="icon sf-caret-left"></div>
<input type="text" readonly="readonly" value="caret-left">
</li>
<li>
<div class="icon sf-caret-down"></div>
<input type="text" readonly="readonly" value="caret-down">
</li>
<li>
<div class="icon sf-caret-up"></div>
<input type="text" readonly="readonly" value="caret-up">
</li>
<li>
<div class="icon sf-file-code-o"></div>
<input type="text" readonly="readonly" value="file-code-o">
</li>
<li>
<div class="icon sf-file-audio-o"></div>
<input type="text" readonly="readonly" value="file-audio-o">
</li>
<li>
<div class="icon sf-file-archive-o"></div>
<input type="text" readonly="readonly" value="file-archive-o">
</li>
<li>
<div class="icon sf-file-excel-o"></div>
<input type="text" readonly="readonly" value="file-excel-o">
</li>
<li>
<div class="icon sf-file"></div>
<input type="text" readonly="readonly" value="file">
</li>
<li>
<div class="icon sf-file-pdf-o"></div>
<input type="text" readonly="readonly" value="file-pdf-o">
</li>
<li>
<div class="icon sf-file-powerpoint-o"></div>
<input type="text" readonly="readonly" value="file-powerpoint-o">
</li>
<li>
<div class="icon sf-file-text"></div>
<input type="text" readonly="readonly" value="file-text">
</li>
<li>
<div class="icon sf-file-text-o"></div>
<input type="text" readonly="readonly" value="file-text-o">
</li>
<li>
<div class="icon sf-file-word-o"></div>
<input type="text" readonly="readonly" value="file-word-o">
</li>
<li>
<div class="icon sf-files-o"></div>
<input type="text" readonly="readonly" value="files-o">
</li>
<li>
<div class="icon sf-film"></div>
<input type="text" readonly="readonly" value="film">
</li>
<li>
<div class="icon sf-file-video-o"></div>
<input type="text" readonly="readonly" value="file-video-o">
</li>
<li>
<div class="icon sf-floppy-o"></div>
<input type="text" readonly="readonly" value="floppy-o">
</li>
<li>
<div class="icon sf-file-image-o"></div>
<input type="text" readonly="readonly" value="file-image-o">
</li>
<li>
<div class="icon sf-file-o"></div>
<input type="text" readonly="readonly" value="file-o">
</li>
<li>
<div class="icon sf-flag"></div>
<input type="text" readonly="readonly" value="flag">
</li>
<li>
<div class="icon sf-flag-checkered"></div>
<input type="text" readonly="readonly" value="flag-checkered">
</li>
<li>
<div class="icon sf-flag-o"></div>
<input type="text" readonly="readonly" value="flag-o">
</li>
<li>
<div class="icon sf-gavel"></div>
<input type="text" readonly="readonly" value="gavel">
</li>
<li>
<div class="icon sf-heart"></div>
<input type="text" readonly="readonly" value="heart">
</li>
<li>
<div class="icon sf-heart-o"></div>
<input type="text" readonly="readonly" value="heart-o">
</li>
<li>
<div class="icon sf-history"></div>
<input type="text" readonly="readonly" value="history">
</li>
<li>
<div class="icon sf-home"></div>
<input type="text" readonly="readonly" value="home">
</li>
<li>
<div class="icon sf-hourglass"></div>
<input type="text" readonly="readonly" value="hourglass">
</li>
<li>
<div class="icon sf-hourglass-end"></div>
<input type="text" readonly="readonly" value="hourglass-end">
</li>
<li>
<div class="icon sf-hourglass-half"></div>
<input type="text" readonly="readonly" value="hourglass-half">
</li>
<li>
<div class="icon sf-hourglass-o"></div>
<input type="text" readonly="readonly" value="hourglass-o">
</li>
<li>
<div class="icon sf-info"></div>
<input type="text" readonly="readonly" value="info">
</li>
<li>
<div class="icon sf-industry"></div>
<input type="text" readonly="readonly" value="industry">
</li>
<li>
<div class="icon sf-graduation-cap"></div>
<input type="text" readonly="readonly" value="graduation-cap">
</li>
<li>
<div class="icon sf-globe"></div>
<input type="text" readonly="readonly" value="globe">
</li>
<li>
<div class="icon sf-glass"></div>
<input type="text" readonly="readonly" value="glass">
</li>
<li>
<div class="icon sf-line-chart"></div>
<input type="text" readonly="readonly" value="line-chart">
</li>
<li>
<div class="icon sf-github-square"></div>
<input type="text" readonly="readonly" value="github-square">
</li>
<li>
<div class="icon sf-github-alt"></div>
<input type="text" readonly="readonly" value="github-alt">
</li>
<li>
<div class="icon sf-github"></div>
<input type="text" readonly="readonly" value="github">
</li>
<li>
<div class="icon sf-language"></div>
<input type="text" readonly="readonly" value="language">
</li>
<li>
<div class="icon sf-laptop"></div>
<input type="text" readonly="readonly" value="laptop">
</li>
<li>
<div class="icon sf-quote-left"></div>
<input type="text" readonly="readonly" value="quote-left">
</li>
<li>
<div class="icon sf-quote-right"></div>
<input type="text" readonly="readonly" value="quote-right">
</li>
<li>
<div class="icon sf-spinner"></div>
<input type="text" readonly="readonly" value="spinner">
</li>
<li>
<div class="icon sf-star"></div>
<input type="text" readonly="readonly" value="star">
</li>
<li>
<div class="icon sf-star-half"></div>
<input type="text" readonly="readonly" value="star-half">
</li>
<li>
<div class="icon sf-star-half-o"></div>
<input type="text" readonly="readonly" value="star-half-o">
</li>
<li>
<div class="icon sf-star-o"></div>
<input type="text" readonly="readonly" value="star-o">
</li>
<li>
<div class="icon sf-sort-amount-asc"></div>
<input type="text" readonly="readonly" value="sort-amount-asc">
</li>
<li>
<div class="icon sf-sort-alpha-desc"></div>
<input type="text" readonly="readonly" value="sort-alpha-desc">
</li>
<li>
<div class="icon sf-sort-alpha-asc"></div>
<input type="text" readonly="readonly" value="sort-alpha-asc">
</li>
<li>
<div class="icon sf-sort-amount-desc"></div>
<input type="text" readonly="readonly" value="sort-amount-desc">
</li>
<li>
<div class="icon sf-sort-numeric-desc"></div>
<input type="text" readonly="readonly" value="sort-numeric-desc">
</li>
<li>
<div class="icon sf-sort-numeric-asc"></div>
<input type="text" readonly="readonly" value="sort-numeric-asc">
</li>
<li>
<div class="icon sf-rss"></div>
<input type="text" readonly="readonly" value="rss">
</li>
<li>
<div class="icon sf-windows"></div>
<input type="text" readonly="readonly" value="windows">
</li>
<li>
<div class="icon sf-unlock"></div>
<input type="text" readonly="readonly" value="unlock">
</li>
<li>
<div class="icon sf-unlock-alt"></div>
<input type="text" readonly="readonly" value="unlock-alt">
</li>
<li>
<div class="icon sf-youtube-play"></div>
<input type="text" readonly="readonly" value="youtube-play">
</li>
<li>
<div class="icon sf-user-plus"></div>
<input type="text" readonly="readonly" value="user-plus">
</li>
<li>
<div class="icon sf-user"></div>
<input type="text" readonly="readonly" value="user">
</li>
<li>
<div class="icon sf-user-md"></div>
<input type="text" readonly="readonly" value="user-md">
</li>
<li>
<div class="icon sf-user-secret"></div>
<input type="text" readonly="readonly" value="user-secret">
</li>
<li>
<div class="icon sf-users"></div>
<input type="text" readonly="readonly" value="users">
</li>
<li>
<div class="icon sf-user-times"></div>
<input type="text" readonly="readonly" value="user-times">
</li>
<li>
<div class="icon sf-volume-up"></div>
<input type="text" readonly="readonly" value="volume-up">
</li>
<li>
<div class="icon sf-volume-off"></div>
<input type="text" readonly="readonly" value="volume-off">
</li>
<li>
<div class="icon sf-volume-down"></div>
<input type="text" readonly="readonly" value="volume-down">
</li>
<li>
<div class="icon sf-wrench"></div>
<input type="text" readonly="readonly" value="wrench">
</li>
<li>
<div class="icon sf-thumbs-down"></div>
<input type="text" readonly="readonly" value="thumbs-down">
</li>
<li>
<div class="icon sf-thumbs-o-down"></div>
<input type="text" readonly="readonly" value="thumbs-o-down">
</li>
<li>
<div class="icon sf-thumbs-o-up"></div>
<input type="text" readonly="readonly" value="thumbs-o-up">
</li>
<li>
<div class="icon sf-thumbs-up"></div>
<input type="text" readonly="readonly" value="thumbs-up">
</li>
<li>
<div class="icon sf-thumb-tack"></div>
<input type="text" readonly="readonly" value="thumb-tack">
</li>
<li>
<div class="icon sf-trello"></div>
<input type="text" readonly="readonly" value="trello">
</li>
<li>
<div class="icon sf-tachometer"></div>
<input type="text" readonly="readonly" value="tachometer">
</li>
<li>
<div class="icon sf-recycle"></div>
<input type="text" readonly="readonly" value="recycle">
</li>
<li>
<div class="icon sf-graph-bar"></div>
<input type="text" readonly="readonly" value="graph-bar">
</li>
<li>
<div class="icon sf-graph-horizontal"></div>
<input type="text" readonly="readonly" value="graph-horizontal">
</li>
<li>
<div class="icon sf-check-1"></div>
<input type="text" readonly="readonly" value="check-1">
</li>
<li>
<div class="icon sf-monitor"></div>
<input type="text" readonly="readonly" value="monitor">
</li>
<li>
<div class="icon sf-wrench-1"></div>
<input type="text" readonly="readonly" value="wrench-1">
</li>
<li>
<div class="icon sf-widget"></div>
<input type="text" readonly="readonly" value="widget">
</li>
<li>
<div class="icon sf-thumbnails"></div>
<input type="text" readonly="readonly" value="thumbnails">
</li>
<li>
<div class="icon sf-save"></div>
<input type="text" readonly="readonly" value="save">
</li>
<li>
<div class="icon sf-chart-pie"></div>
<input type="text" readonly="readonly" value="chart-pie">
</li>
<li>
<div class="icon sf-chart-line"></div>
<input type="text" readonly="readonly" value="chart-line">
</li>
<li>
<div class="icon sf-chart-bar"></div>
<input type="text" readonly="readonly" value="chart-bar">
</li>
<li>
<div class="icon sf-chart-area"></div>
<input type="text" readonly="readonly" value="chart-area">
</li>
<li>
<div class="icon sf-chat"></div>
<input type="text" readonly="readonly" value="chat">
</li>
<li>
<div class="icon sf-flow-tree"></div>
<input type="text" readonly="readonly" value="flow-tree">
</li>
<li>
<div class="icon sf-gauge"></div>
<input type="text" readonly="readonly" value="gauge">
</li>
<li>
<div class="icon sf-flight"></div>
<input type="text" readonly="readonly" value="flight">
</li>
<li>
<div class="icon sf-graph"></div>
<input type="text" readonly="readonly" value="graph">
</li>
<li>
<div class="icon sf-grid"></div>
<input type="text" readonly="readonly" value="grid">
</li>
<li>
<div class="icon sf-dzone"></div>
<input type="text" readonly="readonly" value="dzone">
</li>
<li>
<div class="icon sf-enter"></div>
<input type="text" readonly="readonly" value="enter">
</li>
<li>
<div class="icon sf-pinboard"></div>
<input type="text" readonly="readonly" value="pinboard">
</li>
<li>
<div class="icon sf-share"></div>
<input type="text" readonly="readonly" value="share">
</li>
<li>
<div class="icon sf-out"></div>
<input type="text" readonly="readonly" value="out">
</li>
<li>
<div class="icon sf-signout"></div>
<input type="text" readonly="readonly" value="signout">
</li>
<li>
<div class="icon sf-sign-out"></div>
<input type="text" readonly="readonly" value="sign-out">
</li>
<li>
<div class="icon sf-lock"></div>
<input type="text" readonly="readonly" value="lock">
</li>
<li>
<div class="icon sf-info-circle"></div>
<input type="text" readonly="readonly" value="info-circle">
</li>
<li>
<div class="icon sf-question"></div>
<input type="text" readonly="readonly" value="question">
</li>
<li>
<div class="icon sf-question-circle"></div>
<input type="text" readonly="readonly" value="question-circle">
</li>
<li>
<div class="icon sf-plus-circle"></div>
<input type="text" readonly="readonly" value="plus-circle">
</li>
<li>
<div class="icon sf-plus"></div>
<input type="text" readonly="readonly" value="plus">
</li>
<li>
<div class="icon sf-search"></div>
<input type="text" readonly="readonly" value="search">
</li>
<li>
<div class="icon sf-times-circle"></div>
<input type="text" readonly="readonly" value="times-circle">
</li>
<li>
<div class="icon sf-times"></div>
<input type="text" readonly="readonly" value="times">
</li>
<li>
<div class="icon sf-filter"></div>
<input type="text" readonly="readonly" value="filter">
</li>
<li>
<div class="icon sf-clipboard"></div>
<input type="text" readonly="readonly" value="clipboard">
</li>
<li>
<div class="icon sf-at"></div>
<input type="text" readonly="readonly" value="at">
</li>
<li>
<div class="icon sf-instagram"></div>
<input type="text" readonly="readonly" value="instagram">
</li>
<li>
<div class="icon sf-archive"></div>
<input type="text" readonly="readonly" value="archive">
</li>
<li>
<div class="icon sf-print"></div>
<input type="text" readonly="readonly" value="print">
</li>
<li>
<div class="icon sf-tags"></div>
<input type="text" readonly="readonly" value="tags">
</li>
<li>
<div class="icon sf-tag"></div>
<input type="text" readonly="readonly" value="tag">
</li>
<li>
<div class="icon sf-bars"></div>
<input type="text" readonly="readonly" value="bars">
</li>
<li>
<div class="icon sf-cogs"></div>
<input type="text" readonly="readonly" value="cogs">
</li>
<li>
<div class="icon sf-tasks"></div>
<input type="text" readonly="readonly" value="tasks">
</li>
<li>
<div class="icon sf-analytics-chart-graph"></div>
<input type="text" readonly="readonly" value="analytics-chart-graph">
</li>
<li>
<div class="icon sf-chart"></div>
<input type="text" readonly="readonly" value="chart">
</li>
<li>
<div class="icon sf-database"></div>
<input type="text" readonly="readonly" value="database">
</li>
<li>
<div class="icon sf-whatsapp"></div>
<input type="text" readonly="readonly" value="whatsapp">
</li>
<li>
<div class="icon sf-linkedin-square"></div>
<input type="text" readonly="readonly" value="linkedin-square">
</li>
<li>
<div class="icon sf-linkedin"></div>
<input type="text" readonly="readonly" value="linkedin">
</li>
<li>
<div class="icon sf-twitter-square"></div>
<input type="text" readonly="readonly" value="twitter-square">
</li>
<li>
<div class="icon sf-twitter"></div>
<input type="text" readonly="readonly" value="twitter">
</li>
<li>
<div class="icon sf-retweet"></div>
<input type="text" readonly="readonly" value="retweet">
</li>
<li>
<div class="icon sf-refresh"></div>
<input type="text" readonly="readonly" value="refresh">
</li>
<li>
<div class="icon sf-load-c"></div>
<input type="text" readonly="readonly" value="load-c">
</li>
<li>
<div class="icon sf-trophy"></div>
<input type="text" readonly="readonly" value="trophy">
</li>
<li>
<div class="icon sf-ribbon-b"></div>
<input type="text" readonly="readonly" value="ribbon-b">
</li>
<li>
<div class="icon sf-ribbon-a"></div>
<input type="text" readonly="readonly" value="ribbon-a">
</li>
<li>
<div class="icon sf-edit-write"></div>
<input type="text" readonly="readonly" value="edit-write">
</li>
<li>
<div class="icon sf-building"></div>
<input type="text" readonly="readonly" value="building">
</li>
<li>
<div class="icon sf-pencil-square-o"></div>
<input type="text" readonly="readonly" value="pencil-square-o">
</li>
<li>
<div class="icon sf-pencil-square"></div>
<input type="text" readonly="readonly" value="pencil-square">
</li>
<li>
<div class="icon sf-pencil"></div>
<input type="text" readonly="readonly" value="pencil">
</li>
<li>
<div class="icon sf-bold"></div>
<input type="text" readonly="readonly" value="bold">
</li>
<li>
<div class="icon sf-crop-1"></div>
<input type="text" readonly="readonly" value="crop-1">
</li>
<li>
<div class="icon sf-align-center-1"></div>
<input type="text" readonly="readonly" value="align-center-1">
</li>
<li>
<div class="icon sf-align-justify-1"></div>
<input type="text" readonly="readonly" value="align-justify-1">
</li>
<li>
<div class="icon sf-align-left-1"></div>
<input type="text" readonly="readonly" value="align-left-1">
</li>
<li>
<div class="icon sf-indent"></div>
<input type="text" readonly="readonly" value="indent">
</li>
<li>
<div class="icon sf-outdent"></div>
<input type="text" readonly="readonly" value="outdent">
</li>
<li>
<div class="icon sf-superscript"></div>
<input type="text" readonly="readonly" value="superscript">
</li>
<li>
<div class="icon sf-subscript"></div>
<input type="text" readonly="readonly" value="subscript">
</li>
<li>
<div class="icon sf-align-right-1"></div>
<input type="text" readonly="readonly" value="align-right-1">
</li>
<li>
<div class="icon sf-font"></div>
<input type="text" readonly="readonly" value="font">
</li>
<li>
<div class="icon sf-list"></div>
<input type="text" readonly="readonly" value="list">
</li>
<li>
<div class="icon sf-pencil-square-1"></div>
<input type="text" readonly="readonly" value="pencil-square-1">
</li>
<li>
<div class="icon sf-text-height"></div>
<input type="text" readonly="readonly" value="text-height">
</li>
<li>
<div class="icon sf-trash"></div>
<input type="text" readonly="readonly" value="trash">
</li>
<li>
<div class="icon sf-trash-o"></div>
<input type="text" readonly="readonly" value="trash-o">
</li>
<li>
<div class="icon sf-ban"></div>
<input type="text" readonly="readonly" value="ban">
</li>
<li>
<div class="icon sf-minus-circle"></div>
<input type="text" readonly="readonly" value="minus-circle">
</li>
<li>
<div class="icon sf-minus-square"></div>
<input type="text" readonly="readonly" value="minus-square">
</li>
<li>
<div class="icon sf-link"></div>
<input type="text" readonly="readonly" value="link">
</li>
<li>
<div class="icon sf-link-external"></div>
<input type="text" readonly="readonly" value="link-external">
</li>
<li>
<div class="icon sf-tools"></div>
<input type="text" readonly="readonly" value="tools">
</li>
<li>
<div class="icon sf-wrench-2"></div>
<input type="text" readonly="readonly" value="wrench-2">
</li>
<li>
<div class="icon sf-power-off"></div>
<input type="text" readonly="readonly" value="power-off">
</li>
<li>
<div class="icon sf-credit-card"></div>
<input type="text" readonly="readonly" value="credit-card">
</li>
<li>
<div class="icon sf-user-7"></div>
<input type="text" readonly="readonly" value="user-7">
</li>
<li>
<div class="icon sf-user-6"></div>
<input type="text" readonly="readonly" value="user-6">
</li>
<li>
<div class="icon sf-user-4"></div>
<input type="text" readonly="readonly" value="user-4">
</li>
<li>
<div class="icon sf-user-3"></div>
<input type="text" readonly="readonly" value="user-3">
</li>
<li>
<div class="icon sf-user-5"></div>
<input type="text" readonly="readonly" value="user-5">
</li>
<li>
<div class="icon sf-forum-user"></div>
<input type="text" readonly="readonly" value="forum-user">
</li>
<li>
<div class="icon sf-file-1"></div>
<input type="text" readonly="readonly" value="file-1">
</li>
<li>
<div class="icon sf-folder"></div>
<input type="text" readonly="readonly" value="folder">
</li>
<li>
<div class="icon sf-folder-1"></div>
<input type="text" readonly="readonly" value="folder-1">
</li>
<li>
<div class="icon sf-medal"></div>
<input type="text" readonly="readonly" value="medal">
</li>
<li>
<div class="icon sf-network"></div>
<input type="text" readonly="readonly" value="network">
</li>
<li>
<div class="icon sf-save-1"></div>
<input type="text" readonly="readonly" value="save-1">
</li>
<li>
<div class="icon sf-star-1"></div>
<input type="text" readonly="readonly" value="star-1">
</li>
<li>
<div class="icon sf-display"></div>
<input type="text" readonly="readonly" value="display">
</li>
<li>
<div class="icon sf-dollar"></div>
<input type="text" readonly="readonly" value="dollar">
</li>
<li>
<div class="icon sf-euro"></div>
<input type="text" readonly="readonly" value="euro">
</li>
<li>
<div class="icon sf-pound"></div>
<input type="text" readonly="readonly" value="pound">
</li>
<li>
<div class="icon sf-money-banknote"></div>
<input type="text" readonly="readonly" value="money-banknote">
</li>
<li>
<div class="icon sf-male-rounded-1"></div>
<input type="text" readonly="readonly" value="male-rounded-1">
</li>
<li>
<div class="icon sf-female-rounded-1"></div>
<input type="text" readonly="readonly" value="female-rounded-1">
</li>
<li>
<div class="icon sf-female"></div>
<input type="text" readonly="readonly" value="female">
</li>
<li>
<div class="icon sf-male"></div>
<input type="text" readonly="readonly" value="male">
</li>
<li>
<div class="icon sf-arrows-out"></div>
<input type="text" readonly="readonly" value="arrows-out">
</li>
<li>
<div class="icon sf-print-1"></div>
<input type="text" readonly="readonly" value="print-1">
</li>
<li>
<div class="icon sf-zoom-out"></div>
<input type="text" readonly="readonly" value="zoom-out">
</li>
<li>
<div class="icon sf-earth"></div>
<input type="text" readonly="readonly" value="earth">
</li>
<li>
<div class="icon sf-building-o"></div>
<input type="text" readonly="readonly" value="building-o">
</li>
<li>
<div class="icon sf-briefcase"></div>
<input type="text" readonly="readonly" value="briefcase">
</li>
<li>
<div class="icon sf-interface-windows"></div>
<input type="text" readonly="readonly" value="interface-windows">
</li>
<li>
<div class="icon sf-angle-double-down"></div>
<input type="text" readonly="readonly" value="angle-double-down">
</li>
<li>
<div class="icon sf-angle-double-left"></div>
<input type="text" readonly="readonly" value="angle-double-left">
</li>
<li>
<div class="icon sf-angle-double-right"></div>
<input type="text" readonly="readonly" value="angle-double-right">
</li>
<li>
<div class="icon sf-angle-double-up"></div>
<input type="text" readonly="readonly" value="angle-double-up">
</li>
<li>
<div class="icon sf-arrow-circle-down"></div>
<input type="text" readonly="readonly" value="arrow-circle-down">
</li>
<li>
<div class="icon sf-arrow-circle-left"></div>
<input type="text" readonly="readonly" value="arrow-circle-left">
</li>
<li>
<div class="icon sf-arrow-circle-o-down"></div>
<input type="text" readonly="readonly" value="arrow-circle-o-down">
</li>
<li>
<div class="icon sf-area-chart"></div>
<input type="text" readonly="readonly" value="area-chart">
</li>
<li>
<div class="icon sf-arrow-circle-o-left"></div>
<input type="text" readonly="readonly" value="arrow-circle-o-left">
</li>
<li>
<div class="icon sf-arrow-circle-o-right"></div>
<input type="text" readonly="readonly" value="arrow-circle-o-right">
</li>
<li>
<div class="icon sf-arrow-circle-o-up"></div>
<input type="text" readonly="readonly" value="arrow-circle-o-up">
</li>
<li>
<div class="icon sf-arrow-circle-right"></div>
<input type="text" readonly="readonly" value="arrow-circle-right">
</li>
<li>
<div class="icon sf-arrow-circle-up"></div>
<input type="text" readonly="readonly" value="arrow-circle-up">
</li>
<li>
<div class="icon sf-arrow-down"></div>
<input type="text" readonly="readonly" value="arrow-down">
</li>
<li>
<div class="icon sf-arrow-left"></div>
<input type="text" readonly="readonly" value="arrow-left">
</li>
<li>
<div class="icon sf-arrow-right"></div>
<input type="text" readonly="readonly" value="arrow-right">
</li>
<li>
<div class="icon sf-arrow-up"></div>
<input type="text" readonly="readonly" value="arrow-up">
</li>
<li>
<div class="icon sf-battery-empty"></div>
<input type="text" readonly="readonly" value="battery-empty">
</li>
<li>
<div class="icon sf-battery-full"></div>
<input type="text" readonly="readonly" value="battery-full">
</li>
<li>
<div class="icon sf-battery-half"></div>
<input type="text" readonly="readonly" value="battery-half">
</li>
<li>
<div class="icon sf-battery-quarter"></div>
<input type="text" readonly="readonly" value="battery-quarter">
</li>
<li>
<div class="icon sf-battery-three-quarters"></div>
<input type="text" readonly="readonly" value="battery-three-quarters">
</li>
<li>
<div class="icon sf-barcode"></div>
<input type="text" readonly="readonly" value="barcode">
</li>
<li>
<div class="icon sf-at-1"></div>
<input type="text" readonly="readonly" value="at-1">
</li>
<li>
<div class="icon sf-bed"></div>
<input type="text" readonly="readonly" value="bed">
</li>
<li>
<div class="icon sf-binoculars"></div>
<input type="text" readonly="readonly" value="binoculars">
</li>
<li>
<div class="icon sf-bold-1"></div>
<input type="text" readonly="readonly" value="bold-1">
</li>
<li>
<div class="icon sf-book"></div>
<input type="text" readonly="readonly" value="book">
</li>
<li>
<div class="icon sf-bus"></div>
<input type="text" readonly="readonly" value="bus">
</li>
<li>
<div class="icon sf-calculator"></div>
<input type="text" readonly="readonly" value="calculator">
</li>
<li>
<div class="icon sf-calendar"></div>
<input type="text" readonly="readonly" value="calendar">
</li>
<li>
<div class="icon sf-calendar-check-o"></div>
<input type="text" readonly="readonly" value="calendar-check-o">
</li>
<li>
<div class="icon sf-calendar-minus-o"></div>
<input type="text" readonly="readonly" value="calendar-minus-o">
</li>
<li>
<div class="icon sf-camera"></div>
<input type="text" readonly="readonly" value="camera">
</li>
<li>
<div class="icon sf-camera-retro"></div>
<input type="text" readonly="readonly" value="camera-retro">
</li>
<li>
<div class="icon sf-car"></div>
<input type="text" readonly="readonly" value="car">
</li>
<li>
<div class="icon sf-cart-plus"></div>
<input type="text" readonly="readonly" value="cart-plus">
</li>
<li>
<div class="icon sf-cc-mastercard"></div>
<input type="text" readonly="readonly" value="cc-mastercard">
</li>
<li>
<div class="icon sf-check-circle"></div>
<input type="text" readonly="readonly" value="check-circle">
</li>
<li>
<div class="icon sf-check-circle-o"></div>
<input type="text" readonly="readonly" value="check-circle-o">
</li>
<li>
<div class="icon sf-check-square"></div>
<input type="text" readonly="readonly" value="check-square">
</li>
<li>
<div class="icon sf-check-square-o"></div>
<input type="text" readonly="readonly" value="check-square-o">
</li>
<li>
<div class="icon sf-chevron-down"></div>
<input type="text" readonly="readonly" value="chevron-down">
</li>
<li>
<div class="icon sf-chevron-left"></div>
<input type="text" readonly="readonly" value="chevron-left">
</li>
<li>
<div class="icon sf-chevron-right"></div>
<input type="text" readonly="readonly" value="chevron-right">
</li>
<li>
<div class="icon sf-chevron-up"></div>
<input type="text" readonly="readonly" value="chevron-up">
</li>
<li>
<div class="icon sf-child"></div>
<input type="text" readonly="readonly" value="child">
</li>
<li>
<div class="icon sf-chrome"></div>
<input type="text" readonly="readonly" value="chrome">
</li>
<li>
<div class="icon sf-circle-o-notch"></div>
<input type="text" readonly="readonly" value="circle-o-notch">
</li>
<li>
<div class="icon sf-code"></div>
<input type="text" readonly="readonly" value="code">
</li>
<li>
<div class="icon sf-code-fork"></div>
<input type="text" readonly="readonly" value="code-fork">
</li>
<li>
<div class="icon sf-coffee"></div>
<input type="text" readonly="readonly" value="coffee">
</li>
<li>
<div class="icon sf-compress"></div>
<input type="text" readonly="readonly" value="compress">
</li>
<li>
<div class="icon sf-copyright"></div>
<input type="text" readonly="readonly" value="copyright">
</li>
<li>
<div class="icon sf-css3"></div>
<input type="text" readonly="readonly" value="css3">
</li>
<li>
<div class="icon sf-diamond"></div>
<input type="text" readonly="readonly" value="diamond">
</li>
<li>
<div class="icon sf-eject"></div>
<input type="text" readonly="readonly" value="eject">
</li>
<li>
<div class="icon sf-exchange"></div>
<input type="text" readonly="readonly" value="exchange">
</li>
<li>
<div class="icon sf-eur"></div>
<input type="text" readonly="readonly" value="eur">
</li>
<li>
<div class="icon sf-exclamation"></div>
<input type="text" readonly="readonly" value="exclamation">
</li>
<li>
<div class="icon sf-exclamation-circle"></div>
<input type="text" readonly="readonly" value="exclamation-circle">
</li>
<li>
<div class="icon sf-exclamation-triangle"></div>
<input type="text" readonly="readonly" value="exclamation-triangle">
</li>
<li>
<div class="icon sf-expand"></div>
<input type="text" readonly="readonly" value="expand">
</li>
<li>
<div class="icon sf-expeditedssl"></div>
<input type="text" readonly="readonly" value="expeditedssl">
</li>
<li>
<div class="icon sf-external-link"></div>
<input type="text" readonly="readonly" value="external-link">
</li>
<li>
<div class="icon sf-eyedropper"></div>
<input type="text" readonly="readonly" value="eyedropper">
</li>
<li>
<div class="icon sf-fast-backward"></div>
<input type="text" readonly="readonly" value="fast-backward">
</li>
<li>
<div class="icon sf-fast-forward"></div>
<input type="text" readonly="readonly" value="fast-forward">
</li>
<li>
<div class="icon sf-fax"></div>
<input type="text" readonly="readonly" value="fax">
</li>
<li>
<div class="icon sf-firefox"></div>
<input type="text" readonly="readonly" value="firefox">
</li>
<li>
<div class="icon sf-flask"></div>
<input type="text" readonly="readonly" value="flask">
</li>
<li>
<div class="icon sf-folder-o"></div>
<input type="text" readonly="readonly" value="folder-o">
</li>
<li>
<div class="icon sf-folder-2"></div>
<input type="text" readonly="readonly" value="folder-2">
</li>
<li>
<div class="icon sf-folder-open"></div>
<input type="text" readonly="readonly" value="folder-open">
</li>
<li>
<div class="icon sf-folder-open-o"></div>
<input type="text" readonly="readonly" value="folder-open-o">
</li>
<li>
<div class="icon sf-font-1"></div>
<input type="text" readonly="readonly" value="font-1">
</li>
<li>
<div class="icon sf-frown-o"></div>
<input type="text" readonly="readonly" value="frown-o">
</li>
<li>
<div class="icon sf-gift"></div>
<input type="text" readonly="readonly" value="gift">
</li>
<li>
<div class="icon sf-gratipay"></div>
<input type="text" readonly="readonly" value="gratipay">
</li>
<li>
<div class="icon sf-google-plus"></div>
<input type="text" readonly="readonly" value="google-plus">
</li>
<li>
<div class="icon sf-google"></div>
<input type="text" readonly="readonly" value="google">
</li>
<li>
<div class="icon sf-git-square"></div>
<input type="text" readonly="readonly" value="git-square">
</li>
<li>
<div class="icon sf-git"></div>
<input type="text" readonly="readonly" value="git">
</li>
<li>
<div class="icon sf-hand-peace-o"></div>
<input type="text" readonly="readonly" value="hand-peace-o">
</li>
<li>
<div class="icon sf-header"></div>
<input type="text" readonly="readonly" value="header">
</li>
<li>
<div class="icon sf-headphones"></div>
<input type="text" readonly="readonly" value="headphones">
</li>
<li>
<div class="icon sf-heartbeat"></div>
<input type="text" readonly="readonly" value="heartbeat">
</li>
<li>
<div class="icon sf-hourglass-start"></div>
<input type="text" readonly="readonly" value="hourglass-start">
</li>
<li>
<div class="icon sf-html5"></div>
<input type="text" readonly="readonly" value="html5">
</li>
<li>
<div class="icon sf-indent-1"></div>
<input type="text" readonly="readonly" value="indent-1">
</li>
<li>
<div class="icon sf-inbox"></div>
<input type="text" readonly="readonly" value="inbox">
</li>
<li>
<div class="icon sf-internet-explorer"></div>
<input type="text" readonly="readonly" value="internet-explorer">
</li>
<li>
<div class="icon sf-italic"></div>
<input type="text" readonly="readonly" value="italic">
</li>
<li>
<div class="icon sf-linux"></div>
<input type="text" r