<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/ewf-animate.css" />
    
    <script src="jquery-1.7.1.js"></script>
    <script src="edgewebfonts.js"></script>
</head>
<body>
    
    <div class="edge-web-fonts">
        <div class="ewf-picker">
            <div class="ewf-tabs">
                <!--h4>Font Fallback List</h4>
                <p>Browse for and select the web font you wish to include in your web project.</p-->
                <!-- placeholder="Search" -->
                <input type="text"  class="ewf-search-fonts" />
                <div class="ewf-side-bar">
                    <ul class="recommended-uses">
                        <li>
                            <!--Headings-->
                            <button title="" data-classification="headings" class="ewf-classification-button">
                                <div class="ewf-icon headings"></div>
                            </button>
                        </li>
                        <li>
                            <!--Paragraphs-->
                            <button title="" data-classification="paragraphs" class="ewf-classification-button">
                                <div class="ewf-icon paragraphs"></div>
                            </button>
                        </li>
                    </ul>
                    <ul class="font-classifications">
                        <li>
                            <!--Serif-->
                            <button title="" data-classification="serif" class="ewf-classification-button">
                                <div class="ewf-icon serif"></div>
                            </button>
                        </li>
                        <li>
                            <!--Sans-Serif-->
                            <button title="" data-classification="sans-serif" class="ewf-classification-button">
                                <div class="ewf-icon sans-serif"></div>
                            </button>
                        </li>
                        <li>
                            <!--Slab-Serif-->
                            <button title="" data-classification="slab-serif" class="ewf-classification-button">
                                <div class="ewf-icon slab-serif"></div>
                            </button>
                        </li>
                        <li>
                            <!--Script-->
                            <button title="" data-classification="script" class="ewf-classification-button">
                                <div class="ewf-icon script"></div>
                            </button>
                        </li>
                        <li>
                            <!--Blackletter-->
                            <button title="" data-classification="blackletter" class="ewf-classification-button">
                                <div class="ewf-icon blackletter"></div>
                            </button>
                        </li>
                        <li>
                            <!--Monospaced-->
                            <button title="" data-classification="monospaced" class="ewf-classification-button">
                                <div class="ewf-icon monospaced"></div>
                            </button>
                        </li>
                        <li>
                            <!--Handmade-->
                            <button title="" data-classification="handmade" class="ewf-classification-button">
                                <div class="ewf-icon handmade"></div>
                            </button>
                        </li>
                        <li>
                            <!--Decorative-->
                            <button title="" data-classification="decorative" class="ewf-classification-button">
                                <div class="ewf-icon decorative"></div>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="divider divider-left"></div>
            <div class="divider divider-right"></div>
            <div class="ewf-results"></div>
        </div>
    </div>
</body>
