play.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/690f9bd560.js"></script>
<link rel="stylesheet" href="https://www.renticity.com/styles/app.css">

<div class="design container">
    <marquee><h2>Play Center - "Has design gone too far?!"</h2></marquee>


    <h3>Sign Up Sell</h3>
    <p class="uppercase bold italics small">Pro Is Normal, Free vs. Free</p>

    <style>

        .pro_subscribe {}
        
        .pro_subscribe li {
            line-height: 1.8em;
        }
        .pro_subscribe li .fa {
            width: 25px;
        }
    </style>


    <div class="row pro_subscribe">
        <div class="col-sm-6">

            <h2>Create Account</h2>

            <div class="row">

                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="inputEmail3" class="control-label">First Name</label>
                        <input type="email" class="form-control" id="inputEmail3" placeholder="First Name">
                    </div>

                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="inputEmail3" class="control-label">Last Name</label>
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Last Name">
                    </div>
                </div>
            </div>
            <div class="row">

                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="inputEmail3" class="control-label">Email</label>
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="inputEmail3" class="control-label">Password</label>
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Password">
                    </div>
                </div>
            </div>
            <br>
            <div class="row">

                <div class="col-sm-6 col-sm-offset-3">
                    <button type="button" class="btn btn-primary btn-block">
                        Try Pro FREE for 30 Days
                    </button>
                    <p class="text-center">
                        or
                    </p>
                    <button type="button" class="btn btn-link underline btn-block">
                        Just take me to a free lease.
                    </button>
                </div>
            </div>

        </div>
        <div class="col-sm-6">

            <div class="well">

                <h2 class="hardblue">Renticity Pro</h2>
                <p class="italics bold">
                    Unlimited units, unlimited renters, one price.
                </p>
                <ul>
                    <li>
                        <i class="fa fa-check blue"></i>
                        Share Online Listings with Renters
                    </li>
                    <li>
                        <i class="fa fa-check blue"></i>
                        Compare Local Listings for Price, Amenities
                    </li>
                    <li>
                        <i class="fa fa-check blue"></i>
                        Digital Applications and Tenant Screening
                    </li>
                    <li>
                        <i class="fa fa-check blue"></i>
                        3 Leases, 29 Addendums and Forms
                    </li>
                    <li>
                        <i class="fa fa-check blue"></i>
                        eLease Signing and Document Storage
                    </li>
                    <li>
                        <i class="fa fa-check blue"></i>
                        Online Rent, Deposit, and Utility Payments
                    </li>
                </ul>


                <p class="">
                    It's free to start, there are no commitments,
                    and no-hassle, anytime cancel.
                </p>
            </div>

        </div>
    </div>



    <h3>Circle of Death</h3>
    <p class="uppercase bold italics small">Inspired by customer feedback.</p>

    <style>
        .circle_of_death {
            position: relative;
            height: 100px;
            width: 100px;

            animation: circle 10s linear infinite;
        }

        @keyframes circle {
            0% {transform: rotate(0deg);}
            50% {transform: rotate(180deg);}
            100% {transform: rotate(359deg);}
        }
        .circle_of_death .head {
            position: absolute;
            width: 50px;
            height: 50px;
            background: #333;
            border-radius: 50%;
            top:0;
            left: 0;
        }
        .circle_of_death .jaw {
            position: absolute;
            width: 30px;
            height: 30px;
            top: 35px;
            left: 11px;
            background: #333;
        }

        .circle_of_death .eye1 {
            width: 10px;
            height: 10px;
            background: white;
            position: absolute;
            top: 15px;
            left: 10px;
        }
        .circle_of_death .eye2 {
            width: 10px;
            height: 10px;
            background: white;
            position: absolute;
            top: 20px;
            left: 30px;
        }
        .circle_of_death .tooth1 {
            width: 5px;
            height: 10px;
            background: white;
            position: absolute;
            top: 55px;
            left: 28px;
        }
        .circle_of_death .tooth2 {
            width: 5px;
            height: 10px;
            background: white;
            position: absolute;
            top: 55px;
            left: 18px;
        }

        .circle_of_death .nose {
            background: white;
            position: absolute;
            top: 32px;
            left: 20px;
            border-right: 10px solid #333;
            border-bottom: 10px solid white;
        }


    </style>


    <div class="circle_of_death">
        <div class="head"></div>
        <div class="jaw"></div>
        <div class="eye1"></div>
        <div class="eye2"></div>
        <div class="tooth1"></div>
        <div class="tooth2"></div>
        <div class="nose"></div>

    </div>


    <br>


    <h3>Holding Screens</h3>
    <p class="uppercase bold italics small">Turtle strat</p>


    <div class="alertInline alertLarge alert-info" role="alert">
        <i class="fa fa-upload"></i>
        <div>
            Renticity is currently working on upgrading our payment solution.
            We will be releasing these new features to you over the course of the next few hours.
            If you have any questions you can reach out to us at
            <a mail-type="support" mail-subject="Test MailTo" data-renticity-mail-to-directive target="_blank" class="underline">support@renticity.com</a>.
            Stay tuned!
        </div>
    </div>


    <div class="row">
        <div class="col-md-4 col-xs-12">

            <div class="secure-box row">
                <div class="header">
                    <i class="fa fa-lock"></i> Secure Payment
                    <div class="ccards pull-right">
                        <span class="visa" data-ng-class="{visa_valid: cardType.type == 'Visa' && cardType.valid != 'inValid'}"></span>
                        <span class="mc" data-ng-class="{mc_valid: cardType.type == 'MasterCard' && cardType.valid != 'inValid'}"></span>
                        <span class="amex" data-ng-class="{amex_valid: cardType.type == 'AMEX' && cardType.valid != 'inValid'}"></span>
                        <span class="disc" data-ng-class="{disc_valid: cardType.type == 'Discover' && cardType.valid != 'inValid'}"></span>
                    </div>
                </div>
                <div class="padded text-center big">
                    <h2>Payment Being Upgraded</h2>
                    Renticity is currently working on upgrading our payments feature. If you need to submit an application use:
                    <br>
                    <br>
                    <div class="big">Promo Code: <span class="underline bold">luckyday</span></div>

                    <br>

                    If you have any questions you can reach out to us at
                    <a mail-type="support" mail-subject="Test MailTo" data-renticity-mail-to-directive target="_blank" class="underline">support@renticity.com</a>.
                </div>
            </div>
        </div>
    </div>





    <h3>Social Buttons</h3>
    <p class="uppercase bold italics small">YOU WILL SIGN UP, YOU WILL COMPLY</p>


    <button class="btn btn-default facebook">
        <i class="fa fa-facebook-official"></i>
        Facebook
    </button>
    <button class="btn btn-default google">
        <i class="fa fa-google-plus"></i>
        Google
    </button>


    <h3>Section Example</h3>
    <p class="uppercase bold italics small">For people who can read good and wanna learn to do other stuff good too</p>


    <div class="row">

        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>
                SectionHeading
            </h3>
            <p class="small">
                A small blub explaining what blue is going on.
            </p>
        </div>

        <div class="col-md-4 col-sm-6 col-xs-12">

            <label class="bold">
                NameofElement
            </label>
            <input id="" type="text" class="form-control" placeholder="Name">

            <a id="" href="#" class="btn btn-default btn-outline">
                <i class="fa fa-bomb"></i>
                Click Me
            </a>
        </div>

    </div>



    <h3>Dashboard Signs</h3>
    <p class="uppercase bold italics small">This is in order for dashboard.</p>


    <p>Note: The following are examples.</p>

    <div class="alertInline alertLarge alert-success" role="alert">
        <div class="fa fa-stack">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-star fa-stack-1x fa-inverse"></i>
        </div>
        <div>
            Renticity Pro gives landlords the ability to sign e-leases and collect rent. It's all fast, online, and only <span class="underline">$10 / month</span>.
        </div>
        <button class="btn btn-primary btn-lg xs-block">Subscribe Now</button>
    </div>

    <br>


    <div class="alertInline alertLarge alert-error" role="alert">
        <i class="fa fa-credit-card"></i>
        <div>
            Features have been disabled because your credit card on file has expired. To gain access to all features you will need to update your card information.
        </div>
        <button class="btn btn-danger btn-lg xs-block">Pay rent now!</button>
    </div>

    <br>

    <div class="alertInline alertLarge alert-info" role="alert">
        <i class="fa fa-question-circle-o"></i>
        <div>
            A sole proprietor files taxes with their personal tax ID. If you have a separate business tax ID, select LLC from the options.
        </div>
        <button class="btn btn-default btn-outline btn-lg xs-block">Pay rent now!</button>
    </div>

    <br>

    <div class="alertInline alertLarge alert-default" role="alert">
        <i class="fa fa-question-circle-o"></i>
        <div>
            A sole proprietor files taxes with their personal tax ID. If you have a separate business tax ID, select LLC from the options.
        </div>
        <button class="btn btn-default btn-outline btn-lg xs-block">Pay rent now!</button>
    </div>




    <br>




    <div class="bold">Basic</div>
    <ol>
        <li>KBA</li>
        <li>Create Listing</li>
        <li>Invite to Apply</li>
        <li>Pay Subscribe</li>
    </ol>


    <br>

    <div class="alertInline alertLarge alert-success" role="alert">
        <div class="fa fa-stack">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-check fa-stack-1x fa-inverse"></i>
        </div>
        <div>
            Welcome to Renticity! Let's get you started. For your protection and renter safety, you need to become Verified.
            A Verified Landlord is able to accept applications, view screening reports, and collect rent payments.
        </div>
        <button class="btn btn-primary btn-lg xs-block">Start Verification</button>
    </div>

    <br>

    <div class="alertInline alertLarge alert-success" role="alert">
        <i class="fa fa-building-o"></i>
        <div>
            Create listings to share your property, accept applications, assign leases, and collect payments.
        </div>
        <button class="btn btn-primary btn-lg xs-block">Create Listing</button>
    </div>

    <br>

    <div class="alertInline alertLarge alert-success" role="alert">
        <i class="fa fa-envelope-square"></i>
        <div>
            Invite renters to apply to your listing. Renter applications are already screened when you receive them. All you need is the renter’s email address to get started.
        </div>
        <button class="btn btn-primary btn-lg xs-block">Invite Renter</button>
    </div>


    <br>

    <div class="alertInline alertLarge alert-success" role="alert">
        <div class="fa fa-stack">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-star fa-stack-1x fa-inverse"></i>
        </div>
        <div>
            Sign leases and collect rent with Renticity Pro. It’s free to try for 30 days.
        </div>
        <button class="btn btn-primary btn-lg xs-block">Try Pro</button>
    </div>


    <hr>


    <div class="bold">Pro</div>
    <ol>
        <li>Create Customer</li>
        <li>KBA</li>
        <li>Create Listing</li>
        <li>Invite to Apply</li>
        <li>Create Lease</li>
        <li>Verify 2-Drop</li>
        <li>Create Invoice</li>
    </ol>


    <br>

    <div class="alertInline alertLarge alert-success" role="alert">
        <i class="fa fa-money"></i>
        <div>
            Payment Accounts are how you send rent invoices and receive payments online. Create your account early to ensure you receive rent on time.
        </div>
        <button class="btn btn-primary btn-lg xs-block">Create Account</button>
    </div>

    <br>

    <div class="alertInline alertLarge alert-success" role="alert">
        <i class="fa fa-bank"></i>
        <div>
            We will be depositing two small amounts in your account in the next few days.<br/>
            Enter the deposit amounts corresponding to the following line items in your bank statement...<br/>
            [mm/dd/yyyy] Electronic Deposit Paystand.com $0.xx<br/>
            [mm/dd/yyyy] Electronic Deposit Paystand.com $0.xx
        </div>
        <button class="btn btn-primary btn-lg xs-block">Confirm Amounts</button>
    </div>

    <br>

    <div class="alertInline alertLarge alert-success" role="alert">
        <div class="fa fa-stack">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-check fa-stack-1x fa-inverse"></i>
        </div>
        <div>
            Become a Verified Landlord to accept applications and view screening reports.
        </div>
        <button class="btn btn-primary btn-lg xs-block">Start Verification</button>
    </div>

    <br>

    <div class="alertInline alertLarge alert-success" role="alert">
        <i class="fa fa-building-o"></i>
        <div>
            Create listings to share your property, accept applications, assign leases, and collect payments.
        </div>
        <button class="btn btn-primary btn-lg xs-block">Create Listing</button>
    </div>

    <br>

    <div class="alertInline alertLarge alert-success" role="alert">
        <i class="fa fa-envelope-square"></i>
        <div>
            Invite renters to apply to your listing. Renter applications are already screened when you receive them. All you need is the renter’s email address to get started.
        </div>
        <button class="btn btn-primary btn-lg xs-block">Invite Renter</button>
    </div>

    <br>

    <div class="alertInline alertLarge alert-success" role="alert">
        <i class="fa fa-paste"></i>
        <div>
            Use Renticity’s lease or upload your own PDF to start drafting a lease. Fill out fields, add signatures, and sent it to renters to sign. A renter will need to submit an approved application to sign a lease.
        </div>
        <button class="btn btn-primary btn-lg xs-block">Create Lease</button>
    </div>

    <br>

    <div class="alertInline alertLarge alert-success" role="alert">
        <div class="fa fa-stack">
            <i class="fa fa-folder fa-stack-2x"></i>
            <i class="fa fa-dollar fa-stack-1x fa-inverse"></i>
        </div>
        <div>
            Create and send invoices to collect rent online. A renter’s email address is all you need to get started.
        </div>
        <button class="btn btn-primary btn-lg xs-block">Create Invoice</button>
    </div>



    <h3>Timelines</h3>
    <p class="uppercase bold italics small">Ya no.</p>


    <style>
        .wordpress {
            position: relative;
            /*padding-bottom: 50%;*/
            padding-top: 35px;
            height: 400px;
            overflow: hidden;
        }
        .wordpress iframe {
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>


    <div class="row">
        <div class="col-sm-4 col-xs-12">
            <a class="twitter-timeline" href="https://twitter.com/Renticity" data-widget-id="707714184931192833">Tweets by @Renticity</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        </div>
        <div class="col-sm-4 col-xs-12">
            <div class="wordpress">
                <a class="wordpress-timeline" href="https://newschoollandlord.com" lang="en" data-theme="light" data-link-color="#000000" width="300" height="500">WordPress.com News</a>
                <script type="text/javascript">(function(d){var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');p.type = 'text/javascript';p.async = true;p.src = '//widgets.wp.com/platform.js';f.parentNode.insertBefore(p,f);}(document));</script>

            </div>
        </div>
        <div class="col-sm-4 col-xs-12">
            <div style="position: relative; height: 0; overflow: hidden; padding-top:166.66666666666669%;"><iframe src="//widgets-code.websta.me/w/590ac311c8c4?ck=MjAxNi0wNC0yMlQyMjoxNjoxNC41OTda" class="websta-widgets" allowtransparency="true" frameborder="0" scrolling="no" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe> <!-- WEBSTA WIDGETS - widgets.websta.me --></div>
        </div>
    </div>


    <!--<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Frenticity&tabs=timeline&width=340&height=600&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId" width="340" height="600" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>-->

    <br><br>


    <h3>Expanding Badges 2</h3>
    <p class="uppercase bold italics small">Waaay cooler than a tooltip.</p>



    <style>
        .dynamic-badge2 {
            border: 1px solid #46B7E7;
            border-radius: 999px;
            display: inline-block;
            color: #46B7E7;

            height: 21px;
        }

        .dynamic-badge2 .visable-label {
            display: inline-block;
            font-size: 12px;
            /* width: 23px; */
            text-align: center;
            position: relative;
            top: -10px;
            left: -2px;
            width: 15px;
        }

        .dynamic-badge2 .hidden-label {
            width: 0px;
            display: inline-block;
            overflow: hidden;
            position: relative;
            top: -2px;
            left: 10px;
            transition: .15s width;
        }
        .dynamic-badge2:hover .hidden-label {
            width: 100px;
            transition: .15s width;
        }

    </style>

    <div class="dynamic-badge2">
        <div class="visable-label">
            <span class="fa-stack">
                <i class="fa fa-circle fa-stack-2x blue"></i>
                <i class="fa fa-star fa-stack-1x fa-inverse"></i>
            </span>
        </div>
        <div class="hidden-label">
            Pro&nbsp;Account
        </div>
    </div>
    <div class="pull-right">
        <div class="dynamic-badge2">
            <div class="visable-label">
                <span class="fa-stack">
                    <i class="fa fa-circle fa-stack-2x blue"></i>
                    <i class="fa fa-star fa-stack-1x fa-inverse"></i>
                </span>
            </div>
            <div class="hidden-label">
                Pro&nbsp;Account
            </div>
        </div>
    </div>

    <br>



    <h3>Centering Code v.3</h3>
    <p class="uppercase bold italics small">Ok ok ok, this will surely do it this time!</p>

    <style>

        .block3 {
            height: 400px;
            position: relative;

            border: 1px solid red;
        }
        .block3 .centered {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);

        }

        .block3 img {
            max-width: 100%;
        }

    </style>



    <div class="row">
        <div class="col-sm-6 col-sm-push-6 col-xs-12">
            <div class="block3">
                <div class="centered">
                    <img src="../../images/castle.jpg"/>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-sm-pull-6 col-xs-12">
            <div class="block3">
                <div class="centered">
                    <h1>Some text</h1>
                    <p>Booking like men going towards that ship a while ago?"</p>
                </div>
            </div>
        </div>
    </div>




    <h3>Graphic Button</h3>
    <p class="uppercase bold italics small">Shamelessly stolen, but that's a design thing</p>

    <style>
        .btn-graphic {}

        .btn-graphic {
            background: transparent;
            border: 2px solid #0076BD;
            border-radius: 0;
            position: relative;
            transform: none;
            transition: all .2s;

        }
        .btn-graphic:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 7px;
            left: -7px;
            background: rgba(70,183,231,.5);

            z-index: -1;
            transition: all .2s;
        }
        .btn-graphic:hover,
        .btn-graphic:focus {
            transform: none;

        }
        .btn-graphic:hover:before,
        .btn-graphic:focus:before {
            top: 0;
            left: 0;

            transition: all .2s;
        }
    </style>

    <button type="button" class="btn btn-graphic">
        <i class="fa fa-dollar"></i>
        Buy This
    </button>

    <!-- https://onedayout.io/ -->


    <style>
        .dashstep {}

        .dashstep .card {
            text-align: center;
            padding: 10px 10px 20px 10px;
        }

        .dashstep .card img {
            max-width: 120px;
            margin: 15px 10px;

            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            transition: .15s;
        }

        .dashstep .card:hover img,
        .dashstep .card.active img {
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            transition: .15s;
        }

        .dashstep .card.active {
            box-shadow: 0 0 2px #46B7E7;
            border: 1px solid #46B7E7;
            pointer-events: none;
        }

        .dashstep .card p {
            min-height: 100px;
            margin: 10px 10px 0px 10px;
        }

        .dashstep .card h3 {color: #323333;}

        .dashstep .card .done {
            font-size: 25px;
            padding-bottom: 1px;
        }
    </style>

    <h3>DashStep</h3>
    <p class="uppercase bold italics small">Holding your hand means I love you as my customer.</p>

    <style>
        .dashstep {}

        .dashstep .card {
            text-align: center;
            padding: 10px 10px 20px 10px;
        }

        .dashstep .card img {
            max-width: 120px;
            margin: 15px 10px;

            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            transition: .15s;
        }

        .dashstep .card:hover img,
        .dashstep .card.active img {
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            transition: .15s;
        }

        .dashstep .card.active {
            box-shadow: 0 0 2px #46B7E7;
            border: 1px solid #46B7E7;
            pointer-events: none;
        }

        .dashstep .card p {
            min-height: 100px;
            margin: 10px 10px 0px 10px;
        }

        .dashstep .card h3 {color: #323333;}

        .dashstep .card .done {
            font-size: 25px;
            padding-bottom: 1px;
        }
    </style>


    <h2>Let's get you started!</h2>
    <div class="row dashstep">
        <div class="col-sm-3">
            <div class="card text-center">
                <h3 class="bold">
                    Create Listing
                </h3>
                <img src="/../../images/badges/alt/pin.png" alt="listing">
                <p>
                    Upload images, add ammenities, and share what makes your community special.
                </p>
                <button type="button" class="btn btn-primary">
                    <i class="fa fa-plus"></i> Create Listing
                </button>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="card text-center">
                <h3 class="bold">
                    Become Verified
                </h3>
                <img src="/../../images/badges/alt/verified.png" alt="listing">
                <p>
                    Renters are more likely to favorite, message, and apply to verified landlords.
                </p>
                <div>
                    <button type="button" class="btn btn-primary">
                        <i class="fa fa-check-circle"></i> Become Verified
                    </button>
                </div>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="card text-center">
                <h3 class="bold">
                    Accept Application
                </h3>
                <img src="/../../images/badges/alt/report.png" alt="listing">
                <p>
                    Invite a renter to apply and screen them instantly. No waiting, no phone calls.
                </p>
                <div>
                    <button type="button" class="btn btn-primary">
                        <i class="fa fa-share-alt"></i> Invite Renter
                    </button>
                </div>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="card text-center">
                <h3 class="bold">
                    Draft Lease
                </h3>
                <img src="/../../images/badges/alt/sign.png" alt="listing">
                <p>
                    If you have a lease you already trust, upload it and start drafting your digital lease.
                </p>
                <div>
                    <button type="button" class="btn btn-primary">
                        <i class="fa fa-upload"></i> Draft Lease
                    </button>
                </div>
            </div>
        </div>
    </div>

    <h3>The Social Belt</h3>
    <p class="uppercase bold italics small">Holding up nothing but broken dreams and your inflated sense of self.</p>

    <style>
        .social_belt {
            background: #525556;
            padding: 20px;
        }

    </style>

    <div class="social_belt">
        <ul>
            <li>
                <a href="/">
                    <i class="fa fa-facebook"></i>
                </a>
            </li>
            <li>
                <a href="/">
                    <i class="fa fa-instagram"></i>
                </a>
            </li>
            <li>
                <a href="/">
                    <i class="fa fa-twitter"></i>
                </a>
            </li>
            <li>
                <a href="/">
                    <i class="fa fa-google-plus"></i>
                </a>
            </li>
            <li>
                <a href="/">
                    <i class="fa fa-envelope-o"></i>
                </a>
            </li>
        </ul>
    </div>



    <h3>Mobile Warning</h3>
    <p class="uppercase bold italics small">SoLoMo.. or SoMoLo.. or, what ever.</p>

    <!-- Button trigger modal -->
    <button class="btn btn-default btn-outline" data-toggle="modal" data-target="#myModal">
        <i class="fa fa-bomb"></i>Boom goes the modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"><i class="fa fa-close"></i></span><span class="sr-only">Close</span></button>
                    <h2 class="modal-title">We're in mobile beta</h2>
                </div>
                <div class="modal-body text-center">
                    <img class="mobile-warning" src="../images/badges/device.png" alt="traffic cone">
                    <p>
                        We are testing LeaseConverter&trade; on a variety of mobile devices. If there are quirks, let us know at
                        <a mail-type="support" mail-subject="LeaseConverter on my mobile device was a bit weird." data-renticity-mail-to-directive target="_blank">info@renticity.com</a>.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Back</button>
                    <button type="button" class="btn btn-primary">Try it anyway</button>
                </div>
            </div>
        </div>
    </div>


    <h3>"Grail" Form</h3>
    <p class="uppercase bold italics small">Still chasing the dream of the perfect form.</p>

    <form class="grail-form">

        <hr>

        <!--Blank Input-->
        <div class="row">
            <label class="col-xs-12" for="emailEx">
                Home address
                <span class="pink">
                    *
                </span>
            </label>
            <div class="col-sm-6 col-xs-12">
                <input type="text" class="form-control" id="emailEx" placeholder="Required">
              </div>
            <div class="col-sm-6 col-xs-12">
                <p class="help">
                    Do you live in your parent's basement?
                </p>
            </div>

        </div>

        <!--Invalid Input-->
        <div class="row">
            <label class="col-xs-12" for="emailEx2">
                Home address
                <span class="pink">
                    *
                </span>
            </label>
            <div class="col-sm-6 col-xs-12">
                <input type="text" class="form-control invalid" id="emailEx2" placeholder="Required">
                <div class="alertInline alert-error" role="alert">
                    <p>
                        <span class="bold">Home address</span> is required.
                    </p>
                </div>

            </div>
            <div class="col-sm-6 col-xs-12">
                <p class="help">
                    Where you have access to your mail. We might send chocolates, cash money, or death threats. Quotey.
                </p>
            </div>
        </div>


        <!--Valid Input-->
        <div class="row">
            <label class="col-xs-12" for="emailEx3">
                Home address
                <span class="pink">
                    *
                </span>
            </label>
            <div class="col-sm-6 col-xs-12">
                <input type="text" class="form-control valid" id="emailEx3" >
            </div>
            <div class="col-sm-6 col-xs-12">
                <p class="help">
                    Where you have access to your mail. We might send chocolates, cash money, or death threats.
                </p>
            </div>
        </div>

        <hr>


        <!--Blank Select-->
        <div class="row">
            <label class="col-xs-12" for="emailEx">
                Select Things
                <span class="pink">
                    *
                </span>
            </label>
            <div class="col-sm-6 col-xs-12">
                <select type="text" class="form-control" id="selectEx" required>
                    <option disabled selected value="">Required</option>
                    <option>Banana</option>
                    <option>Monkey</option>
                </select>
            </div>
            <div class="col-sm-6 col-xs-12">
                <p class="help">
                    Choose, the monkey, or the banana?
                </p>
            </div>
        </div>


        <!--Invalid Select-->
        <div class="row">
            <label class="col-xs-12" for="emailEx2">
                Home address
                <span class="pink">
                    *
                </span>
            </label>
            <div class="col-sm-6 col-xs-12">
                <div class="select">
                    <select type="text" class="form-control invalid" id="selectEx2" required>
                        <option disabled selected value="">Required</option>
                        <option>Banana</option>
                        <option>Monkey</option>
                    </select>
                </div>
                <div class="alertInline alert-error" role="alert">
                    <p>
                        <span class="bold">Home address</span> is required.
                    </p>
                </div>

            </div>
            <div class="col-sm-6 col-xs-12">
                <p class="help">
                    Where you have access to your mail. We might send chocolates, cash money, or death threats. Quotey.
                </p>
            </div>
        </div>



        <!--Valid Select-->
        <div class="row">
            <label class="col-xs-12" for="emailEx">
                Select Thingies
                <span class="pink">
                    *
                </span>
            </label>
            <div class="col-sm-6 col-xs-12">
                <select type="text" class="form-control valid" id="selectEx3" required>
                    <option>Banana</option>
                    <option>Monkey</option>
                </select>
            </div>
            <div class="col-sm-6 col-xs-12">
                <p class="help">
                    Choose, the monkey, or the banana?
                </p>
            </div>
        </div>

        <hr>

        <!--Blank Input-->
        <div class="row">
            <label class="col-xs-12" for="emailEx">
                Go on a Date
                <span class="pink">
                    *
                </span>
            </label>
            <div class="col-sm-2 col-xs-12">
                <input type="text" class="form-control" data-ng-model="test" placeholder="Required"  maxlength="10" name="dateOfBirth"
                       data-date-model="testDate" data-ng-mode="testDate" data-masked-input="date"  date-year-range="1900:2000" pattern="[0-9]*">



            </div>
            <div class="col-sm-6 col-sm-offset-4  col-xs-12">
                <p class="help">
                    In the form MM/DD/YYYY
                </p>
            </div>

        </div>

        <hr>



    </form>



    <h3>Step v.3</h3>
    <p class="uppercase bold italics small">StepMania</p>

    <div class="stepsV3">
        <div class="stepV3 completed">
            <i class="fa fa-check"></i>
        </div>
        <div class="stepV3 completed">
            <i class="fa fa-check"></i>
        </div>
        <div class="stepV3 current">
            3
        </div>
        <div class="stepV3">
            4
        </div>
    </div>




    <h3>Dial Rotator</h3>
    <p class="uppercase bold italics small">Something something IE support</p>

    <style>

        .rotator {}

        .rotator {

            position: relative;
            overflow: hidden;
            border-bottom: 3px dashed #333;
            widtH: 200px;
            height: 60px;
            padding-left: 20px;

            margin: 50px;
        }
        .rotator .text-holder {
            font-family: 'Reenie Beanie', cursive;

            position: absolute;
            top: 0;

            animation: rotateText 20s infinite;
        }
        .rotator .text-holder p {
            font-size: 40px;
            line-height: 60px;
            margin: 0;

            color: #333;
        }


        /*Were going to need to match the line-height with*/
        /*the repositioning of the top property*/
        /**/
        /*I'm keep it on nice multiples of ten for now because*/
        /*I am lazy*/

        @keyframes rotateText {
            0% {
                top: 0px;
            }
            15% {
                top: 0px;
            }
            20% {
                top: -60px;
            }
            35% {
                top: -60px;
            }
            40% {
                top: -120px;
            }
            55% {
                top: -120px;
            }
            60% {
                top: -180px;
            }
            75% {
                top: -180px;
            }
            80% {
                top: -240px;
            }
            95% {
                top: -240px;
            }
            100% {
                top: -300px;
            }
        }


    </style>

    <div class="rotator">
        <div class="text-holder">
            <p>watching football</p>
            <p>kayaking</p>
            <p>tennis</p>
            <p>biking</p>
            <p>drinking beer</p>
            <p>watching football</p>
        </div>
    </div>




    <h3>Account Switch 2 - Electric Boogaloo</h3>
    <p class="uppercase bold italics small">Big buttons for small choices.. wait...</p>

    <style>
        .card_choice {}

        .card_choice .card {
            display: inline-block;
            text-align: center;
            width: 200px;
            height: 200px;
            font-size: 30px;
            transition: color .15s, background-color .15s;
        }
        .card_choice .card:hover {
            color: white;
            background-color: #46B7E7;
        }
        .card_choice .fa {
            font-size: 75px;
            margin: 15px 0;
            display: block;
        }

        .button_choice {}

        .button_choice .fa {
            font-size: 75px;
            margin: 15px 0;
            display: block;
        }

        .button_choice .btn {
            font-size: 30px;
            padding: 30px;

        }


    </style>

    <div class="card_choice">
        <div class="card">
            <i class="fa fa-upload"></i>
            Upload PDF
        </div>
        <div class="card">
            <i class="fa fa-paste"></i>
            Use Existing
        </div>

    </div>

    <div class="button_choice">
        <button type="button" class="btn btn-default btn-outline">
            <i class="fa fa-upload"></i>
            Upload PDF
        </button>
        <button type="button" class="btn btn-default btn-outline">
            <i class="fa fa-paste"></i>
            Use Existing
        </button>
    </div>

    <h3>Detecting Input Content</h3>
    <p class="uppercase bold italics small">No idea if this works. EXPERI-MENTAL</p>

    <style>
        #foo { background: yellow; }
        #foo:valid { outline: solid blue 2px; }
        #foo:invalid { outline: solid red 2px; }
    </style>
    <input id="foo" required>

    <style>
        input#foo2 {
            border: 1px solid black;
        }

        input#foo2:valid {
            background: red;
            width: 150px;

            outline: 5px solid orange;

            transition: .25s;
        }

        input#foo2:invalid, input#foo2:focus:invalid {
            background: blue;
            width: 50px;
            transition: .25s;
        }
    </style>
    <input id="foo2">

    <!--OK this is rather clever-->
    <!--http://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css-->

    <!--Alright don't be fooled, it's not as clever as it seeeeems -->


    <h3>Sign Up Modal 2.0</h3>
    <p class="uppercase bold italics small">It's really unfortunate that we have replaced pop-ups with modals. We've trained legions of customers to just hit the X in the top right without reading or caring what the content even says or does. Every time I use a modal it hurts a little inside knowing that I am contributing to the overall prevalence of lobotomized user flows. That said, damn does it convert and it works well on mobile.</p>


    <!-- Button trigger modal -->
    <button class="btn btn-default btn-outline" data-toggle="modal" data-target="#myModal">
        <i class="fa fa-bomb"></i>I want something.
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <form name ="loginForm" class="modal-content">
                <div class="modal-header">
                    <button id="loginmoClose" type="button" class="close" data-dismiss="modal" data-ng-click="cancelLoginModal()" aria-hidden="true"><i class="fa fa-close"></i></button>
                    <h2>Sign Up</h2>
                </div>
                <div class="modal-body form">
                    <!--<img class="text-center" src="../../images/badges/signup.png" alt="sign up">-->
                    <p class="text-center">
                        It takes 60 seconds and is free!
                        <br>
                        <br>
                        <a href="#" class="btn btn-primary xs-block">
                            <i class="fa fa-user-plus"></i> Create Account
                        </a>
                    </p>

                    <p class="text-center">
                        - or -
                    </p>

                    <h2>Log In</h2>
                    <fieldset>
                        <div class="form-group">
                            <input id="loginmoName" data-ng-model="loginRequest.userName" name="name" type="email" class="form-control" placeholder="Email address" autofocus required />
                        </div>
                        <div class="form-group">
                            <input id="loginmoPassword" data-ng-model="loginRequest.password" name="password" type="password" class="form-control" placeholder="Password" required/>
                        </div>
                        <div data-ng-show="invalidLogin">Invalid login.</div>
                    </fieldset>
                    <data-alert-bar login-alert-class="'alertInline'" alertmessage="loginMessage.message" alerttype="loginMessage.type" animation-effect="blind"></data-alert-bar>

                    <button id="loginmoSignIn" data-ng-disabled="!loginForm.$valid || spinnerStatus.running" data-ng-click="authenticateUser(loginRequest)" type="submit" class="btn btn-default btn-outline xs-block pull-left">
                        <i class="fa fa-lock"></i>
                        Log In
                    </button>
                    <button type="button" class="btn btn-link xs-block pull-right" id="loginmoPassReset" data-ng-click="resetPassword(loginRequest)">Forgot password?</button>


                    <!--<a data-ng-disabled="spinnerStatus.running" data-ng-click="hideLoginModal()" href="/signup" class="btn btn-link btn-block">-->
                        <!--Want to join us? <span class="underline bold">Sign Up</span>!-->
                    <!--</a>-->
                </div>
                <div class="modal-footer">
                    <!--<div class="form-group">-->
                        <!--<button type="button" class="btn btn-link pull-right" id="loginmoSupport" mail-type="support" mail-subject="Login Support" data-renticity-mail-to-directive target="_blank">Contact Support</button>-->
                    <!--</div>-->
                </div>
            </form>
        </div>
    </div>

    <h3>Hover Art</h3>
    <p class="uppercase bold italics small">Who need parallax when you can chillax</p>

    <style>
        .hover_art {
            height: 200px;
            width: 200px;
            position: relative;
            padding: 15px;
        }
        .hover_art:before {
            content: '';
            height: 100%;
            width: 100%;
            background: #8CD3ED;
            border-radius: 50%;
            position: absolute;
            top:0;
            left: 0;
            z-index: -1;

            transition: all 1s;
        }

        .hover_art img {
            width: 100%;
            height: auto;
            position: relative;
            top: 0;

            transition: all 1s;
        }

        .hover_art:hover img {
            top: -7px;
            transition: all 1s;
        }
        .hover_art:hover:before {
            top: 7px;
            transition: all 1s;
        }

    </style>

    <div class="hover_art">
        <img src="../../images/design/building.png" alt="building">
    </div>


    <h3>Highlighter Effect 2.0</h3>
    <p class="uppercase bold italics small">Super highlighter</p>
    <style>
        span.highlight {
            background: #0058be;
            color: #FFF;
            box-shadow:5px 0 0 #0058be, -5px 0 0 #0058be;
            padding: 2px 0;
        }
    </style>

    <!--Alright, this works with just multiline. Awesome. But doesnt center. Lame.-->
    <span class="highlight text-center">
        One in a future king
        <br>
        With some jam and honey
        <br>
        yes
        <br>
        And then some more to test it out with.
    </span>




    <h3>Highlighter Effect</h3>
    <p class="uppercase bold italics small">Color Me Surprised</p>
    <style>

        /*
        The below classes are just example styling
        */
        .highlighter_example {
            width: 200px;
            padding: 20px;
            background-image: url('../../images/castle.jpg');
            background-size: 100px 100px;
            background-repeat: repeat;
        }
        /*
        The above classes are just example styling
        */


    </style>

    <div class="highlighter_base highlighter_example">

        <p class="highlighter">
            It's Dangerous
        </p>

        <h2 class="highlighter highlighter_orange">
            It's Dangerous to Go Alone
        </h2>

        <span class="highlighter highlighter_red big">
            It's Dangerous to Go Alone
        </span>

        <p class="highlighter highlighter_blue bold">
            It's Dangerous to Go Alone
        </p>

    </div>


    <h3>Icon Stacking</h3>
    <p class="uppercase bold italics small">Mending a broken heart</p>


    <style>
        .unheart {
            position: relative;
        }
        .unheart .fa-heart {
            position: absolute;
            top: 0;
            left: 0;
            color: #FF675D;
        }
        .unheart .fa-bolt {
            position: absolute;
            top: -2px;
            left: 4.3px;
            color: white;
            transform: scale(0.5,0.6);
        }
    </style>

    <span class="unheart">
        <i class="fa fa-heart"></i>
        <i class="fa fa-bolt"></i>
    </span>

    <br>


    <h3>Menu Bar</h3>
    <p class="uppercase bold italics small">Might as well start making an OS...</p>


    <p>Trying someone elses</p>

    <style>

        .menu_tres {
            background: white;
            border: 1px solid #C7C9CA;
            border-radius: 2px;
        }

        .menu_tres .dropdown {
            display: inline;
        }

        .menu_tres .dropdown-menu.multi-level {
            border-top: 0;
        }

        .menu_tres .dropdown-menu {
            margin: 0;
            border: 1px solid #C7C9CA;
            left: -1px;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            margin-top: 9px;
        }

        .menu_tres .dropdown-menu > li > a {
            font-size: 14px;
        }
        .menu_tres .dropdown-submenu {
            position: relative;
        }
        .menu_tres .dropdown-submenu:hover,
        .menu_tres .dropdown-submenu:active {
            background: #8CD3ED;
        }

        .menu_tres .dropdown-submenu>.dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -5px;
            margin-left: -1px;
        }

        .menu_tres .dropdown-submenu:hover>.dropdown-menu {
            display: block;
        }

        .menu_tres .dropdown-submenu>a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #525556;
            margin-top: 5px;
            margin-right: -10px;
        }

        .menu_tres .dropdown-submenu:hover>a:after {}

        .menu_tres .dropdown-submenu.pull-left {
            float: none;
        }

        .menu_tres .dropdown-submenu.pull-left>.dropdown-menu {
            left: -100%;
            margin-left: 10px;
            /*border-radius: 6px 0 6px 6px;*/
        }
    </style>

    <div class="menu_tres">

        <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-link" data-target="#">
                File <i class="fa fa-caret-down"></i>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                <li><a href="#">New</a></li>
                <li><a href="#">Save</a></li>
                <li><a href="#">Save as Template</a></li>
                <li><a href="#">Upload .PDF</a></li>
                <li><a href="#">Upload .DocX</a></li>
                <li class="divider"></li>
                <li><a href="#">Print</a></li>
                <li><a href="#">Print Preview</a></li>
                <li><a href="#">Export to PDF</a></li>
                <li class="divider"></li>
                <li><a href="#">Delete</a></li>
            </ul>
        </div>

        <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-link" data-target="#">
                Edit <i class="fa fa-caret-down"></i>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                <li><a href="#">Bold</a></li>
                <li><a href="#">Italic</a></li>
                <li><a href="#">Underline</a></li>
                <li><a href="#">Strikethrough</a></li>
                <li class="divider"></li>
                <li><a href="#">Hyperlink</a></li>
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="#">Font Size</a>
                    <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="#">X-Small</a></li>
                        <li><a tabindex="-1" href="#">Small</a></li>
                        <li><a tabindex="-1" href="#">Medium</a></li>
                        <li><a tabindex="-1" href="#">Large</a></li>
                        <li><a tabindex="-1" href="#">X-Large</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-link" data-target="#">
                Insert <i class="fa fa-caret-down"></i>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                <li><a href="#">Special Character</a></li>
                <li><a href="#">Today's Date</a></li>
                <li><a href="#">Horizontal Rule</a></li>
            </ul>
        </div>

        <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-link" data-target="#">
                Fields <i class="fa fa-caret-down"></i>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="#">Dates</a>
                    <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="#">Second level</a></li>
                        <li class="dropdown-submenu">
                            <a href="#">Even More..</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">3rd level</a></li>
                                <li><a href="#">3rd level</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Second level</a></li>
                        <li><a href="#">Second level</a></li>
                    </ul>
                </li>
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="#">Renter Info</a>
                    <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="#">Second level</a></li>
                        <li class="dropdown-submenu">
                            <a href="#">Even More..</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">3rd level</a></li>
                                <li><a href="#">3rd level</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Second level</a></li>
                        <li><a href="#">Second level</a></li>
                    </ul>
                </li>
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="#">Listing Info</a>
                    <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="#">Second level</a></li>
                        <li class="dropdown-submenu">
                            <a href="#">Even More..</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">3rd level</a></li>
                                <li><a href="#">3rd level</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Second level</a></li>
                        <li><a href="#">Second level</a></li>
                    </ul>
                </li>
                <li><a href="#">Rent</a></li>
                <li><a href="#">Deposit</a></li>
            </ul>
        </div>

        <button class="bnt btn-link pull-right">
            <i class="fa fa-support"></i> Support
        </button>
    </div>





    <style>
        .menubar {
            border: 1px solid #C7C9CA;
            background: white;
            border-radius: 2px;

        }
        .menubar button,
        .menubar button:focus,
        .menubar button:hover {
            border: none;
            padding-right: 5px;
            padding-left: 5px;
            color: #525556;
        }

        .menubar .dropdown-menu {
            margin-top: 0;
            border-top: none;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            left: -1px;
        }
        .menubar .dropdown-menu > li > a {
            font-size: 14px;
        }
    </style>

    <p>Roll ya own</p>

    <style>
        .menubar2 {
            border: 1px solid #525556;
        }
        .menubar2 > ul {
            margin: 0;
        }
        .menubar2 > ul > li {
            display: inline;
            position: relative;
        }

        .menubar2 li > button {
            color: #525556;
        }
        .menubar2 li > button + ul {
            display: none;
            background: white;
            border: 1px solid #525556;
            margin: 0;
        }

        .menubar2 li > button:hover + ul,
        .menubar2 li > button + ul:hover {
            display: block;
            position: absolute;
            left: -1px;
            min-width: 150px;
            z-index: 2;
        }
        .menubar2 li > button + ul > li > button {
            background: white;
            border: none;
            width: 100%;
            text-align: left;
            position: relative;
        }
        .menubar2 li > button + ul > li > button:hover {
            background: #8CD3ED;
            border: none;
        }
        .menubar2 li > button + ul > li > button:hover + ul,
        .menubar2 li > button + ul > li > button + ul:hover {
            position: relative;
            left: 150px;
            top: -20px;
            height: 0;
        }
        .menubar2 li > button + ul > li > button + ul button {
            background: white;
            border: none;
            width: 100%;
            text-align: left;
        }
        .menubar2 li > button + ul > li > button + ul button:hover {
            background: #8CD3ED;
        }

    </style>

    <div class="menubar2">
        <ul>
            <li>
                <button class="btn btn-link">File <i class="fa fa-caret-down"></i></button>
                <ul>
                    <li><button>Save</button></li>
                    <li><button>New</button></li>
                    <li><button>Export</button></li>
                    <li><button>Delete</button></li>
                </ul>
            </li>
            <li>
                <button class="btn btn-link">Edit <i class="fa fa-caret-down"></i></button>
                <ul>
                    <li><button>Bold</button></li>
                    <li><button>Italic</button></li>
                    <li><button>Underline</button></li>
                    <li><button>Strikethrough</button></li>
                    <li>-</li>
                    <li>
                        <button>More <i class="fa fa-caret-right pull-right"></i></button>
                        <ul>
                            <ul>
                                <li><button>Save</button></li>
                                <li><button>New</button></li>
                                <li><button>Export</button></li>
                                <li><button>Delete</button></li>
                            </ul>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

    </div>

    <p>Bootstraps crap</p>
    <div class="menubar">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                File
                <i class="fa fa-caret-down"></i>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">New</a></li>
                <li><a href="#">Save</a></li>
                <li><a href="#">Save as Template</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Print</a></li>
                <li><a href="#">Print Preview</a></li>
                <li><a href="#">Export to PDF</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Delete</a></li>

            </ul>
        </div>

        <div class="btn-group" role="group">
            <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Edit
                <i class="fa fa-caret-down"></i>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Bold</a></li>
                <li><a href="#">Italic</a></li>
                <li><a href="#">Underline</a></li>
                <li><a href="#">Strikethrough</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Font size</a></li>

            </ul>
        </div>

        <div class="btn-group" role="group">
            <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Insert
                <i class="fa fa-caret-down"></i>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Special Character</a></li>
                <li><a href="#">Today's Date</a></li>
                <li><a href="#">Horizontal Rule</a></li>
            </ul>
        </div>

        <div class="btn-group" role="group">
            <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Fields
                <i class="fa fa-caret-down"></i>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#"><i class="fa fa-caret-right pull-right"></i> Dates</a></li>
                <li><a href="#"><i class="fa fa-caret-right pull-right"></i> Renter Info</a></li>
                <li><a href="#"><i class="fa fa-caret-right pull-right"></i> Listing Info</a></li>
                <li><a href="#">Rent</a></li>
                <li><a href="#">Deposit</a></li>
            </ul>
        </div>

        <button class="btn btn-link pull-right"><i class="fa fa-support"></i> Support</button>
    </div>




    <h3>Document Editor Toolbars</h3>
    <p class="uppercase bold italics small">Gettin' Tim Allen in here.</p>

    <style>
        .toolbar .btn .fa {
            margin: 0;
        }
        /*.toolbar .btn-group {*/
            /*margin-right: 10px;*/
        /*}*/
    </style>

    <p>Basic</p>

    <div class="toolbar">
        <div class="bnt btn-group">
            <button class="btn btn-default btn-outline"><i class="fa fa-copy"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-paste"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-save"></i></button>
        </div>

        <div class="bnt btn-group">
            <button class="btn btn-default btn-outline"><i class="fa fa-bold"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-italic"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-underline"></i></button>
        </div>


        <div class="bnt btn-group">
            <button class="btn btn-default btn-outline"><i class="fa fa-list-ol"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-list-ul"></i></button>
        </div>

        <div class="bnt btn-group">
            <button class="btn btn-default btn-outline"><i class="fa fa-link"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-text-height"></i></button>
        </div>

        <div class="bnt btn-group">
            <button class="btn btn-default btn-outline"><i class="fa fa-align-center"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-align-left"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-align-right"></i></button>
        </div>

        <div class="bnt btn-group">
            <button class="btn btn-default btn-outline"><i class="fa fa-pencil-square-o"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-pencil-square"></i></button>
        </div>
        <div class="bnt btn-group">
            <button class="btn btn-default btn-outline"><i class="fa fa-question-circle"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-print"></i></button>
        </div>

        <div class="bnt btn-group">
            <button class="btn btn-link"><i class="fa fa-caret-down"></i> More</button>
        </div>
    </div>

    <p>Advanced</p>

    <div class="toolbar">
        <div class="bnt btn-group">
            <button class="btn btn-default btn-outline"><i class="fa fa-file-word-o"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-upload"></i></button>
        </div>

        <div class="bnt btn-group">
            <button class="btn btn-default btn-outline"><i class="fa fa-dot-circle-o"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-check-square-o"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-i-cursor"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-toggle-down"></i></button>
        </div>

        <div class="bnt btn-group">
            <button class="btn btn-default btn-outline"><i class="fa fa-strikethrough"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-arrows-h"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-registered"></i></button>
        </div>
        <div class="bnt btn-group">
            <button class="btn btn-default btn-outline"><i class="fa fa-indent"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-dedent"></i></button>
            <button class="btn btn-default btn-outline"><i class="fa fa-table"></i></button>
        </div>
    </div>

    <hr>

    <p>Testing stuff</p>

    <div class="toolbar">
        <div class="btn-group" role="group" aria-label="">
            <button type="button" class="btn btn-default btn-outline">
                <i class="fa fa-save"></i>
            </button>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Signatures
                    <i class="fa fa-caret-down"></i>
                </button>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">Renter</li>
                    <li><a href="#">Renter Signature</a></li>
                    <li><a href="#">Renter Initial</a></li>
                    <li class="dropdown-header">Landlord</li>
                    <li><a href="#">Landlord Signature</a></li>
                </ul>
            </div>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Date
                    <i class="fa fa-caret-down"></i>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Today's Date</a></li>
                    <li><a href="#">Signature Date</a></li>
                    <li><a href="#">Commencement Date</a></li>
                    <li><a href="#">Move-In Date</a></li>
                </ul>
            </div>
        </div>

        <div class="btn-group" role="group" aria-label="">
            <button type="button" class="btn btn-default btn-outline">
                <i class="fa fa-save"></i>
            </button>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Application
                    <i class="fa fa-caret-down"></i>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Renter First Name</a></li>
                    <li><a href="#">Renter Last Name</a></li>
                    <li><a href="#">Renter Pet Name</a></li>
                    <li><a href="#">Renter Car Color</a></li>
                </ul>
            </div>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Listing
                    <i class="fa fa-caret-down"></i>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Listing Address</a></li>
                    <li><a href="#">Listing Name</a></li>
                </ul>
            </div>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Unit
                    <i class="fa fa-caret-down"></i>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Unit Bedroom</a></li>
                    <li><a href="#">Unit Bathroom</a></li>
                </ul>
            </div>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Font Size
                    <i class="fa fa-caret-down"></i>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">X-Small</a></li>
                    <li><a href="#">Small</a></li>
                    <li><a href="#">Medium</a></li>
                    <li><a href="#">Large</a></li>
                    <li><a href="#">X-Large</a></li>
                </ul>
            </div>
        </div>
    </div>


    <h3>Progress bars</h3>
    <p class="uppercase bold italics small">Look at it go!</p>

    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>

    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-action" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>



    <h3>Inputs</h3>
    <p class="uppercase bold italics small"></p>

    <style>

        .document_field {
            border-top: 1px solid transparent;
            border-bottom: 2px solid #333;
            padding: 0 3px;
            display: inline-block;
            background: #EEE;
            color: #333;
            min-width: 100px;
            cursor: text;
            font-weight: bold;

            transition: all .2s;
        }
        .document_field:focus {
            background: white;
            outline: none;
            padding-right: 40px;
            position: relative;
        }

        .document_field:before {
            font-family: FontAwesome;
            padding-right: 5px;
            font-weight: normal;
            content: '\f111';
            color: #333;
        }

        .document_field.required {
            border-bottom: 2px solid #FC9F4C;
            background: #FFE2BA;
        }

        .document_field.required:focus {
            background: white;
            border: 1px solid #FC9F4C;
            border-bottom: 2px solid #FC9F4C;
            box-shadow: 0px 2px 0px #FC9F4C;

            transition: all .2s;
        }
        .document_field.required:before {
            content: '\f069';
            color: #EF7D17;
        }

        .document_field.optional {
            background: #CFEEF9;
            border-bottom: 2px solid #0076BD;
        }


        .document_field.optional:before {
            content: '\f059';
            color: #0076BD;
        }

        .document_field.optional:focus {
            background: white;
            border: 1px solid #0076BD;
            border-bottom: 2px solid #0076BD;
            box-shadow: 0px 2px 0px #0076BD;

            transition: all .2s;
        }


        .document_field.locked {
            border-bottom: 2px solid #DF5857;
            background: #F3E6E6;
            cursor: not-allowed;
        }

        .document_field.locked:before {
            content: '\f023';
            color: #DF5857;
        }

        .edit_doc {
            /*font-size: 22px;*/
            cursor: default;
            color: #333;
            font-family: Georgia, "Times New Roman", serif;
        }
    </style>

    <div class="edit_doc">

        My name is
        <span class="document_field required" contenteditable="true">John</span>
        <span class="document_field required" contenteditable="true">Smith</span>. This is a good, clear soup. If you like it thicker, dissolve a tablespoonful of gelatine in enough cold water to cover it well—this may be done by an hour’s soaking—and add to the soup after the latter is strained and cleared of the fat. My address is
        <span class="document_field locked">1234 Moon Lane</span>. I have a pet named
        <span class="document_field optional" contenteditable="true"></span>
        living with me because I am cool.

    </div>




    <h3>Map Pins v2</h3>
    <p class="uppercase bold italics small">Pin the Pin on the Map</p>

    <style>
        .map_test {
            position: relative;
        }
        .map_test .pin {
            width: 30px;
            height: 34px;
            background-image: url("../../images/design/pin_test.png");
            background-position: 31px 0;
            position: absolute;
            top: 320px;
            left: 400px;

            color: #DF5857;
            font-family: arial;
            font-weight: bold;
            font-size: 11px;
            text-align: center;
            line-height: 30px;
        }
        .map_test .pin:hover {
            background-position: 0px 0;
            cursor: pointer;
            line-height: 26px;
        }
    </style>

    <div class="map_test">
        <div class="pin">12</div>
        <img src="../../images/design/test_map.png">
    </div>


    <h3>Blending Modes</h3>
    <p class="uppercase bold italics small">Photoshop is for suckers</p>

    <style>

        #blendFrame {
            border: 1px solid #333;
            max-width: 500px;
            height: 500px;
            background: url('../../images/castle.jpg') no-repeat, #F00;
            -webkit-background-size: cover;
            background-size: cover;

            background-blend-mode: multiply, normal;
            -webkit-background-blend-mode: multiply, normal;
        }
    </style>

    <div class="row">
        <div class="col-md-6">
            <div id="blendFrame" data-ng-style="blendStyle"></div>
        </div>
        <div class="col-md-6">

            <select id="blendModesList" class="hidden">
                <option value="normal">normal</option>
                <option value="multiply">multiply</option>
                <option value="screen">screen</option>
                <option value="overlay">overlay</option>
                <option value="darken">darken</option>
                <option value="lighten">lighten</option>
                <option value="color-dodge">color-dodge</option>
                <option value="color-burn">color-burn</option>
                <option value="hard-light">hard-light</option>
                <option value="soft-light">soft-light</option>
                <option value="difference">difference</option>
                <option value="exclusion">exclusion</option>
                <option value="hue">hue</option>
                <option value="saturation">saturation</option>
                <option value="color">color</option>
                <option value="luminosity">luminosity</option>
            </select>

            <p>
                {{blendStyle}}
            </p>


            <hr>

            <button data-ng-click="updateBlendColor('#F00')">Red</button>
            <button data-ng-click="updateBlendColor('#00F')">Blue</button>
            <button data-ng-click="updateBlendColor('#0F0')">Green</button>
            <button data-ng-click="updateBlendColor('#000')">Black</button>
            <button data-ng-click="updateBlendColor('#FFF')">White</button>

            <button data-ng-click="updateBlendColor('linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.6) 100%)')">Gradient</button>

            <hr>

            <button data-ng-click="updateBlendMode('normal')">Normal</button>
            <button data-ng-click="updateBlendMode('multiply')">Multiply</button>
            <button data-ng-click="updateBlendMode('screen')">Screen</button>
            <button data-ng-click="updateBlendMode('overlay')">Overlay</button>

        </div>
    </div>

    <a href="https://css-tricks.com/basics-css-blend-modes/">https://css-tricks.com/basics-css-blend-modes/</a>



    <h3>Animation Stress Test</h3>
    <p class="uppercase bold italics small">SPIIIIIIIIN</p>

    <style>
        .spins {
            width: 100px;
            height: 100px;
            display: inline-block;
        }

        .spins:before {
            color: #eee;
            font-size: 50px;
            font-family: FontAwesome;
            content: '\f110';
            position: absolute;
            /*top: 50%;*/
            line-height: 0;
            text-align: center;
            /*width: 100%;*/

            -webkit-animation: fa-spin 2s infinite steps(8);
            animation: fa-spin 2s infinite steps(8);
        }
    </style>

    <p class="spins" data-ng-repeat="i in range(10) track by $index">{{$index}}</p>



    <h3>IE Bullshit</h3>
    <p class="uppercase bold italics small">Livin' on the Edge</p>

    <style>
        .IE_bunk {
            color: white;

            /*normal*/
            background: cornflowerblue;

            /*special needs*/
            background: orangered\0;
        }

    </style>

    <div class="IE_bunk">
        Normal should be blue background
        <br>
        IE should be red background
    </div>

    <p>Should work all the way to Edge.</p>

    <hr>

    <h3>Centering Code v.2</h3>
    <p class="uppercase bold italics small">Because why isn't this easy?</p>

    <style>

        .block2 {
            text-align: center;
            outline: 1px solid red;

            /*width: 50%;*/
            height: 400px;
        }

        .block2:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            margin-right: -0.25em; /* Adjusts for spacing */

        }
        .block2 .centered {
            display: inline-block;
            vertical-align: middle;

            max-width: 100%;
            outline: blue solid 1px;
        }


        .block2 img {
            max-width: 100%;
        }

    </style>


    <div class="row">
        <div class="col-sm-6">
            <div class="block2">
                <div class="centered">
                    <h1>Some text</h1>
                    <p>Booking like men going towards that ship a while ago?"</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="block2">
                <div class="centered">
                    <img src="../../images/landing/two.png"/>
                </div>
            </div>

        </div>
    </div>

<hr>

    <h3>Email Design</h3>
    <p class="uppercase bold italics small">Code like it's 1999!</p>

    <style>
        .email_frame {
            width: 100%;
            background: white;
        }
        .email {padding: 20px;}
        .email hr {margin:0; padding:0;}

        .email table, .email td, .email tr {border: none; padding: 0; margin: 0}

        .email td[width="320"] {border: 1px solid red;}
    </style>

    <div class="alertInline alert-error" role="alert">
        <i class="fa fa-bomb"></i>
        <p>
            Styling is not reflective of final product. Because email renders.
        </p>
    </div>

    <div class="email_frame">

        <div class="email">


            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td valign="top" align="center" style="vertical-align:top;">
                        <table border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td align="center" width="320" style="padding:5px 5px 5px 5px;">
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="text-align: center; margin:0;">
                                                <img align="middle" height="33" width="150" alt="Renticity" src="https://s3-us-west-2.amazonaws.com/renticityassets/img/renticity_logo_small.png" style="width: 150px; height: 33px;margin:0;">
                                            </td>
                                        </tr>
                                    </table>

                                    <!--BEGIN CONTENT-->


                                    <!--Header-->
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="text-align: center; font-weight: 900; font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 20px;color:#525556;margin:0;padding:15px 0px 15px 0px;">
                                                ALL DESIGN ELEMENTS
                                            </td>
                                        </tr>
                                    </table>

                                    <!--Paragraph-->
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="text-align: center; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:14px;color:#525556;line-height:22px;margin:0;padding:0px 0px 15px 0px;">
                                                Please click on "Confirm Email" to verify your account and get started!
                                            </td>
                                        </tr>
                                    </table>

                                    <!--Button-->
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td align="center" style="-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;" bgcolor="#0076BD">
                                                <a href="www.google.com" target="_blank" style="font-size: 16px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; background-color: #0076BD;color:#FFFFFF;text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 24px 12px 24px; border: 1px solid #0076BD;display: inline-block;line-height: 16px">
                                                    Click Button</a>
                                            </td>
                                        </tr>
                                    </table>

                                    <!--Quoted Message-->
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td valign="top" align="left" width="40" style="font-family:'Times New Roman',Times,serif;font-size:70px;font-weight:900;color:#FC9F4C;margin:0;vertical-align:top;mso-line-height-rule:exactly;line-height:85%;">&#8220;</td>
                                            <td valign="top" align="center" width="280" style="text-align: center; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:14px;color:#525556;line-height:22px;white-space:pre-wrap;margin:0;">
                                                "If the telepaths who can pick up all the pain can stand this, Kevin," she said, "you certainly can." And there was no kindness at all in the you.

                                            </td>
                                        </tr>
                                    </table>

                                    <!--Quoted Sender-->
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="320" style="text-align: right; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:14px;color:#525556;font-style:italic;font-weight:900;padding:20px 0px 20px 0px;">- Larry Landlord&nbsp;</td>
                                        </tr>
                                    </table>

                                    <!--Linked Image-->
                                    <table border="0" cellspacing="10" cellpadding="0">
                                        <tr>
                                            <td align="center" style="padding:10px 0px 10px 0px;">
                                                <a href="http://www.google.com" target="_blank" style="text-decoration: none;background-color:#FFFFFF;">
                                                    <img src="https://s3-us-west-2.amazonaws.com/renticityassets/img/test_prop2.png" alt="Hyrule Castle">
                                                </a>
                                            </td>
                                        </tr>
                                    </table>

                                    <!--Image Group-->
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="text-align: center; margin:0;padding:10px 0px 10px 0px;">
                                                <img align="middle" height="100" width="100" alt="Renticity" src="https://s3-us-west-2.amazonaws.com/renticityassets/img/tes_prop1_sm.jpg" style="width: 100px; height: 100px; margin:0;">
                                                <img align="middle" height="100" width="100" alt="Renticity" src="https://s3-us-west-2.amazonaws.com/renticityassets/img/tes_prop2_sm.jpg" style="width: 100px; height: 100px; margin:0;">
                                                <img align="middle" height="100" width="100" alt="Renticity" src="https://s3-us-west-2.amazonaws.com/renticityassets/img/tes_prop3_sm.jpg" style="width: 100px; height: 100px; margin:0;">
                                                <img align="middle" height="100" width="100" alt="Renticity" src="https://s3-us-west-2.amazonaws.com/renticityassets/img/tes_prop4_sm.jpg" style="width: 100px; height: 100px; margin:0;">
                                                <img align="middle" height="100" width="100" alt="Renticity" src="https://s3-us-west-2.amazonaws.com/renticityassets/img/tes_prop5_sm.jpg" style="width: 100px; height: 100px; margin:0;">
                                            </td>
                                        </tr>
                                    </table>


                                    <!--Center Link-->
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td align="center" style="padding:10px 0px 10px 0px;">
                                                <a href="www.google.com" style="font-size:18px;color:#0076BD;text-decoration:underline;display:inline-block">Hyrule Castle</a>
                                            </td>
                                        </tr>
                                    </table>


                                    <!--Paragraph-->
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="text-align: center; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:14px;color:#525556;line-height:22px;margin:0;padding:10px 0px 10px 0px;">
                                                2142 8th Ave. N, Seattle, WA, 98109
                                                <br>
                                                $1345-1395 &bull; 1 bed &bull; 1 bath
                                                <br>
                                                One Bedroom Unit
                                            </td>
                                        </tr>
                                    </table>



                                    <!--RECEIPT-->
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="text-align: center; font-weight: 900; font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 20px;color:#525556;margin:0;padding:15px 0px 15px 0px;">
                                                RECEIPT
                                            </td>
                                        </tr>
                                    </table>

                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="260" style="text-align: left; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:14px;color:#525556;line-height:22px;">
                                                Renter Application - Single Share
                                            </td>
                                            <td width="60" style="text-align: right; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:14px;color:#525556;line-height:22px;font-weight:900;">
                                                $35.00
                                            </td>
                                        </tr>
                                    </table>


                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="text-align: center;margin:0;padding:10px 0px 10px 0px;">
                                                <hr height="1" style="width:20px;color: #46B7E7; background-color: #46B7E7;border: none; height: 1px;"/>
                                            </td>
                                        </tr>
                                    </table>

                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="260" style="text-align: left; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:20px;color:#525556;line-height:22px;padding:0px 0px 15px 0px">
                                                Total
                                                <span style="vertical-align: super;font-size:11px;">&nbsp;</span>
                                            </td>
                                            <td width="60" style="text-align: right; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:20px;color:#525556;line-height:22px;font-weight:900;padding:0px 0px 15px 0px">
                                                $35.00
                                            </td>
                                        </tr>
                                    </table>

                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="160" style="text-align:left; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:11px;color:#949697;margin:0px;line-height:14px;">
                                                Mastercard - 1234
                                            </td>
                                            <td width="160" style="text-align:right; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:11px;color:#949697;margin:0px;line-height:14px;">
                                                06/16/2015
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="160" style="text-align:left; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:11px;color:#949697;margin:0px;line-height:14px;">
                                                Roxy Renter
                                            </td>
                                            <td width="160" style="text-align:right; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:11px;color:#949697;margin:0px;line-height:14px;">
                                                # R1-26
                                            </td>
                                        </tr>
                                    </table>




                                    <!--END CONTENT-->


                                    <!--Hr-->
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="text-align: center;margin:0;padding:10px 0px 10px 0px;">
                                                <hr height="1" style="width:20px;color: #C7C9CA; background-color: #C7C9CA;border: none; height: 1px;"/>
                                            </td>
                                        </tr>
                                    </table>

                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="text-align: center; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:11px;color:#949697;padding:10px 0px 10px 0px;">
                                                A few too many emails?
                                                <a href="#" style="color: #0076BD; text-decoration: underline;">Unsubscribe</a>
                                                <br>
                                                2727 Fairview Ave E, Seattle, WA, 98102
                                                <br>
                                                &copy; Renticity 2015
                                            </td>
                                        </tr>
                                    </table>


                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>


        </div>



    </div>

<hr>

    <h3>Fileupload styling</h3>
    <p class="uppercase bold italics small">Because fuck html inputs, seriously</p>

    <style>
        .fileUpload {
            position: relative;
            overflow: hidden;
        }
        .fileUpload input[type="file"] {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            padding: 0;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            filter: alpha(opacity=0);
        }
    </style>

    <data-renticity-upload-directive data-catch-uploader-class="fileUpload btn btn-default btn-outline" data-catch-uploader-url="/resource/image/post/{{postId}}?imageGroup=propLogos" data-ng-model="post.propertyLogoId" data-current-image-name="post.propertyLogoName" data-root-model="post" data-image-group="'propLogos'" data-image-loading="imageLoading" data-image-dimension="200">
        <i class="fa fa-image"></i> Select Image
    </data-renticity-upload-directive>

    <br>

    <div class="fileUpload btn btn-default btn-outline">
        <span>
            <i class="fa fa-book"></i> Upload
        </span>
        <input type="file" class="upload" />
    </div>

    <hr>

    <h3>Return of the 3-up</h3>

    <style>
        .RotTU {}

        .RotTU .item {
            border: 1px solid #dcdcdc;
            background: white;
            height: 150px;
            position: relative;

            transition: border 1s;

        }
        .RotTU .item:hover {
            border: 1px solid blue;
            transition: border 1s;
        }

        .RotTU .item .img {
            float: left;
            height: 150px;
            width: 150px;
            background: red;
            transform: scale(1,1);
            position: absolute;
            left: 0;
            box-shadow: 1px 0px 1px 0px #333;

            transition: transform .6s;
            transform-origin: 0% 50%;
        }
        .RotTU .item:hover .img {
            transition: transform .6s;
            z-index: 1;

            transform-origin: 0% 50%;
        }
        .RotTU .item .img1 {
            left: 20px;
            background: plum;
        }

        .RotTU .item:hover .img1 {
            transform: translateX(600px) scale(2,2);
        }
        .RotTU .item .img2 {
            left: 10px;
            background: mediumpurple;
        }
        .RotTU .item:hover .img2 {
            transform: translateX(300px) scale(2,2);
        }
        .RotTU .item .img3 {
            left: 0px;
            background: purple;
        }
        .RotTU .item:hover .img3 {

            transform: translateX(0px) scale(2,2);
        }

    </style>

    <div class="RotTU">
        <div class="item" data-ng-repeat="i in [0,1,2]">
            <div class="img img1"></div>
            <div class="img img2"></div>
            <div class="img img3"></div>
            <div>The Hyrule Apartments</div>
            <div>$1200-1300</div>
            <div>1-4 bed, 2-5 bath</div>
        </div>
    </div>

    <hr>

    <h3>3-up Problem</h3>

    <style>
        .three-up-problem {}

        .three-up-problem .three-up, .three-up-problem .one-up {
            float: left;
        }

        .three-up-problem .three-up {
            width: 33.33%;
            height: 50px;
        }

        .three-up-problem .one-up {
            width: 99.99%;
            height: 50px;
        }
    </style>

    <div class="three-up-problem">
        <div class="item three-up gr_flamingo"></div>
        <div class="item three-up gr_meadow"></div>
        <div class="item three-up gr_chambray"></div>
        <div class="item three-up gr_rebecca"></div>
        <div class="item one-up gr_ecstasy"></div>
        <div class="item three-up gr_razzmatazz"></div>
        <div class="item three-up gr_royal"></div>
        <div class="item one-up gr_wisteria"></div>
        <div class="item three-up gr_cascade"></div>
        <div class="item three-up gr_salem"></div>
        <div class="item three-up gr_california"></div>

    </div>
    <div class="clearfix"></div>

    <hr>

    <h3>Animation Time v2</h3>

    <style>

        h2:nth-of-type(2) .fa {-webkit-animation-delay: 0.5s;}
        h2:nth-of-type(3) .fa {-webkit-animation-delay: 1s;}
        h2:nth-of-type(4) .fa {-webkit-animation-delay: 1.5s;}

        h2 .fa {
            position: relative;
            -webkit-animation-name: icon-slide;
            -webkit-animation-duration: 1s;
            -webkit-animation-fill-mode:both;
            width: 36px;
            text-align: center;
        }

        @-webkit-keyframes icon-slide {
            from {
                transform: translateX(-10px);
                opacity: 0;
            }

            to {
                transform: translateX(0px);
                opacity: 1;
            }
        }
    </style>

    <h2><i class="fa fa-envelope-o"></i> Messages</h2>
    <h2><i class="fa fa-heart-o"></i> Saved Listings</h2>
    <h2><i class="fa fa-file-text-o"></i> Applications</h2>

<hr>

    <h3>Read More</h3>

    <style>

        .read-more {
            position: relative;
        }


        .read-more-check ~ .read-more-wrap {
            max-height: 88px;
            overflow-y: hidden;

        }

        .read-more-check:checked ~ .read-more-wrap {
            max-height: 9999px;
            overflow-y: visible;
        }

        .read-more-check[type=checkbox]:focus::before,
        .read-more-check[type=checkbox]:hover::before {
            border: 1px solid #46B7E7;
            text-decoration: underline;
            transition: border .2s;
        }
        .read-more-check:checked {
            display: none;
        }

        input.read-more-check[type=checkbox] {
            opacity: 1;
            width: 88px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        input.read-more-check[type=checkbox]:before {
            color: #0076BD;
            content: "…Read More";
            position: relative;
            padding: 3px 5px;
            background-color: #FAFAFB;
            border: 1px solid #C7C9CA;
            border-radius: 2px;
            top: -2px;
            transition: border .2s;
        }

    </style>

    <div>

    <div class="read-more">
            <input type="checkbox" class="read-more-check">

            <div class="read-more-wrap">
                <p>
                    As we wound on our endless way, and the sun sank lower and lower behind us, the shadows of the evening began to creep round us. This was emphasised by the fact that the snowy mountain-top still held the sunset, and seemed to glow out with a delicate cool pink. Here and there we passed Cszeks and Slovaks, all in picturesque attire, but I noticed that goitre was painfully prevalent. By the roadside were many crosses, and as we swept by, my companions all crossed themselves. Here and there was a peasant man or woman kneeling before a shrine, who did not even turn round as we approached, but seemed in the self-surrender of devotion to have neither eyes nor ears for the outer world. There were many things new to me: for instance, hay-ricks in the trees, and here and there very beautiful masses of weeping birch, their white stems shining like silver through the delicate green of the leaves. Now and again we passed a leiter-wagon—the ordinary peasant’s cart—with its long, snake-like vertebra, calculated to suit the inequalities of the road. On this were sure to be seated quite a group of home-coming peasants, the Cszeks with their white, and the Slovaks with their coloured, sheepskins, the latter carrying lance-fashion their long staves, with axe at end. As the evening fell it began to get very cold, and the growing twilight seemed to merge into one dark mistiness the gloom of the trees, oak, beech, and pine, though in the valleys which ran deep between the spurs of the hills, as we ascended through the Pass, the dark firs stood out here and there against the background of late-lying snow. Sometimes, as the road was cut through the pine woods that seemed in the darkness to be closing down upon us, great masses of greyness, which here and there bestrewed the trees, produced a peculiarly weird and solemn effect, which carried on the thoughts and grim fancies engendered earlier in the evening, when the falling sunset threw into strange relief the ghost-like clouds which amongst the Carpathians seem to wind ceaselessly through the valleys. Sometimes the hills were so steep that, despite our driver’s haste, the horses could only go slowly. I wished to get down and walk up them, as we do at home, but the driver would not hear of it. “No, no,” he said; “you must not walk here; the dogs are too fierce”; and then he added, with what he evidently meant for grim pleasantry—for he looked round to catch the approving smile of the rest—“and you may have enough of such matters before you go to sleep.” The only stop he would make was a moment’s pause to light his lamps.
                </p>
            </div>
        </div>
    </div>


<hr>


    <h3>KBA Status</h3>

    <div>Display Name: {{user().displayName}}</div>
    <div>Has Posts: {{user().hasPosts}}</div>
    <div>Has KBA: {{user().hasValidKba}}</div>

    <hr>

    <h3>SVG</h3>

    <svg xmlns="http://www.w3.org/2000/svg"  version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 107.2 153.9" style="enable-background:new 0 0 107.2 153.9; height: 200px;" xml:space="preserve">
    <style type="text/css">
        .door1, .door2{fill:#4AB8E6;stroke:#4AB8E7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    </style>
    <path class="door1" d="M106.4 89c0 13.4 0 26.7 0 40.1c0 2.4-0.8 4.3-3 5.3c-2.1 1-4.1 0.8-6-0.6c-1.3-0.9-1.9-2.2-2.1-3.8 c-0.1-0.5 0-1 0-1.6c0-25.7 0.1-51.4 0-77.1c0-10-3.7-18.6-10.6-25.9c-7.1-7.5-15.9-11.7-26.1-12.9c-7.3-0.8-14.4 0.3-21.2 3.1 C31.6 18 26.7 21.5 22.6 26c-5.2 5.8-8.6 12.5-9.6 20.3c-0.3 2.5-0.5 5.1-0.5 7.6c0 25.1 0 50.2 0 75.2c0 2.3-0.8 4.1-2.9 5.1 c-2 1-4 0.9-5.9-0.4c-1.4-1-2.1-2.4-2.3-4c0-0.5 0-1 0-1.4c0-25.6 0-51.2 0-76.8c0-12.2 4-22.9 11.9-32.1c8.7-10.1 19.8-16 33-17.9 c8.3-1.2 16.5-0.5 24.5 2.1C77.8 6 84 9.5 89.5 14.3c8.7 7.7 14.2 17.3 16.3 28.8c0.4 2.2 0.6 4.4 0.6 6.5 C106.4 62.8 106.4 75.9 106.4 89z"/>
    <path id="XMLID_48_" class="door2" d="M86.9 55.5c0-2.8-0.5-5.6-1.2-8.3c-2.4-9.6-7.9-17-16.7-21.8c-4.9-2.7-10.2-4.1-15.8-3.1 c-7.5 1.3-14.2 4.3-19.6 9.9C28.8 37.2 25.9 43.4 24 50c-2.4 8.4-2.9 17-3 25.6c-0.2 11.4 0 22.7 0 34.1c0 0 0 0 0 0 c0 6.8 0 13.6 0 20.4c0 4.8 0 9.7 0 14.5c0.1 5.1 5.1 8.5 9.7 6.5c1.4-0.6 2.8-1.3 4.2-2c5-2.4 10.1-4.9 15.1-7.3 c11-5.3 21.9-10.5 32.9-15.7c2.8-1.3 4.1-3.6 4.1-6.6C87 98.2 87 76.8 86.9 55.5z M41.4 103.4c-2.3 0-4.2-2.6-4.2-5.8 c0-3.2 1.9-5.8 4.2-5.8c2.3 0 4.2 2.6 4.2 5.8C45.7 100.8 43.8 103.4 41.4 103.4z"/>
    </svg>


<hr>

    <h3>Account Switch</h3>

    <style>
        .account-switch {}
        .account-switch .account {
            border-radius: 3px;
            width: 150px;
            height: 150px;
            display: inline-block;

            color: #525556;
            cursor: pointer;
            background: linear-gradient(135deg, #FFFFFF 0%,#FBFBFB 66%,#F5F5FF 100%);

            transition: color .2s, background-color .2s;
        }
        .account-switch .account:hover {
            color: white;
            background: linear-gradient(135deg, #5ebfe5 0%,#46b7e7 66%,#43aed8 100%);
            background-color: #46B7E7;
        }
        .account-switch .fa {
            font-size: 75px;
            margin: 15px 0;
            display: block;

        }

        .account-switch p {
            font-size: 30px;
            text-align: center;
            width: 100%;
            text-shadow: 0 2px 2px rgba(0,0,0,0.4);
        }
    </style>

    <div class="account-switch">
        <div class="account card">
            <p class="">
                <i class="fa fa-building"></i>
                Landlord
            </p>
        </div>
        <div class="account card">
            <p class="">
                <i class="fa fa-user"></i>
                Renter
            </p>
        </div>

    </div>

    <hr>

    <h3>Step Process v2.0</h3>

    <ol>
        <li>Profile</li>
        <li>Payment</li>
        <li>KBA</li>
        <li>Review</li>
    </ol>


    <style>

        .step {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            position: relative;
        }
        .step:before {
            content: "";
            top: 20px;
            border-bottom: 1px dashed #949697;
            position: absolute;
            width: 98%;
            left: 1%;
        }

        .progress-circles {
            display: inline-block;
            text-align: center;
            color: #C7C9CA;
        }

        .progress-circles:before {
            content: "";
            border: 1px solid #949697;
            border-radius: 50%;
            height: 32px;
            width: 32px;
            position: relative;
            background-color: white;
            display: inline-block;
            margin-bottom: -20px;
        }

        .progress-circles span {
            text-align: center;
            line-height: 52px;
            font-size: 12px;
        }

        .progress-circles .fa {
            display: block;
            font-size: 14px;
            line-height: 0px;
            top: -1px;
            position: relative;
        }

        .progress-circles .fa-street-view {
            position: relative;
            left:1px;
        }
        .progress-circles.current {color: #0076BD;}

        .progress-circles.current:before {
            box-shadow: 0 1px 3px #46B7E7;
            border-color: #46B7E7;
        }

    </style>

    <div class="step">
        <span class="progress-circles">
            <i class="fa fa-street-view"></i>
            <span>Profile</span>
        </span>
        <span class="progress-circles">
            <i class="fa fa-credit-card"></i>
            <span>Payment</span>
        </span>
        <span class="progress-circles current">
            <i class="fa fa-tasks"></i>
            <span>Verify</span>
        </span>
        <span class="progress-circles">
            <i class="fa fa-retweet"></i>
            <span>Review</span>
        </span>
    </div>

    <hr>



    <h3>Disabled</h3>

    <a href="/#" class="btn btn-primary">Active</a>
    <a href="/#" data-ng-disabled class="btn btn-primary disabled">Active</a>

    <hr>

    <h3>Show More</h3>

    <Style>
        .clamped {
            line-height: 1.5;
            overflow: hidden;
            position: relative;

            /* Clamp to 2 lines, ie line-height x 2: */
            max-height: 3em;
        }

        .ellipsis {
            background: #fff;
            bottom: 0;
            position: absolute;
            right: 0;
            padding: 0 .5em;
        }

        .fill {
            background: #fff;
            height: 100%;
            position: absolute;
            width: 100%;
        }

        .clamped button {
            background: none;
            border: none;
            color: blue;
        }

        .clamped.opened {
            max-height: 999em;
        }
    </Style>

    <p class="clamped " data-ng-init="open = 'false'" data-ng-class="open ? '' : 'opened'">
        But more text here (the same markup structure though): if the text overflows from the clamped paragraph's height, the ellipse will show and life will be all grand. Well, I am not so sure about that. No guarentees and all. Buyer beware.
        But more text here (the same markup structure though): if the text overflows from the clamped paragraph's height, the ellipse will show and life will be all grand. Well, I am not so sure about that. No guarentees and all. Buyer beware.
        But more text here (the same markup structure though): if the text overflows from the clamped paragraph's height, the ellipse will show and life will be all grand. Well, I am not so sure about that. No guarentees and all. Buyer beware.
        <span class="ellipsis">
            <button data-ng-click="open = !open">More +</button>
        </span>
        <span class="fill"></span>
    </p>

    <p>{{open}}</p>

<hr>

    <h3>Mobile Input Tests</h3>

    <select>
        <option>Min Price</option>
        <option>$500</option>
        <option>$600</option>
        <option>$700</option>
        <option>$800</option>
        <option>$900</option>
        <option>$1000</option>
        <option>$1100</option>
        <option>$1200</option>
        <option>$1300</option>
        <option>$1400</option>
        <option>$1500</option>
        <option>$1600</option>
        <option>$1700</option>
        <option>$1800</option>
        <option>$1900</option>
        <option>$2000</option>
        <option>$2100</option>
        <option>$2200</option>
        <option>$2300</option>
        <option>$2400</option>
        <option>$2500</option>
        <option>$2600</option>
        <option>$2700</option>
        <option>$2800</option>
        <option>$2900</option>
        <option>$3000</option>
        <option>$3100</option>
        <option>$3200</option>
        <option>$3300</option>
        <option>$3400</option>
        <option>$3500</option>
    </select>
    <select>
        <option>Max Price</option>
        <option>$500</option>
        <option>$600</option>
        <option>$700</option>
        <option>$800</option>
        <option>$900</option>
        <option>$1000</option>
        <option>$1100</option>
        <option>$1200</option>
        <option>$1300</option>
        <option>$1400</option>
        <option>$1500</option>
        <option>$1600</option>
        <option>$1700</option>
        <option>$1800</option>
        <option>$1900</option>
        <option>$2000</option>
        <option>$2100</option>
        <option>$2200</option>
        <option>$2300</option>
        <option>$2400</option>
        <option>$2500</option>
        <option>$2600</option>
        <option>$2700</option>
        <option>$2800</option>
        <option>$2900</option>
        <option>$3000</option>
        <option>$3100</option>
        <option>$3200</option>
        <option>$3300</option>
        <option>$3400</option>
        <option>$3500</option>
    </select>
    <br>
    <br>

    <input type="tel" placeholder="Min Price">
    <input type="tel" placeholder="Max Price">



    <h3>Scroller Derby</h3>


    <style>
        .scrollerDerby {
            overflow-y: scroll;
        }

        .scrollerDerby::-webkit-scrollbar {
            width: 8px;
        }

        .scrollerDerby::-webkit-scrollbar-track {
            border-radius: 3px;
            background-color: #F1F1F1;
        }

        .scrollerDerby::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background-color: #BCBCBC;
        }

    </style>

    <div class="scrollerDerby" style="height: 14em; width: 50em;">
        <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way – in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</p>
        <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way – in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</p>
        <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way – in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</p>
        <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way – in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</p>
        <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way – in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</p>
    </div>

    <hr>

    <h3>Verified Badges</h3>

    <style>
        .verified {
            display: inline-block;
            position: relative;
            height: 4.3em;
            width: 12em;
            border: 1px solid #46B7E7;
            border-radius: 5px;
            /*top: 0.5em;*/
            background: white;
        }

        .verified p {
            font-size: 1.2em;
            line-height: 1.35em;
            float: left;
            text-align: right;
            color: #46B7E7;
            font-weight: 700;
            padding-right: 0.8em;
            border-right: 1px solid #46B7E7;
            margin: 0;
            position: absolute;
            top: 0.5em;
            left: 0.4em;
            width: 5.6em;
        }

        .verified .fa-user {
            font-size: 3.6em;
            color: #46B7E7;
            position: absolute;
            text-align: center;
            top: 0.1em;
            right: 0.2em;
        }

        .verified .fa-check,
        .verified .fa-question-circle {
            font-size: 1.5em;
            position: absolute;
            top: 1.6em;
            right: 0.6em;
            text-shadow: 0px 2px 0px #FFF, 2px 0px 0px #FFF, -2px 0px 0px #FFF, 0px -2px 0px #FFF;
            color: #FC9F4C;
        }

        .unverified  {border-color: #C7C9CA;}
        .unverified .fa-user {color: #C7C9CA;}

        .unverified p {

            border-color: #C7C9CA;
            color: #949697;
        }

        .unverified .fa-question-circle {color: #949697;}
    </style>


    <div class="verified">
        <p>Verified<br>Landlord</p>
        <i class="fa fa-user"></i>
        <i class="fa fa-check"></i>
    </div>

    <div class="verified unverified">
        <p>Unverified<br>Landlord</p>
        <i class="fa fa-user"></i>
        <i class="fa fa-question-circle"></i>
    </div>

    <hr>

    <h3>New Checkboxes and Radios</h3>

    <!--<div class="alertInline alert-info" role="alert">-->
        <!--<i class="fa fa-exclamation-circle"></i>-->
        <!--<p>-->
            <!--Unhide in comments to see.-->
        <!--</p>-->
    <!--</div>-->

    <!--http://www.thecssninja.com/css/custom-inputs-using-css-->

    <style>
        input:hover + label,
        input:focus + label,
        input + label:hover,
        input:focus + label {
            color: #0076BD;
            cursor: pointer;
        }

        input + label {
            background: url(
                data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAFACAYAAAC1CvwiAAAACXBIWXMAAA7EAAAOxAGVKw4bAAA57WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwMTQgNzkuMTU2Nzk3LCAyMDE0LzA4LzIwLTA5OjUzOjAyICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgICAgICAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoV2luZG93cyk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMTUtMDQtMTZUMTY6MTE6MDYtMDc6MDA8L3htcDpDcmVhdGVEYXRlPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNS0wNC0xNlQxNzoxMDowNC0wNzowMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6TWV0YWRhdGFEYXRlPjIwMTUtMDQtMTZUMTc6MTA6MDQtMDc6MDA8L3htcDpNZXRhZGF0YURhdGU+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgICAgIDxwaG90b3Nob3A6Q29sb3JNb2RlPjM8L3Bob3Rvc2hvcDpDb2xvck1vZGU+CiAgICAgICAgIDx4bXBNTTpJbnN0YW5jZUlEPnhtcC5paWQ6YTQ3ZWQ0YTQtNWMyNC0wMzQ0LWJiNTUtYWIzMzYxYjg2NWI4PC94bXBNTTpJbnN0YW5jZUlEPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD5hZG9iZTpkb2NpZDpwaG90b3Nob3A6MTQyOGQwNmQtZTQ5Ni0xMWU0LTk2OWUtYjJmNDFiMTQ4NWYwPC94bXBNTTpEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06T3JpZ2luYWxEb2N1bWVudElEPnhtcC5kaWQ6NGVhYmNhODktOTE2MS1kZTQxLThiYjYtNzg3MGJiYzU4MjY2PC94bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+CiAgICAgICAgIDx4bXBNTTpIaXN0b3J5PgogICAgICAgICAgICA8cmRmOlNlcT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+Y3JlYXRlZDwvc3RFdnQ6YWN0aW9uPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6aW5zdGFuY2VJRD54bXAuaWlkOjRlYWJjYTg5LTkxNjEtZGU0MS04YmI2LTc4NzBiYmM1ODI2Njwvc3RFdnQ6aW5zdGFuY2VJRD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OndoZW4+MjAxNS0wNC0xNlQxNjoxMTowNi0wNzowMDwvc3RFdnQ6d2hlbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OnNvZnR3YXJlQWdlbnQ+QWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpPC9zdEV2dDpzb2Z0d2FyZUFnZW50PgogICAgICAgICAgICAgICA8L3JkZjpsaT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+c2F2ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDphNDdlZDRhNC01YzI0LTAzNDQtYmI1NS1hYjMzNjFiODY1Yjg8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMTUtMDQtMTZUMTc6MTA6MDQtMDc6MDA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE0IChXaW5kb3dzKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmNoYW5nZWQ+Lzwvc3RFdnQ6Y2hhbmdlZD4KICAgICAgICAgICAgICAgPC9yZGY6bGk+CiAgICAgICAgICAgIDwvcmRmOlNlcT4KICAgICAgICAgPC94bXBNTTpIaXN0b3J5PgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj45NjAwMDAvMTAwMDA8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjk2MDAwMC8xMDAwMDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT42NTUzNTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTY8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MzIwPC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz4/xCplAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAQkSURBVHja7JjBahtJEIbrGYzv1mlfIO8wb+AXMKxfYKEDOdk3HaSDfdg9LNmLfQhYht3kJEPjxKzUdNseZyNiBVma7JrFLATNjEA4hxmoHDxSNJJamp4eiKMtQYMtpr6Z7qr6NX8BIoLNgiAIUEiVawVBgDD6w/QzujEIqTDvhwAEWDWAVTNZt7O1oKwA4Lemh8B4rvXi/G8EYBz/eHtrnMZXf90+gIDx3IVEAAKsGqB2+Y9x8O9XSTPtv+7mbufnDY80kTSRAAQgTSRNJO9MAAKQdybvTJr48Bl+Qrcb5gQM/8XyL1dY2rvCH9/0DQETwQ/rA7qzgCF2/+yi6MdLgt9i+f1w+gmG+P7VO/xh7wpLey18eRcvDZ4C/IfPUxe28GX3dmHw7BncfcSfUgGLg+cf4lzI/GB9FlIQffDiNN59xGe/vsOfFwSTJpJ3/p6985QmmgHmaGJ2gEYTpwDmmjgByKeJE4B8mpjeQg5NnD1EQ02cnwUDTdSnMaMmrop3BsbtFiLaA0gTSRNJE0kTV0QTCxFV8s7knck7k3cm7/xYAEKq6eUIqapCKiGkCpMlku+c6evH+i6kKgmpKvLCbfY8rx6GAzeKYz+KYz8MB27P8+rywm0KqSpCqlLqhyUJPujcdGtxHLd1uY/juN256daEVAdjSAKodG66NUQcZKihQQKpAOMAQipHXrjNRXee9yTJdhwQUlV7nlc3LeWe59WFVFUQUokwHLimgDAcuEIqAUKqMIpj3xQQxbEvpAoLAVhvwfoQ7dJoXUiFlLJ1M02uZe1c/GveagIcYLwKjAtgPEyWSL5beIglYLyytnPW3Dq6rp90+m5wH/nBfeSfdPru1tF1fW3nrAmMV5JrU4ASMH6wediqDT5H2kIafI7am4etGjB+MIYkgMrmYStzKSeQcSk7aztnzUV3nvckyXYcAMarW0fXxu28dXRdB8arAIyLk07fWFBOOn0XGBcAjIfBfWQsacF95APjYSEA6y1YH6J1Gq0LqZBStm6mQtqZNDHvIY5fGJM0ru/q07i++zWN47iJYONCmgTkKuXRq66zvmveTMl2SBMfjyZapdG6kAopZetmStm4Je08cz155wK888Q/JSFV5fxS/7p/fvn1dX8akMtwTAJyWZ4RwDm/NDddyXbIOz8e72ybRutCKqSUrZspfzuTJtI8UTdPPO35uH3cxo1yAzfKDdw+buNpz882Tzzt+fhkXyE85an1ZF+lIFpN3D5uzwSP1vZxe7kmbpQbWsBGubFcE/MArLdgfYh2aaR54ixgqYD8DwA0T8zWTAvniVnbWeudswqK1jtnlTStd84DsN6C9SFap5HmiaSJNE/UzBOzNJN2nkia+K000SqNNE8k70zzRP08MYvp0s4TyTt/K+9sm0aaJ373kvZlAMbtStzNqX4YAAAAAElFTkSuQmCC
                ) 0 -1px no-repeat;
            height: 17px;
            padding-left: 25px;
        }
        input[type=radio] + label									{ background-position: 0 -161px; }

        /* Checked styles */
        input[type=radio]:checked + label 							{ background-position: 0 -241px; }
        input[type=checkbox]:checked + label 						{ background-position: 0 -81px; }
        input[type=checkbox]:hover:checked + label,
        input[type=checkbox]:focus:checked + label,
        input[type=checkbox]:checked + label:hover,
        input[type=checkbox]:focus:checked + label 					{ background-position: 0 -101px; }
        input[type=radio]:hover:checked + label,
        input[type=radio]:focus:checked + label,
        input[type=radio]:checked + label:hover,
        input[type=radio]:focus:checked + label 					{ background-position: 0 -261px; }

        /* Hover & Focus styles */
        input[type=checkbox]:hover + label,
        input[type=checkbox]:focus + label,
        input[type=checkbox] + label:hover 							{ background-position: 0 -21px; }
        input[type=radio]:hover + label,
        input[type=radio]:focus + label,
        input[type=radio] + label:hover								{ background-position: 0 -181px; }

        /* Active styles */
        input[type=checkbox]:active + label,
        input[type=checkbox] + label:hover:active					{ background-position: 0 -41px; }
        input[type=radio]:active + label,
        input[type=radio] + label:hover:active						{ background-position: 0 -201px; }
        input[type=checkbox]:active:checked + label,
        input[type=checkbox]:checked + label:hover:active			{ background-position: 0 -121px; }
        input[type=radio]:active:checked + label,
        input[type=radio]:checked + label:hover:active				{ background-position: 0 -281px; }

        /* Disabled styles */
        input[type=checkbox]:disabled + label,
        input[type=checkbox]:hover:disabled + label,
        input[type=checkbox]:focus:disabled + label,
        input[type=checkbox]:disabled + label:hover,
        input[type=checkbox]:disabled + label:hover:active			{ background-position: 0 -61px; }
        input[type=radio]:disabled + label,
        input[type=radio]:hover:disabled + label,
        input[type=radio]:focus:disabled + label,
        input[type=radio]:disabled + label:hover,
        input[type=radio]:disabled + label:hover:active				{ background-position: 0 -221px; }
        input[type=checkbox]:disabled:checked + label,
        input[type=checkbox]:hover:disabled:checked + label,
        input[type=checkbox]:focus:disabled:checked + label,
        input[type=checkbox]:disabled:checked + label:hover,
        input[type=checkbox]:disabled:checked + label:hover:active	{ background-position: 0 -141px; }
        input[type=radio]:disabled:checked + label,
        input[type=radio]:hover:disabled:checked + label,
        input[type=radio]:focus:disabled:checked + label,
        input[type=radio]:disabled:checked + label:hover,
        input[type=radio]:disabled:checked + label:hover:active		{ background-position: 0 -301px; }

    </style>


    <fieldset>
        <input type="text" placeholder="tabbing catch">

        <p>Yes:</p>
        <input type="radio" value="Yes" id="yes" name="question"> <label for="yes">Yes</label>
        <input type="radio" value="No" id="no" name="question"> <label for="no">No</label>

        <p>Stuff you like:</p>
        <input type="checkbox" value="CSS3" id="css3"> <label for="css3">CSS3</label>
        <input type="checkbox" value="HTML5" id="html5"> <label for="html5">HTML5</label>
        <input type="checkbox" value="JavaScript" id="javascript"> <label for="javascript">JavaScript</label>
        <input type="checkbox" value="Other" id="other"> <label for="other">Other</label>

    </fieldset>

    <hr>

    <h3>Sweet Underline</h3>

    <style>
        a.styled {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNDVFNUZGOUQ2MUUxMUUzQjAxM0Q4RkJEODE4M0ZCMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNDVFNUZGQUQ2MUUxMUUzQjAxM0Q4RkJEODE4M0ZCMiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU0NUU1RkY3RDYxRTExRTNCMDEzRDhGQkQ4MTgzRkIyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0NUU1RkY4RDYxRTExRTNCMDEzRDhGQkQ4MTgzRkIyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+CLnEWgAAAA9JREFUeNpiYGBgmAkQYAAAngCaoMXLCwAAAABJRU5ErkJggg==);
            background-position: 0px 19px;
            background-repeat: repeat-x;
            background-size: 1px 1px;
            color: #333;
            font-family: Hythlodaeus, Georgia, serif;
            font-size: 19px;
            line-height: 28.5px;
            text-decoration: none;
            text-shadow: rgb(255, 255, 255) 1px 0px 0px, rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) -1px 0px 0px, rgb(255, 255, 255) -2px 0px 0px;

        }
    </style>

    <a class="styled">Pop things why quick, it!</a>

    <hr>

    <h3>Pop-shadow 3</h3>
    <p class="uppercase bold italics small">At's all down page from here.</p>


    <style>
        .popShadow .fa-bolt {
            text-shadow: 2px 2px 0px white, 4px 4px 0px #0076BD;
            color: #46B7E7;
        }
        .popShadow .fa-bug {
            text-shadow: 2px 2px 0px white, 4px 4px 0px #CF7D39;
            color: #FC9F4C;
        }

    </style>

    <div class="popShadow">

        <i class="fa fa-bolt fa-4x"></i>
        <i class="fa fa-bug fa-4x"></i>


    </div>

    <hr>

    <h3>Pop 2 : Electric Boogaloo animation</h3>

    <style>
        .slide {
            -webkit-animation: slider 1s ease;

            position: relative;
            
            margin-left: 15px;;
        }

        @-webkit-keyframes slider {
            0% {
                opacity: 0;
                left: -10px;
            }

            100% {
                opacity: 1;
                left: 0px;
            }
         }
    </style>

    <div class="slide">

        <i class="fa fa-bomb fa-4x">

        </i>

    </div>

<hr>

    <h3>"Needs more Pop" animation</h3>
    <p class="uppercase bold italics small">Moving things around since 2011.</p>

    <style>
        .spinin {

        }

        .spinin .frame {
            border: 3px solid #46B7E7;
            border-radius: 50%;

            height: 85px;
            width: 85px;

            display: inline-block;



            -webkit-animation: spininin .5s cubic-bezier(1.000, 0.005, 0.720, 1.650);

        }


        .spinin .symbol {
            font-size: 50px;

            display: inline-block;
            color: #46B7E7;

            -webkit-animation: spininin2 .75s cubic-bezier(1.000, 0.005, 0.720, 1.650);

            position: relative;
            top: -23px;
            left: -70px;

        }

        .spinin .frame.green, .spinin .symbol.green {
            color: #00B16A;
            border-color: #00B16A;
        }

        .spinin .frame.orange, .spinin .symbol.orange {
            color: #DB0A5B;
            border-color: #DB0A5B;
        }

        @-webkit-keyframes spininin {
            0% {
                -webkit-transform: scale(0, 0);
            }

            100% {
                -webkit-transform: scale(1, 1);
            }

         }

        @-webkit-keyframes spininin2 {
            0% {
                -webkit-transform: scale(0, 0);
            }

            50% {
                -webkit-transform: scale(0, 0);
            }
            100% {
                -webkit-transform: scale(1, 1);
            }

         }



    </style>

    <div class="spinin">
        <div class="frame">

        </div>
        <div class="symbol">
            <i class="fa fa-bomb"></i>
        </div>
    </div>

    <div class="spinin">
        <div class="frame green">

        </div>
        <div class="symbol green">
            <i class="fa fa-plug"></i>
        </div>
    </div>


    <div class="spinin">
        <div class="frame orange">

        </div>
        <div class="symbol orange">
            <i class="fa fa-key"></i>
        </div>
    </div>

    <hr>

    <h3>Squares around things</h3>
    <p class="uppercase bold italics small">Put a box around it!</p>

    <style>
        .square .fa {
            border: 3px solid #46B7E7;
            border-radius: 3px;
            padding: 20px;
            color: #46B7E7;
        }

        .square .fa:first-of-type {
            color: #FC9F4C;
            border-color: #FC9F4C;
        }
        .square .fa:last-of-type {
            color: #FF675D;
            border-color: #FF675D;
        }


    </style>

    <div class="square">

        <i class="fa fa-bug fa-4x"></i>
        <i class="fa fa-coffee fa-4x"></i>
        <i class="fa fa-gift fa-4x"></i>

    </div>

<hr>

    <h3>Circles around things</h3>
    <p class="uppercase bold italics small">Because originality is overrated!</p>

    <style>
        .circle .fa {
            border: 3px solid #46B7E7;
            border-radius: 50%;
            padding: 20px;
            color: #46B7E7;
        }

        .circle .fa:first-of-type {
            color: #FC9F4C;
            border-color: #FC9F4C;
        }
        .circle .fa:last-of-type {
            color: #FF675D;
            border-color: #FF675D;
        }

    </style>

    <div class="circle">

        <i class="fa fa-bomb fa-4x"></i>
        <i class="fa fa-plug fa-4x"></i>
        <i class="fa fa-diamond fa-4x"></i>

    </div>

    <h3>Random</h3>
    <p class="uppercase bold italics small">Now more inclusive!</p>

    <p>0 - 1 : <span class="bold">{{random(1)}}</span></p>
    <p>0 - 10 : <span class="bold">{{random(10)}}</span></p>
    <p>0 - 100 : <span class="bold">{{random(100)}}</span></p>
    <p>0 - 9999 : <span class="bold">{{random(9999)}}</span></p>

    <br>

    <p class="uppercase">Eh, this one is still kinda off. Oh well</p>
    <p>-1 - 1 : <span class="bold">{{randomRange(-1, 1)}}</span></p>
    <p>10 - 30 : <span class="bold">{{randomRange(10, 30)}}</span></p>
    <p>-100 - 100 : <span class="bold">{{randomRange(-100, 100)}}</span></p>
    <p>-9999 - 9999 : <span class="bold">{{randomRange(-9999, 9999)}}</span></p>

<hr>

    <h3>Flip Badge</h3>

    <style>
        .flip_badge {

            border-radius: 50%;
            text-align: center;
            width: 2em;
            height: 2em;
            font-size: 2em;
            padding-top: 6px;

            font-weight: 900;
            
            position: relative;

            display: inline-block;
            


        }
        .flip_badge.a {

            -webkit-animation: flipa 4s ease-in-out infinite;
        }

        .flip_badge.b {
            left: -2.1em;
            -webkit-animation: flipb 4s ease-in-out infinite;
        }

        @-webkit-keyframes flipa {
            0% {
                -webkit-transform: scale(1, 0);
            }
            3% {
                -webkit-transform: scale(1, 1);
            }
            47% {
                -webkit-transform: scale(1, 1);
            }

            50% {
                -webkit-transform: scale(1, 0);

            }
            100% {
                -webkit-transform: scale(1, 0);

            }
        }

        @-webkit-keyframes flipb {
            0% {
                -webkit-transform: scale(1, 0);
            }
            50% {
                -webkit-transform: scale(1, 0);
            }
            53% {
                -webkit-transform: scale(1, 1);
            }

            97% {
                -webkit-transform: scale(1, 1);

            }
            100% {
                -webkit-transform: scale(1, 0);

            }
        }


    </style>


    <div class="flip_badge a color_lynch gr_ecstasy">
        <i class="fa fa-file-text-o"></i>
    </div>
    <div class="flip_badge b color_ecstasy gr_lynch">
        5
    </div>

    <hr>

    <h3>Spinner</h3>

    <style>
        .spinner2 .fa {
            font-size: 150px;


            -webkit-animation:spin3 2s ease infinite;

        }


        @-webkit-keyframes spin3 {
            100% { -webkit-transform: rotate(90deg); }
        }

    </style>


    <div class="spinner2 color">
        <i class="fa fa-gear"></i>
    </div>

<hr>

    <h3>Element Badge and HSL</h3>

    <style>
        .element {
            text-align: center;
            width: 150px;
            height: 150px;
            line-height: 140px;
            border: 5px solid;
            border-radius: 2px;
            font-size: 80px;
            display: inline-block;
            font-weight: 600;


        }

        .pinkHSL {
            border-top-color: hsl(336, 95%, 45%);
            border-left-color: hsl(336, 95%, 45%);
            border-right-color: hsl(336, 95%, 35%);
            border-bottom-color: hsl(336, 95%, 35%);
            color: hsl(336, 95%, 45%);
            text-shadow: 0 2px 0 hsl(336, 95%, 25%),
                         0 0 1px hsl(336, 95%, 45%);

            /*box-shadow: 0 2px 0 hsl(336, 95%, 25%);*/
            /*border-color: hsl(336, 95%, 45%);*/
        }

        .blueHSL{
            border-top-color: hsl(200, 95%, 45%);
            border-left-color: hsl(200, 95%, 45%);
            border-right-color: hsl(200, 95%, 35%);
            border-bottom-color: hsl(200, 95%, 35%);
            color: hsl(200, 95%, 45%);
            text-shadow: 0 2px 0 hsl(200, 95%, 25%),
            0 0 1px hsl(200, 95%, 45%);
        }
        .yellowHSL {
            border-top-color: hsl(65, 95%, 45%);
            border-left-color: hsl(65, 95%, 45%);
            border-right-color: hsl(65, 95%, 35%);
            border-bottom-color: hsl(65, 95%, 35%);
            color: hsl(65, 95%, 45%);
            text-shadow: 0 2px 0 hsl(65, 95%, 25%),
            0 0 1px hsl(65, 95%, 45%);
        }
    </style>

    <div class="element pinkHSL">
        Be
    </div>

    <div class="element blueHSL">
        Sw
    </div>

    <div class="element yellowHSL">
        Vm
    </div>

    <hr>

    <h3>Expanding Badges</h3>
    <p>Because things need to be cool</p>

    <style>
        .dynamic-badge {
            border: 1px solid #949697;
            border-radius: 15px;
            display: inline-block;
            font-weight: 900;
            font-size: 12px;
        }

        .dynamic-badge .visable-label {
            display: inline-block;
            width: 23px;
            text-align: center;
            position: relative;
            top: -2px;
            left: 1px;
        }

        .dynamic-badge .hidden-label {
            width: 0px;
            display: inline-block;
            overflow: hidden;
            transition: .2s width;
            position: relative;
            top: 2px;
        }
        .dynamic-badge:hover .hidden-label {
            width: 85px;
            transition: .2s width;
        }

    </style>

    <div class="dynamic-badge">
        <div class="visable-label">
            4
        </div>
        <div class="hidden-label">
            Applications
        </div>
    </div>
    <div class="pull-right">
        <div class="dynamic-badge">
            <div class="visable-label">
                4
            </div>
            <div class="hidden-label">
                Applications
            </div>
        </div>
    </div>

    <hr>

    <h3>Glow Sticks</h3>

    <p>Hover me timbers</p>

    <style>
        .glow {
            height: 2px;
            background-color: #46B7E7;
            border: none;
            box-shadow: none;

            transition: box-shadow .2s;
        }
        .glow:hover {
            box-shadow: 0px 0px 5px #46B7E7, 0px 0px 2px #46B7E7;
            transition: box-shadow .2s;
            pointer: cursor;
        }
    </style>

    <hr class="glow">

    <hr>

    <h3>Class Toggling</h3>

    <style>
        .boxToggle {
            width: 100px;
            height: 100px;
        }

    </style>

    <div data-ng-init="box = 'true'">

        <button class="btn btn-default btn-outline" data-ng-click="box = !box">
            <i class="fa " data-ng-class="box ? 'fa-toggle-on' : 'fa-toggle-off'"></i> Toggle
        </button>

        <div class="boxToggle " data-ng-class="box ? 'gr_lemon border' : 'gr_razzmatazz'"></div>
    </div>

    <span>{{box}}</span>

<Hr>

    <h3>"Perfect" Form</h3>
    <form class="perfectForm">
        <div class="form-group clearfix">
            <div class="col-md-4">
                <label class="" for="email">Email (Required)</label>
                <input type="text" class="form-control border" id="email">
                <p class="darkpink">Whoops. Email is not valid.</p>
            </div>
            <div class="col-md-8">
                <p class="help-block">Ex: email@domail.com.</p>
            </div>
        </div>
        <div class="form-group clearfix">
            <div class="col-md-4">
                <label class="" for="firstName">First Name (Required)</label>
                <input type="text" class="form-control border" id="firstName">
                <p class="darkpink">You can't have numbers in your name unless you are 2Pac.</p>
            </div>
            <div class="col-md-8">
                <p class="help-block">Ex: Stephanie</p>
            </div>
        </div>
        <div class="form-group clearfix">
            <div class="col-md-4">
                <label class="" for="lastName">Last Name (Required)</label>
                <input type="text" class="form-control valid" id="lastName">
            </div>
            <div class="col-md-8">
                <p class="help-block">Ex: Phearson</p>
            </div>
        </div>
        <div class="form-group clearfix">
            <div class="col-md-4">
                <label class="" for="Employer">Employer</label>
                <input type="text" class="form-control" id="Employer">
            </div>
            <div class="col-md-8">
                <p class="help-block">Ex: Disneyland</p>
            </div>
        </div>
    </form>

    <hr>

    <h3>New Forms</h3>

    <form id="newForm">
        <div class="form-group">
            <div class="col-md-6">
                <input type="text" class="form-control" id="firstName" required>
                <label class="" for="firstName">First Name</label>
            </div>
            <div class="col-md-6">
                <input type="text" class="form-control" id="lastName" required>
                <label class="" for="lastName">Last Name</label>
            </div>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="phone" required>
            <label class="" for="phone">Phone Number</label>
        </div>
    </form>

    <hr>

    <h3>Filled Form</h3>

    <form id="filledForm">
        <h4>Personal Info</h4>
        <div class="form-group">
            <div class="col-md-5">
                <input type="text" class="form-control" id="filledFirstName" value="Billy">
            </div>
            <div class="col-md-1">
                <input type="text" class="form-control" id="filledMI" value="J">
            </div>
            <div class="col-md-6">
                <input type="text" class="form-control" id="filledLastName" value="McThornton">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-12">
                <input type="text" class="form-control" id="filledphone"  value="555 555 5555">
            </div>
        </div>


    </form>

<hr>

    <h3>Ng-repeat</h3>

    <ul>
        <li data-ng-repeat="a in 'abcdefgh'.split('')">{{a}}</li>
    </ul>

    <hr>

    <h3>Step Icons</h3>

    <div class="row">
        <div class="col-md-12">
            <div class="steps">
                <i class="fa fa-square color"></i>
                <i class="fa fa-square-o darkpink"></i>
                <i class="fa fa-square-o color"></i>
                <i class="fa fa-square-o"></i>
                <i class="fa fa-square-o"></i>
            </div>
        </div>
    </div>

    <div class="row steps">
        <div class="col-md-4">
            <i class="fa fa-check-circle complete color"></i>
            <i class="fa fa-circle-o current color"></i>
            <i class="fa fa-circle-o incomplete lightgrey"></i>
            <i class="fa fa-circle-o incomplete lightgrey"></i>
        </div>

        <div class="col-md-4">
            <i class="fa fa-check-circle complete color"></i>
            <i class="fa fa-check-circle complete color"></i>
            <i class="fa fa-circle-o current color"></i>
            <i class="fa fa-circle-o incomplete lightgrey"></i>
        </div>

        <div class="col-md-4 color">
            <i class="fa fa-check-circle complete"></i>
            <i class="fa fa-check-circle complete"></i>
            <i class="fa fa-check-circle complete"></i>
            <i class="fa fa-circle-o current"></i>
        </div>
    </div>
    <br>
    <div class="row steps">
        <div class="col-md-4">
            <i class="fa fa-circle complete color"></i>
            <i class="fa fa-circle-o current color"></i>
            <i class="fa fa-circle-o incomplete lightgrey"></i>
            <i class="fa fa-circle-o incomplete lightgrey"></i>
        </div>

        <div class="col-md-4">
            <i class="fa fa-circle complete color"></i>
            <i class="fa fa-circle complete color"></i>
            <i class="fa fa-circle-o current color"></i>
            <i class="fa fa-circle-o incomplete lightgrey"></i>
        </div>

        <div class="col-md-4 color">
            <i class="fa fa-circle complete"></i>
            <i class="fa fa-circle complete"></i>
            <i class="fa fa-circle complete"></i>
            <i class="fa fa-circle-o current"></i>
        </div>
    </div>
    <br>
    <div class="row steps">
        <div class="col-md-12 lightgrey">
            <i class="fa fa-circle color"></i>
            <i class="fa fa-circle-o"></i>
            <i class="fa fa-circle-o"></i>
            <i class="fa fa-circle-o"></i>
        </div>
    </div>

    <br>
    <div class="row steps">
        <div class="col-md-12 color">
            <i class="fa fa-circle"></i>
            <i class="fa fa-circle-thin"></i>
            <i class="fa fa-circle-thin"></i>
            <i class="fa fa-circle-thin"></i>
        </div>
    </div>

    <hr>

    <h3>Hud Icons</h3>

    <div class="row hud">
        <div class="col-md-4">
            <i class="fa fa-check-circle-o icon"></i>
            <p class="color">Verified Property</p>
        </div>
        <div class="col-md-4">
            <i class="fa fa-list-ol icon color_jade"></i>
            <p class="color_jade">Short Wait</p>
        </div>
        <div class="col-md-4">
            <i class="fa fa-flag icon accent"></i>
            <p class="accent">Units Available</p>
        </div>
    </div>

    <div class="row hud">
        <div class="col-md-4">
            <i class="fa fa-circle-o icon lightgrey"></i>
            <p class="lightgrey">Unverified Property</p>
        </div>
        <div class="col-md-4">
            <i class="fa fa-list-ul icon lightgrey"></i>
            <p class="lightgrey">Long Wait</p>
        </div>
        <div class="col-md-4">
            <i class="fa fa-flag-o icon lightgrey"></i>
            <p class="lightgrey">No Units Available</p>
        </div>
    </div>

    <hr>

    <h3>Ellipsis thingies</h3>

    <div><b>26</b> <span>{{lorem}}</span></div>

    <div><b>25</b> <span>{{lorem | renticityAddEllipsisFilter: 25}}</span></div>
    <div><b>15</b> <span>{{lorem | renticityAddEllipsisFilter: 15}}</span></div>
    <div><b>10</b> <span>{{lorem | renticityAddEllipsisFilter: 10}}</span></div>
    <div><b>5</b> <span>{{lorem | renticityAddEllipsisFilter: 5}}</span></div>
    <div><b>2</b> <span>{{lorem | renticityAddEllipsisFilter: 2}}</span></div>
    <div><b>1</b> <span>{{lorem | renticityAddEllipsisFilter: 1}}</span></div>


    <hr>

    <h3>No Photo Icons</h3>

    <style>
        .no-photo {
            width: 250px;
            height: 250px;
            font-size: 100px;
            padding: 50px 30px;
        }
        .no-photo .fa {
            position: relative;
            width: 0;
        }
        .no-photo .fa-home {
            left: 0px;
            top: 0px;
        }
        .no-photo .fa-plus-circle {
            font-size: 50px;
            left: 32px;
            top: 20px;
        }
        .no-photo .fa-building {
            left: 89px;
            top: -14px;
        }
    </style>

    <div class="no-photo icon">
        <i class="fa fa-home "></i>
        <i class="fa fa-building"></i>
        <i class="fa fa-plus-circle "></i>
    </div>

    <h3>Outline</h3>
    <div class="no-photo icon">
        <i class="fa fa-home outline"></i>
        <i class="fa fa-building outline"></i>
        <i class="fa fa-plus-circle outline"></i>
    </div>

    <p class="lead outline">Text Half Empty (or Half Full?)</p>
    <br><br>


    <hr>

    <h3>Amenities</h3


    <script>
        $(function() {
            $( "#sortable" ).sortable({
                revert: true,
                axis: "y",
                placeholder: "amenitiesPlaceholder",
                tolerance: "pointer",
                containment: "parent"
            });
        });
    </script>

    <style>
        .amenitiesInput {
            width: 300px;
            margin-bottom: 5px;
        }

        .amenitiesList {
            width: 300px;
            display: inline-block;
            margin-right: -10px;
        }

        .amenitiesList li {
            display: block;
            margin: 0 0 5px 0;
            background: white;
        }

        .amenitiesList a {
            height: 22px;
            width: 30px;
            text-align: right;
            line-height: 21px;
            font-size: 14px;
            color: #949697;
            padding-top: 1px;
        }
        .amenitiesList a:hover {
            color: #DF5857;
        }

        .amenitiesList .badge {
            font-size: 16px;
            display: block;
            text-align: left;
            padding: 0;
            cursor: pointer;
        }
        .amenitiesList .badge:hover {border-color: #46B7E7;}
        .amenitiesList .badge:hover .handle .fa {color: #525556;}

        .amenitiesList .amenitiesPlaceholder {
            display: block;
            margin: 0 0 5px 0;
            background: white;
            height: 24px;
            border: 1px dashed #0076BD;
            border-radius: 3px;
        }


        .amenitiesList p {
            padding: 3px 7px;
            margin: 0;
            height: 22px;
        }

        .amenitiesList p .handle {
            font-weight: 900;
            font-size: 11px;
            position: relative;
            top: -3px;
            color: #C7C9CA;
            letter-spacing: 1px;
            margin-right: 3px;
        }
        .amenitiesList .badge:hover .handle {
            color: #949697;
        }


    </style>

    <form class="amenitiesInput">
        <input type="text" class="form-control" placeholder="Amenities" ng-model="selected"
               typeahead="amenity.name for amenity in amenitiesList | filter:$viewValue | limitTo:8"
               typeahead-on-select='onSelect($item)'>
    </form>

    <ul id="sortable" class="amenitiesList">
        <li ng-repeat="amenity in chosenAmenities">
            <span class="badge">
                <a class="pull-right" ng-click="removeAmenity($index)"><i class="fa fa-remove"></i></a>
                <p>
                    <span class="handle">||</span>
                    {{amenity.name}}
                </p>
            </span>

        </li>
    </ul>

    <p>Note: There is still an error with duplicates. Custom entries
        are not working with this typeahead. Typeahead is just an example, we need to find another solution that
        can work across all of our systems. It's already really glitchy with adding things to lists and removing them
        after sorting.</p>

    <ul>
        <li><a href="http://textextjs.com/">http://textextjs.com/</a></li>
        <li><a href="http://aehlke.github.io/tag-it/examples.html">http://aehlke.github.io/tag-it/examples.html</a></li>
        <li><a href="http://nicolasbize.com/magicsuggest/">http://nicolasbize.com/magicsuggest/</a></li>
        <li><a href="http://timschlechter.github.io/bootstrap-tagsinput/examples/">http://timschlechter.github.io/bootstrap-tagsinput/examples/</a> (personal favorite)</li>
    </ul>

    <p>

    <hr>

    <h3>Image Handling</h3>


    <script>
            $(function() {
                $( "#sortable2" ).sortable({
                    revert: true,
                    constrain: "parent",
                    placeholder: "imagePlaceholder",
                    tolerance: "pointer",
                    containment: "parent"
                });
                $( "ul, li" ).disableSelection();
            });
        </script>

    <style>

        .imageFrame {
            margin: 5px;
            width: 176px;
            height: 176px;
            padding: 5px;
            border: 1px solid;
            border-color: #e5e5e5;
            border-radius: 3px;
            position: relative;
            background: white;

            transition: border-color .2s;
            cursor: pointer;
            float: left;
        }

        .imageFrame:hover {
            transition: border-color .2s;
            border-color: #46B7E7;
        }

        .imagePlaceholder {
            width: 176px;
            height: 176px;
            margin: 5px;
            border: 2px dashed #0076BD;
            border-radius: 3px;
            float: left;
        }

        .propertyImage {
            height: 164px;
            width: 164px;
            display: inline-block;
        }

        .imageControls {
            position: absolute;
            width: 164px;
            height: 164px;
            padding: 3px;
        }

        .imageControls .dropdown-menu > li > a {
            font-size: 14px;
        }

        .imageFrame:hover .numberControls {
            background-color: rgba(255,255,255,0.3);
            transition: background-color .2s;

        }

        .imageFrame .numberControls div {
            margin-top: 25px;

            opacity: 0;
            transition: opacity .2s;
        }

        .imageFrame:hover .numberControls div {
            opacity: 1;
            transition: opacity .2s;
        }

        .numberControls {
            position: absolute;
            height: 164px;
            width: 164px;
            text-align: center;
            font-size: 20px;
            font-weight: 900;

            background-color: rgba(255,255,255,0.0);;
            transition: background-color .2s;
        }

        .numberControls .fa {
            margin-top: 10px;
            font-size: 70px;
        }

        .imageFrame .progress {
            margin: 78px auto 0 auto;
            width: 80%;
        }
        </style>

    <div id="sortable2" style="height: 600px;width: 750px;border:1px solid grey;">
        <div class="imageFrame" ng-repeat="property in properties">
            <div class="numberControls">
                <div>
                    Drag n' Drop<br>
                    <i class="fa fa-hand-o-up"></i>
                </div>
            </div>
            <div class="imageControls">
                <div class="dropdown pull-right">
                    <button class="btn btn-default btn-outline btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        More <i class="fa fa-caret-down"></i></button>

                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li><a>Move Up</a></li>
                        <li><a>Move Down</a></li>
                        <li><a>Move to Front</a></li>
                    </ul>
                </div>
                <label>
                    <input type="checkbox" />
                    <span class="lbl"></span>
                </label>
            </div>
            <span class="propertyImage" ng-class="property.color"></span>
        </div>

        <script>
            $(document).ready(function(){
                var bar = $(".progressTest .progress-bar");
                var percent = $(".progressTest .progress-bar").attr("aria-valuenow");
                $('.progressTest').bind('mouseenter', function() {
                    var self = $(this);

                    this.iid = setInterval(function() {
                        if (percent < 100){
                            percent++;
                        } else {
                            percent = 100;
                        }
                        console.log(percent);
                        $(".progressTest .progress-bar").attr("aria-valuenow", percent);
                        bar.css("width", percent+"%");
                    }, 30);
                }).bind('mouseleave', function(){
                    this.iid && clearInterval(this.iid);
                    percent = 0;
                    $(".progressTest .progress-bar").attr("aria-valuenow", percent);
                    bar.css("width", percent+"%");
                });

            });

        </script>

        <div class="imageFrame progressTest">
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                    <span class="sr-only">10% Complete</span>
                </div>
            </div>
        </div>

    </div>

    <hr>

<h3>Animations</h3>

<style>
.animations {
    height: 600px;
}

.animations li {

    background: #ddd;
    margin-bottom: 10px;
    height: 75px;
    overflow: hidden;
}

.animations .well {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 550px;
}

.animations img {
    height: 75px;
    width: 75px;
    float: left;
}

.animations .closed {
    height: 0px;
    margin-bottom: 0px;
    transition: margin-bottom .25s, height .25s;

}

.animations .opened {
    margin-bottom: 10px;
    height: 75px;

    transition: margin-bottom .25s, height .25s;
}

    .animations .pin {
        background: url("images/maps/map_pins.png") -53px -40px;
        height: 40px;
        width: 26px;
        cursor: pointer;
        font-weight: bold;
        font-size: 16px;
        text-align: center;
        line-height: 25px;
    }

    .animations .pin:hover {
        background: url("images/maps/map_pins.png") 130px -40px;
    }

    .animations .pin1 {
        position: relative;
        top: 100px;
        left: 123px;
    }

    .animations .pin2 {
        position: relative;
        top: 300px;
    left: 342px;
    }

</style>




    <div>open: {{stateOpen}}, close: {{stateClose}}</div>


    <div class="row animations">

    <div class="col-md-4 well">
        <h3>Results</h3>
        <ul class="imgList">
            <li ng-class="stateCloseGreen" class="closed">
                <img class="gr_jade">
                <a class="title">Test Closed</a>
                <p class="accent">$1200 - 9999</p>
                <p>2 bedroom &nbsp; &nbsp; 4 bathroom</p>
            </li>
            <li ng-class="stateCloseGreen" class="closed">
                <img class="gr_jade">
                <a class="title">Test Closed</a>
                <p class="accent">$1200 - 9999</p>
                <p>2 bedroom &nbsp; &nbsp; 4 bathroom</p>
            </li>

            <li ng-class="stateCloseBlue" class="closed">
                <img class="gr_chambray">
                <a class="title">Test Closed</a>
                <p class="accent">$1200 - 9999</p>
                <p>2 bedroom &nbsp; &nbsp; 4 bathroom</p>
            </li>
            <li ng-class="stateCloseBlue" class="closed">
                <img class="gr_chambray">
                <a class="title">Test Closed</a>
                <p class="accent">$1200 - 9999</p>
                <p>2 bedroom &nbsp; &nbsp; 4 bathroom</p>
            </li>


            <li>
                <img class="gr_flamingo">
                <a class="title">Sample Property</a>
                <p class="accent">$1200 - 9999</p>
                <p>2 bedroom &nbsp; &nbsp; 4 bathroom</p>
            </li>
            <li>
                <img class="gr_flamingo">
                <a class="title">Sample Property</a>
                <p class="accent">$1200 - 9999</p>
                <p>2 bedroom &nbsp; &nbsp; 4 bathroom</p>
            </li>
            <li ng-class="stateOpenGreen" class="opened">
                <img class="gr_jade">
                <a class="title">Sample Property</a>
                <p class="accent">$1200 - 9999</p>
                <p>2 bedroom &nbsp; &nbsp; 4 bathroom</p>
            </li>
            <li ng-class="stateOpenBlue" class="opened">
                <img class="gr_chambray">
                <a class="title">Test Opened</a>
                <p class="accent">$1200 - 9999</p>
                <p>2 bedroom &nbsp; &nbsp; 4 bathroom</p>
            </li>
            <li>
                <img class="gr_flamingo">
                <a class="title">Sample Property</a>
                <p class="accent">$1200 - 9999</p>
                <p>2 bedroom &nbsp; &nbsp; 4 bathroom</p>
            </li>
            <li ng-class="stateOpenGreen" class="opened">
                <img class="gr_jade">
                <a class="title">Sample Property</a>
                <p class="accent">$1200 - 9999</p>
                <p>2 bedroom &nbsp; &nbsp; 4 bathroom</p>
            </li>
            <li>
                <img class="gr_flamingo">
                <a class="title">Sample Property</a>
                <p class="accent">$1200 - 9999</p>
                <p>2 bedroom &nbsp; &nbsp; 4 bathroom</p>
            </li>
            <li>
                <img class="gr_flamingo">
                <a class="title">Sample Property</a>
                <p class="accent">$1200 - 9999</p>
                <p>2 bedroom &nbsp; &nbsp; 4 bathroom</p>
            </li>
            <li ng-class="stateOpenBlue" class="opened">
                <img class="gr_chambray">
                <a class="title">Test Opened</a>
                <p class="accent">$1200 - 9999</p>
                <p>2 bedroom &nbsp; &nbsp; 4 bathroom</p>
            </li>
        </ul>
    </div>
    <div class="col-md-4">
        <div class="pin pin1" ng-mouseover="toggleStatesBlue()" >2</div>
        <div class="pin pin2" ng-mouseover="toggleStatesGreen()" >2</div>

    </div>
</div>


    <hr>

    <h3>Image Test Cases</h3>


<style>

.slider {
	width: 100%;

	margin-bottom: 15px;
}

.box {
	width: 150px;
	height: 150px;
	outline: 1px solid blue;
	margin-bottom: 15px;
	text-align: center;
}

.box:before {
	vertical-align: middle;
	content: "";
	display: inline-block;
	height: 100%;
}

.box img {
	max-width: 147px;
	max-height: 150px;
	left: -1px;
	position: relative;

}

.controls {
	text-align: center;
}

.controls div {
	outline: 1px solid green;
}

.controls:before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.controls .left i, .controls .right i {
	display: inline-block;
	vertical-align: middle;
}

.block {
text-align: center;
outline: 1px solid red;
}

.block:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.25em; /* Adjusts for spacing */

}

.block .centered {
	display: inline-block;
	vertical-align: middle;
	outline: blue solid 1px;
}

.left {
	width:20%;
	outline: orange solid 1px;
	float: left;
	cursor: pointer;
}

.right {

	width: 80%;
	outline: orange solid 1px;
	float: right;
	cursor: pointer;
}


</style>

<div class="slider">
	<div class="box">
		<img src="../images/design/square.png">
	</div>
	<div class="box">
		<img src="../images/design/wide.png">
	</div>
	<div class="box">
		<img src="../images/design/tall.png">
	</div>

</div>
<div class="block">
	<div class="centered">
		<div class="left"><i class="fa fa-spoon"></i></div>
		<div class="right"><i class="fa fa-bomb"></i></div>
	</div>

</div>

    <hr>

    <h3>Flip</h3>


<style>
.flip {
	width: 100px;
	height: 100px;
	outline: 1px solid black;
	cursor: pointer;

	float: left
}


.flip_img {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	transition: .5s width;
	background-image: url('data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCABkAGQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDt9Qa/f7TDDfXbQzFo2aBg0kZAIwFOdxA5+U+ZwchiABD4Xlu7O9uoL3VDcfaMfZX80kSbC+8AE8MMjK9R35BxflP72cSMSoO2TdwMZHysSQB94jDED72IzXMeKbTyXsbqBnS7L7jOQUdyAACTgY6ZGFUDIwMddotxehhNXjY78zTf89X/AO+jTGnm/wCer/8AfRrC8L+IG1mBre6QpfQrl8LhXXONw9D0yPxHB43itdkJRkro4pKUXZkTTz9ppP8Avo1E1xcdp5P++jUzLUTLWqSJ5mQtc3P/AD3l/wC+jURurn/n4l/77NTMtRMhrRJdg5mRm6uv+fiX/vs0w3V1/wA/Mv8A32agv7yOwgLujyMBu2p2UdWJ7KMjJPA7461Bp2qWuqxI0G8MU3lXQjHODzj/ADkVPtaSn7N7le9a5NdahPDF5slzNhMvjzG6DqSB1xnp0yR04NcLa6hqsk4lmvbxY3XIczMCVGW3Lz1JBGTngGtfxtrcWh2tv/o3nTzSqRk4AADd89ecj8a81utS1DVLG+Z2kdUDsyY3dWZsjHUDGMk/xnrmvEx83UquMdEjopJ2uer6L4ztYoLi3STf5ExjLtKX3YVeckN69M8dCMg0Vg+B3ibw+Z4YXk8+d5HZpCvzcDABPQAAZyc47HIBXIoxStr95vzHoL4E5j2uGUnCJncqklTtAG4AnAyojGSx3HrXO+JyZI7Rv3Z3MxzHtwzYw33c9wR1Y8ck10E6hZWVmCRNI4QkAKD13DcApx0GFcknOfTC8VbybV5N67xuEbb8oMfd+fnt6KOeg616cdxS2OC1TxDd+G/Elrc27N5LW6M4Xrw7cj19x0I/Aj1zw54is/EmnJcW7p5pTeyKeCM43LnnGeOeQeDzXk3iCwivp1SQ4kMYWNwOc/OcEd84wMc8jrWT4TSfS9eh3TGCMSgudx2jPG8FSCRg5GDhsDqKmE5RqNImUIygj6GK1EyVz/hrxM2p3j2M7BnUEB5NqSKwP3WUcHPJVlxkKcgEGrG/W4/EEk8hcaVJIkSW7pECpOF3hlJYjOWw3Y8cgA9Ua8Wro5nRldoNd1q30GKCW5ildZpPKTyx/H1C5PAJAY8kD5TzV6aIyxOsUoUnKiROcc4OP1rzjxnejU/Ec8FwV+wabgu6rhh13Lz13MFGRyAOMfMWefGF1o0TRJvkgkiyjnHyuQhUbj833GHLHkggc9OepmEac3Bpv0H7H3U+pvyazFZW2o2+oQ3F2YSVby4v9ahzkDPGB0OTnJxzwTzNve3Nlq9zHbz7nuoWFvMLgOrNldwwBuLZ3cfeBDEbulPtNWv7uGXWLto8GF4X2KHkcchlkXOMAKxAx/EODwCzWftM1nPqOl3jRPPH5zfuUTYm3IBOSQzZXkkfdGcYwPLrYxyfIjaNPqZ/iSJ7jQLu5uDPJunVnmdAPkG0ZUE54b5SM/ewD78taaXqUFrE48+GKcyK0aMY2k2lY9p6YLMQMex64NalzqkCW2lXV9cSiMpIZLYAEB1J52+jFlAOMZ4OetZlt4hZ57e1SKK1tI7jezRJud1O4hWznKjOP6HpU0lJRZR02i3LRRXNoqyww2swgij83GFWNPm6DO4kvnHO6iqXhSQ3FjdzSkxs10flVcgAIoA4OOAMfhRXUti0epWEU9pc6q93LGskt08kbRnLMoIKbljO7aDu4L8ntWR4ouLSOS0IjeNHy28RqAzH7zYXn88n1Jq/NpEsl5dRX2t3YUuZI0t2S0Dn/nmm3dKR6njNZmvaXZWcdssViIBMTJIrCTcp6ctINx6deByffPRFyuOVrHNajte+tyjK4Pl42kEfx1TtHysRfJ2xAqehHf8AHkn655zgYk1GS0sdQWGaAyQSxrJnIBQ7mxg9/wA/zqO1i3QoLadbjFuN0ZPzqRgEc/e6nnjpS50pakqOhJqIubTXnvrKYxyRyRZTnB3BeeD22/nz2Fd5pXiiabTkivyrXVpdx74G+8yBwoAkLYZiQSo5JGASxO5sO5tbe9t1kEkcbDbIJggbleQGwrZHbGD1NZ2oXz2Fqsj3puGuwyR3C7ZnwxOTuwGOFIBXG3584DYJ58RJ02nAFLuM8R32mSX+rXMd1NLePJt3pAVhUqMFlbecErjnqAWwOeOd0yaW50XULsgFraaNoTJJv7gYPT1zzjJzjoVrbu9PW8tLCOG6CRtDkLdBY9ibz85QyE8c9CxOzGOuKMf2PS9MuoLS6+32KbwJmhEYmc/fUDOWwNnJ54PTHPI6rlBp6u4PYsSWk0Hhqe5cSpFNM7+QHLcZ24L91AB7kfMfSo4rmW601rpI5GWeQ5a2Y7VO1gFGR6buvqOeBTLLWwNEuPts8jwEmJEAG4qF6A8HkSfQ8muasrmOO1a0uGUKxLxu4Tgngck8dOpPHXqSaVKm23chEUUDSabeWk8Cq0aCaKV5dnO3lQD94thcDr8pwDmoY9PuodKW8lidLYO0aP2yVHUYORkHPr+Fa1j4efW3MwuFtreOFJZJpHIYliwRR1IGIz19emMGtbWLFl0qbS7e/ijhtnSTy5Yjl0Y/faQZwoYtx947DxkCt3JX5UXboS+DnszojLLA8kqzuHdX2Ang9wc8Ec8emOMkp3hNFs9OuIJgJXW4PzRT8Y2rjtzRW62KWx65BJJduy27y/a0Y+XlZFSIZPG0eWM8Hrz7nrXPeI9jS2wiKeZlhMVC/NJxk/Kx7Y6knj6VA+qQC9ee6d9jwlsR+Vt3BiQreYzAbicZzjnnZmrPiGWe4i05p7cwnysBG+8B15G0AHJIIGQMdTV0ZtuzFLY868TMD4is4jFkGBcyBmWQAuwwD0/HBrOtLUSorFcEgEkCt7XIEfW7Ild7bEUZbaB8zdcDmoLT7LNDvQrGyxq3lxKdozjuzE0OKc9QXwm8bi2hudqPcW04KIJAm5WYgFRj/HA4qpqDG5tFTUNRLXdtNu37QoI+YYaTOGbA5yAeQMgEmkuLaeS6a48gmPMbAhhg4C5PXPGCKr6tBbWCHUVO25e5ZroeZt8tQ5GFIbILIQeg4waxxMU4p9SCi2ueRcCa+/4mHmoi/ZpZGaJBuGUYHhhiNQeo9QTzUGr2kQ0s3LXkcETybhZMASuUQsBgcEZyO3YYYYLryeGOXUI2k33Uj7IhJtkdUOS5IXjOTxkZyAeDXPakEjvhbLC8JjQ5VeDg8sTjpkdfTB4xxXNSj7ysOD1sjYjeC58O22nRPBPePKQGMeAw+fJY9hgxfTbx7QeJGQWcNlDCrfZ4VWSWJsM+EAywOegjdsLgcknO3NWNFgkj0VH0799e+azR7iB8i4LnJHGVbpwCA5OcBaoafcSW1pc3Cq8gEQtzu/eFCNpZTnkA/N0BODgnG410Jctx7MSLVZ1Omi0klgkt4zF8yLs5kdsKp+9/rW6f3uenPTJBFouhCCaC9iXzBN5aMRg7gVjk2jH8DEgjcfpiuN05RHqtvJK4WCCVXkkJyFAIJz7nBAAxnHFT61q665MkFu8McFvIVguJPllIJJBbJwcs3JAz1JFS4uVl0BXZ0+kJaxx3LQTLIsk/mHYpCqWVSQM/y7Zx2oqLwhEx0ucJCwZbhg+1G67V9Rxxj0orZaIaZ2ELzX1tqdqzxLdRGUpHIXDJtyQBkheQ688Y5OCMip724nuobSa6nuDNInmK05baYzyu3J+uehzx2BOTe309o811/aelxtJfBHj+zZmCMBgnMh+UhNpPHLE5GBiQRrfaNZeZPG4iZoR5S7chQCCck54Yc45pU1JSG0rWMvXLVrq7gkUmQRquQhXnluMl+tZdlbXFupRbZwzRLzIcZxj0zWlqG+1vkgt5WWN4NzKQOTuA64yOvas4RcBWkkdcfdeQsB9Mk1r7zkNWSOha/ie3ZEeYnZgtGN2OPQ1TnuU1Oyl1K4uLeG3STYC8Pm4yACqkjBcMrHI4OV69DDdarOmpG2EypEGjQKEBLBtueufUjjB5FULt5JWvZXf92NSjDb0yr/PITkj5uAq9D0bnsRFaEpxsmRYo3L2kmmQLZxpJEjNGZtmJGOM4Iz0Azz0yeccVVuboXOmxPYRbpGLR3ALmaVygLbiNmFG0kDB6IT1JzsaRYNqer3cVzcBopIUSKJJBl2UbVAXzF3beAM8dTuGBm+3h/X/DtrpMmmaNbwuRMhljlH7xAGw0u4kK3znGWK5xyABnlvGN11RUYo0fC+k/234M1CD7C+n3UUkDRfujCGcMcvgZ67cbscY6cViP4Xso9R0szzwOfJiklhjUqrKAg6BhnK7iCMDPBzznpfD97dwaVq663aGG4dREk33hKCrKWZscYABJxjnPA6Y91qEFlZSGS48p538gusaSoRuZsFXIVjknJwQMFScLmnOpOTXIXymKw0NobnSUDxpm3kE0gBZU3CNh02hijQyZ2nBL1NeeFbjSbPXNRaXbdWTW32QROzhSZnjJywGWUQNzjgnIxxjm9Vjnl1Nb64e4nWWcJ5hQ7t/K7CCS24AD73JINdnFrb2nhW6vJogkw8TqWgZgWSKNZJcfQOSAa6YrTULGX4Nnk/smcZ5FywJKg5OF9RRV7TdNbS59StkiZIheO0QI6IQMYPfjj8KKqyFymoLx7W0miu9NLSx3rujSzGLaGd2YYJyNyAL0P3evPMOj3s0gaBot0RO5ZlkBGcHoM8jjtyOMgZ45DWtZuLu9u9PZpHgFw7JCZN+1txOfQnk9en5irPg2NjrM0igtGtuT5nY8rgfmT69O/BrGm586uyJamx4kkkEr+Ru80WoKhBk8yKOMd+tV494kVZNwcIm7J74559c5qXWtRFjrKSeWZHNsAFzj+I9T/n8K5+XxHLBKzSpDI7HkIpBB9jk116J3YK7VkdDqDaZZX/2m9uAbmQKYod2CMbcHGfUA5OAcEYNcvrHie61Np7QLH9k83MW3njJ5Oep7dcenrWNOjXd9cXkiYeeVpCOuCxJxTkhKHdxwDwRntWcqnRG0aXcla7WWeR2R9pZipdvmIJ4yR3rvvD8jXunuz+IZrSaOHbAssrSbRgZO1htVV65yOlYll4Ut7y0Mel6lZX0skQaVnikQwkYzjKjAJ45GSATgduht/h9rdxp1vD9p00rFuXYXZSuTk7iEyT09eB6Vy80HJwvq0Z8vLN2LenX1ppN8J7jxNa3WXyYbfbliBjb8pPHA5x2HJAILfE1paa5botlNaadZRETRl5jtXAwoAGNq9zgHnPQ1TsfBF3pV5EL1bFwobdwxbAJ+6WUqff5c+hwc1paxpZl0aS2t9Mgu5AjMq/aWjbOBggBRnucZA4H4cLrunNQUvwRm5z2Zw+qeIr+/WLS7m1tlmtGSUXKRMsp8oMcktyOCxPHOM1iR6xffZfs0dy2GlMzZwSzYxnOM/wCfem+VdaNdxXFxCtvIysu0yDeFKlW3IDuAIJBDDkE1QZ4lKsgDMGJ3A4GM9MEf5zXqbo2d0j0bwhqd7PpMpuG81lnKrvB+Vdq4A9BzRVLwU27R5jknNweSP9laKabJuz2ST4eeGHnkkbTfmZyxImcc5z6+5q/beDdBt3kaGwVDLjdtY9ugHPA57UUVvZLYQlz4C8N30ge407ewXaD5rjj8D71APhX4MHzf2MuT38+T/wCKoooepS0D/hWHg8dNIX/v9J/8VSN8M/COMf2SP+/0n/xVFFCiuw3JmhF4Z0i1hjhgs0ijQYVU4xViPTre3LGJShYAHB646UUVmqNNO6ir+hKILrTba7VVmUsFOVOcEH2I5qfSvDumXEkqz25kXA4LsO/saKKmdGnLVxT+Q7JvUtX3gDwrqSBb3RbafHQyZJX6HORWY3wh8CM+46Cu71+0zf8AxdFFOMYxVkiloadv4A8L2qMsWlJ87F2Z5XdmPqSzEnpRRRVAf//Z');

	z-index: 2;
}

.flip_img2 {
	width: 0px;
	height: 100px;

	background-color: red;

	margin: 0 auto;
	transition: .5s width .5s;
	position: relative;
	top: -100px;

	z-index: 1;
}

.flip:hover .flip_img {width: 0px}
.flip:hover .flip_img2 {width: 100px}


</style>


	<div style="display: inline-block">
		<div class="flip">
			<div class="flip_img"></div>
			<div class="flip_img2"></div>
		</div>
		<div class="flip">
			<div class="flip_img"></div>
			<div class="flip_img2"></div>
		</div>
		<div class="flip">
			<div class="flip_img"></div>
			<div class="flip_img2"></div>
		</div>
		<div class="flip">
			<div class="flip_img"></div>
			<div class="flip_img2"></div>
		</div>
		<div class="flip">
			<div class="flip_img"></div>
			<div class="flip_img2"></div>
		</div>
		<div class="flip">
			<div class="flip_img"></div>
			<div class="flip_img2"></div>
		</div>
</div>

<hr>

<h3>Centering code</h3>

<style>

.block {
text-align: center;
outline: 1px solid red;
}

.block:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.25em; /* Adjusts for spacing */

}

.block .centered {
	display: inline-block;
	vertical-align: middle;

	width: 300px;
	outline: blue solid 1px;
}

</style>



<div class="block" style="height: 400px;">
	<div class="centered">
		<h1>Some text</h1>
		<p>Booking like men going towards that ship a while ago?"</p>
	</div>

</div>

</div>