<cc-element cc-id="style">
    <link rel="stylesheet" href="{base_element}package/css/reset.css">
    <link rel="stylesheet" href="{base_element}package/css/style.css">
</cc-element>

<cc-element cc-id="content">
    <header class="cd-main-header">
        <a class="cd-logo" href="#0"><img src="img/cd-logo.svg" alt="Logo"></a>

        <ul class="cd-header-buttons">
            <li><a class="cd-search-trigger" href="#cd-search">Search<span></span></a></li>
            <li><a class="cd-nav-trigger" href="#cd-primary-nav">Menu<span></span></a></li>
        </ul> <!-- cd-header-buttons -->
    </header>

    <main class="cd-main-content">
        <!-- your content here -->
    </main>

    <div class="cd-overlay"></div>

    <nav class="cd-nav">
        <ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
            <li class="has-children">
                <a href="">Clothing</a>

                <ul class="cd-secondary-nav is-hidden">
                    <li class="go-back"><a href="#0">Menu</a></li>
                    <li class="see-all"><a href="">All Clothing</a></li>
                    <li class="has-children">
                        <a href="">Accessories</a>

                        <ul class="is-hidden">
                            <li class="go-back"><a href="#0">Clothing</a></li>
                            <li class="see-all"><a href="">All Accessories</a></li>
                            <li class="has-children">
                                <a href="#0">Beanies</a>

                                <ul class="is-hidden">
                                    <li class="go-back"><a href="#0">Accessories</a></li>
                                    <li class="see-all"><a href="">All Benies</a></li>
                                    <li><a href="">Caps &amp; Hats</a></li>
                                    <li><a href="">Gifts</a></li>
                                    <li><a href="">Scarves &amp; Snoods</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#0">Caps &amp; Hats</a>

                                <ul class="is-hidden">
                                    <li class="go-back"><a href="#0">Accessories</a></li>
                                    <li class="see-all"><a href="">All Caps &amp; Hats</a></li>
                                    <li><a href="">Beanies</a></li>
                                    <li><a href="">Caps</a></li>
                                    <li><a href="">Hats</a></li>
                                </ul>
                            </li>
                            <li><a href="">Glasses</a></li>
                            <li><a href="">Gloves</a></li>
                            <li><a href="">Jewellery</a></li>
                            <li><a href="">Scarves</a></li>
                            <li><a href="">Wallets</a></li>
                            <li><a href="">Watches</a></li>
                        </ul>
                    </li>

                    <li class="has-children">
                        <a href="">Bottoms</a>

                        <ul class="is-hidden">
                            <li class="go-back"><a href="#0">Clothing</a></li>
                            <li class="see-all"><a href="">All Bottoms</a></li>
                            <li><a href="">Casual Trousers</a></li>
                            <li class="has-children">
                                <a href="#0">Jeans</a>

                                <ul class="is-hidden">
                                    <li class="go-back"><a href="#0">Bottoms</a></li>
                                    <li class="see-all"><a href="">All Jeans</a></li>
                                    <li><a href="">Ripped</a></li>
                                    <li><a href="">Skinny</a></li>
                                    <li><a href="">Slim</a></li>
                                    <li><a href="">Straight</a></li>
                                </ul>
                            </li>
                            <li><a href="#0">Leggings</a></li>
                            <li><a href="#0">Shorts</a></li>
                        </ul>
                    </li>

                    <li class="has-children">
                        <a href="">Jackets</a>

                        <ul class="is-hidden">
                            <li class="go-back"><a href="#0">Clothing</a></li>
                            <li class="see-all"><a href="">All Jackets</a></li>
                            <li><a href="">Blazers</a></li>
                            <li><a href="">Bomber jackets</a></li>
                            <li><a href="">Denim Jackets</a></li>
                            <li><a href="">Duffle Coats</a></li>
                            <li><a href="">Leather Jackets</a></li>
                            <li><a href="">Parkas</a></li>
                        </ul>
                    </li>

                    <li class="has-children">
                        <a href="">Tops</a>

                        <ul class="is-hidden">
                            <li class="go-back"><a href="#0">Clothing</a></li>
                            <li class="see-all"><a href="">All Tops</a></li>
                            <li><a href="">Cardigans</a></li>
                            <li><a href="">Coats</a></li>
                            <li><a href="">Hoodies &amp; Sweatshirts</a></li>
                            <li><a href="">Jumpers</a></li>
                            <li><a href="">Polo Shirts</a></li>
                            <li><a href="">Shirts</a></li>
                            <li class="has-children">
                                <a href="#0">T-Shirts</a>

                                <ul class="is-hidden">
                                    <li class="go-back"><a href="#0">Tops</a></li>
                                    <li class="see-all"><a href="">All T-shirts</a></li>
                                    <li><a href="">Plain</a></li>
                                    <li><a href="">Print</a></li>
                                    <li><a href="">Striped</a></li>
                                    <li><a href="">Long sleeved</a></li>
                                </ul>
                            </li>
                            <li><a href="">Vests</a></li>
                        </ul>
                    </li>
                </ul>
            </li>

            <li class="has-children">
                <a href="">Gallery</a>

                <ul class="cd-nav-gallery is-hidden">
                    <li class="go-back"><a href="#0">Menu</a></li>
                    <li class="see-all"><a href="">Browse Gallery</a></li>
                    <li>
                        <a class="cd-nav-item" href="">
                            <img src="img/img.jpg" alt="Product Image">
                            <h3>Product #1</h3>
                        </a>
                    </li>

                    <li>
                        <a class="cd-nav-item" href="">
                            <img src="img/img.jpg" alt="Product Image">
                            <h3>Product #2</h3>
                        </a>
                    </li>

                    <li>
                        <a class="cd-nav-item" href="">
                            <img src="img/img.jpg" alt="Product Image">
                            <h3>Product #3</h3>
                        </a>
                    </li>

                    <li>
                        <a class="cd-nav-item" href="">
                            <img src="img/img.jpg" alt="Product Image">
                            <h3>Product #4</h3>
                        </a>
                    </li>
                </ul>
            </li>

            <li class="has-children">
                <a href="">Services</a>
                <ul class="cd-nav-icons is-hidden">
                    <li class="go-back"><a href="#0">Menu</a></li>
                    <li class="see-all"><a href="">Browse Services</a></li>
                    <li>
                        <a class="cd-nav-item item-1" href="">
                            <h3>Service #1</h3>
                            <p>This is the item description</p>
                        </a>
                    </li>

                    <li>
                        <a class="cd-nav-item item-2" href="">
                            <h3>Service #2</h3>
                            <p>This is the item description</p>
                        </a>
                    </li>

                    <li>
                        <a class="cd-nav-item item-3" href="">
                            <h3>Service #3</h3>
                            <p>This is the item description</p>
                        </a>
                    </li>

                    <li>
                        <a class="cd-nav-item item-4" href="">
                            <h3>Service #4</h3>
                            <p>This is the item description</p>
                        </a>
                    </li>

                    <li>
                        <a class="cd-nav-item item-5" href="">
                            <h3>Service #5</h3>
                            <p>This is the item description</p>
                        </a>
                    </li>

                    <li>
                        <a class="cd-nav-item item-6" href="">
                            <h3>Service #6</h3>
                            <p>This is the item description</p>
                        </a>
                    </li>

                    <li>
                        <a class="cd-nav-item item-7" href="">
                            <h3>Service #7</h3>
                            <p>This is the item description</p>
                        </a>
                    </li>

                    <li>
                        <a class="cd-nav-item item-8" href="">
                            <h3>Service #8</h3>
                            <p>This is the item description</p>
                        </a>
                    </li>
                </ul>
            </li>

            <li><a href="">Standard</a></li>
        </ul> <!-- primary-nav -->
    </nav> <!-- cd-nav -->

    <div id="cd-search" class="cd-search">
        <form>
            <input type="search" placeholder="Search...">
        </form>
    </div>
</cc-element>

<cc-element cc-id="script" cc-placement="top">
    <script src="{base_element}package/js/modernizr.js"></script>
</cc-element>


<cc-element cc-id="script" cc-placement="bottom">
    <script src="{base_element}package/js/jquery.mobile.custom.min.js"></script>
    <script src="{base_element}package/js/main.js"></script>
</cc-element>
