CSS UI Elements

by secretgspot

HTML

<div class="container">
  
    <section>
        <header>
            <hgroup>
                <h2>UI Elements</h2>
                <h3><span>Buttons</span></h3>
            </hgroup>
        </header>
        <article>
            <div class="column"><!--layout purposes only-->
                <div class="button-wrapper">
                    <a href="#" class="button light">Lorem ipsum</a>
                </div>
            </div>
            <div class="column"><!--layout purposes only-->
                <div class="button-wrapper">
                    <a href="#" class="button dark">Lorem ipsum</a>
                </div>
            </div>
            <div class="column"><!--layout purposes only-->
                <div class="button-wrapper">
                    <a href="#" class="button ocean">Lorem ipsum</a>
                </div>
            </div>
            <div class="column"><!--layout purposes only-->
                <div class="button-wrapper">
                    <a href="#" class="button strawberry">Lorem ipsum</a>
                </div>
            </div>
            <div class="column"><!--layout purposes only-->
                <div class="button-wrapper">
                    <a href="#" class="button tangerine">Lorem ipsum</a>
                </div>
            </div>
            <div class="column"><!--layout purposes only-->
                <div class="button-wrapper">
                    <a href="#" class="button fern">Lorem ipsum</a>
                </div>
            </div>
        </article>
    </section>
    <br style="clear:both" /><!--[if IE]><br /><![endif]-->
    <section>
        <header><h3><span>Search Fields</span></h3></header>
        <article>
            <form class="search-wrapper">
                <input type="text" class="search-field" value="Your search terms" />
                <input type="submit" class="search-button light" value="search" />
            </form>
            <form class="search-wrapper">
               ...

CSS

/*Global styles & font stacks*/

body {
    font-family: Helvetica, Arial, sans-serif;
    background: #F3F3F3 url('images/bg.png') repeat;
}

section {
    clear: both;
}

.container {
    width: 470px;
    margin: 0 auto;
}

.column {
    float: left;
    width: 50%;
    margin: 5px 0;
}

::selection {
        background: #454545;
        color: #F3F3F3;
        text-shadow: none;
}
    
::-moz-selection {
        background: #454545;
        color: #F3F3F3;    
        text-shadow: none;
}

h1, h2, h3, h4{
    margin: 20px 0;
    text-shadow: 0px 1px 0px #fff;
}

h1 {
    font-size: 48px;
    color: #404040;
    font-weight: bold;
}

h2 {
    font-size: 28px;
    color: #555;
    font-weight: bold;
}

h3 {
    background: url('images/divider.png') repeat-x center;
    font-size: 17px;
    color: #555;
    font-weight: bold;
}

h3 span {
    background: #F3F3F3;
    padding-right: 20px;
}

h4 {
    font-size: 16px;
    color: #666;
    font-weight: bold;
}

h5 {
    font-size: 14px;
    color: #707070;
    font-weight: bold;
}

p {
    color: #888;
    line-height: 150%;
    margin: 0 0 20px 0;
    font-size: 14px;
}

ul, ol {
    color: #888;
    line-height: 150%;
    margin: 0 0 20px 20px;
    font-size: 14px;
}

li {
    list-style: disc;
    margin-left: 20px;
}

strong {
    font-weight: bold;
    color: #707070;
}

em {
    font-style: italic;
    color: #707070;
}

blockquote {
    font-family: Georgia, Times, serif;
    line-height: 150%;
    font-size: 14px;
    font-style: italic;
    margin: 0 20px 20px 20px;
    border-left: 2px solid #aaa;
    color: #aaa;
    padding-left: 10px;
}

a:link, a:visited {
    color: #4A97BA;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    color: #57B5E3;
}

/*---UI ELEMENTS---*/

/* Buttons */

.button-wrapper {
    width: 165px;
    background: #E0E0E0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
    background:...