Footer

by sderico

HTML

<script src="http://s15.postimg.org/xhc9m1p6v/stripe.png"></script>
<script src="http://postimg.org/image/xhc9m1p6v/"></script>
<script src="http://s18.postimg.org/3m4ocde21/fb_icon.png"></script>
<div id="container">
    
    <div id="header"></div>
    <div id="body">
        <ul>
            <li>Body</li>
            <li>My Account</li>
        </ul>
        <ul>
            <li>Sign up</li>
            <li>Offers</li>
        </ul>
        <ul>
            <li>Stuff</li>
            <li>Switch Accounts</li>
        </ul>
        <ul>
            <li>More Account stuff</li>
            <li>Stuff 2</li>
        </ul>
        <ul>
            <li>K cool</li>
            <li>Test</li>
        </ul>
        <ul>
            <li>Test1</li>
            <li>Test2</li>
        </ul>
    </div>
</div>

<div id="footerBoarder"></div>

<footer>
    <div id="centerLinks">
        <div id="footerLinks">
            <ul class="linkList">
                <li>FOR YOUR HOME</li>
                <li>Rates & Plans</li>
                <li>Why Gexa?</li>
                <li>Learn & Explore</li>
                <li>Rewards</li>
                <li>Help</li>
                <li>Service Areas</li>
            </ul>
            <ul class="linkList">
                <li>FOR YOUR Business</li>
                <li>Small Business</li>
                <li>National Business</li>
                <li>Verticals</li>
                <li>Service Areas</li>
                <li>News & Events</li>
                <li>Market Intelligence</li>
                <li>Help</li>
            </ul>
            <ul class="linkList">
                <li>ABOUT US</li>
                <li>Community</li>
                <li>Press Room</li>
                <li>Careers</li>
                <li>Contact Us</li>
                <li>Email Signup</li>
            </ul>
            <ul class="linkList">
                <li>CURRENT CUSTOMERS</li>
                <li>Login</li>
                <li>Regist</li>
            ...

CSS

body
{
    /*background-image: url("http://s15.postimg.org/xhc9m1p6v/stripe.png");*/
}


#container
{
    min-height:100%;
    margin:1px;
}

#header
{
    padding:10px;
}

#body
{
}

#footerBoarder
{
    background:#D3D3D3;
    height:1px;
    border-top: 1px solid #EFEFEF;
    border-bottom:1px solid #EFEFEF;
    margin-bottom:1px;
}

footer
{
    border-top: 1px solid #EBEBEB;
    background-image:linear-gradient(to bottom,#E3E3E3, #F0F0F0);
    width:100%;
}

#centerLinks
{
    margin: 0 auto 0 auto;
}

#footerLinks
{
    margin:20;
}

.BLOCK
{
    position:relative;
    width:100%;
    height:150px;
}

#footerSocialButtons
{
    float:right;
    right:0px;
    margin:20px;
}

#footerSig
{
    margin:0;
    padding:0;
    width:100%;
    height:20px;
}

.tinyR
{
    display:inline-block;
    font-size:10px;
    margin:0;
    padding:0;
}
.tinyL
{
    display:inline-block;
    font-size:10px;
    margin:0;
    padding:0;
}

.linkList
{
    display:inline-block;
    width:17%;
    list-style-type:none;
    margin-top:20px;
    font-size:.6em;
    height:11em;
    vertical-align:top;
}

.linkList > :first-child
{
    font-weight:bold;
    margin-bottom:1em;
    
}

.linkList li:hover
{
    text-decoration:underline;
}

.linkList+.linkList
{
    border-left:1px solid #B8B8B8;
}


ul {
    margin: 0;
}