page hat

by ritcheyer

HTML

<div id="pageHat">
            <p><strong>REALTOR PILOT</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor quam at erat ullamcorper placerat.</p>
            <ul class="itemActions hatActions">
                <li class="fauxLink nubbyPop">More Info</li>
                <li><a href="/link/to/form/for/customer/then/hijack/link/via/js" data-controls-modal="opt-out" data-backdrop="static" data-keyboard="true" title="Sign up Now">Opt Out</a></li>
            </ul>
        </div>

CSS

/* --- #pageHat is to be used for opt-out banner and related messaging */
#pageHat {
    background-color: #fff7c6;
    font-size: 120%;
    overflow: hidden;
    padding: .5em;
    border-bottom: 1px solid #b3b3b3;
    position: relative;
}
#pageHat p { margin: 0 115px 0 0; }
.itemActions.hatActions {
    margin: 0;
    padding: 0;
    position: absolute;
    display: inline-block;
    top: .5em;
    right: 1em;
    border: 0;
    background-image: none;
    background-color: transparent;
    border-radius: 0;
    -webkit-border-radius: 0;
    float: right;
}
.itemActions.hatActions li {
    background-image: none;
    background-color: transparent;
    border-radius:         0;
    -webkit-border-radius: 0;
    font-size: 90%;
    font-weight: normal;

    float: left;

    border-left: 1px solid #b3b3b3;
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
}
.hatActions li:first-child {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}