.award-item

Fully charged single award-item

by davidhong

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css">
<div class="item qff">
    <!-- flush left -->
    <a class="col left" href="#">
        <img src="https://www.awardstore.com.au/AwardImages/34375/34375_106x73_0.jpg" />
    </a>
    
    <!-- flush right -->
    <div class="info col last">
        <h3>
            <a href="#">
                ALBUM Digital Photo Gallery 4GB BLACK - GBA9-BLACK
            </a>
        </h3>
        <p>With ALBUM you don't need a computer to view your photographs</p>                
        <p>35,500 points OR</p>
        <p>21,500 points minimum + $98</p>
        <p>Including delivery charge</p>
    </div>
    
    <ul class="buttons">
        <li>
            <a class="button" href="#" awardid="1" awardname="Test Item 1" points="35500" pay="0">Add to Cart</a>
        </li>
        <li class="last">
            <a class="button" href="/award/detail/test-item-1/1">Details</a>
        </li>
    </ul>
</div>

<hr />


<div class="item cba">
    <!-- flush left -->
    <a class="col left" href="#">
        <img src="https://www.awardstore.com.au/AwardImages/34375/34375_106x73_0.jpg" />
    </a>
    
    <!-- flush right -->
    <div class="info col last">
        <h3>
            <a href="#">
                ALBUM Digital Photo Gallery 4GB BLACK - GBA9-BLACK
            </a>
        </h3>
        <p>35,500 points</p>
        
        <ul class="buttons">
            <li>
                <a class="button" href="#" awardid="1" awardname="Test Item 1" points="35500" pay="0">Add to Cart</a>
            </li>
            <li class="last">
                <a class="button" href="/award/detail/test-item-1/1">Details</a>
            </li>
        </ul>
    </div>
</div>

<hr />

<li class="award-item">
    <div class="wrapper">
        <div class="details clearfix">
            <a...

CSS

.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }

/**
* 2. Defaults/Normalisation
*
* These will set *defaults* on some elements. If you require more 
* elements to be defined such as:
*    - attr
*    - mark
*    - etc., rare elements
* then please let the front end team!! know.
*/

html { font-size: 100%; overflow-y: scroll; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 8pt; line-height: 11pt; -webkit-font-smoothing: antialiased; }

/* Header links never contain text */
header h1 > a { text-indent: -9999px; }

/* Paragraphs */
li p, dd p { margin: 0; padding: 0; }

/* Lists */
ol, ul, dl, dt, dd { margin: 0; padding: 0; -webkit-margin-before: 0; -webkit-padding-start: 0; }
nav ul, nav ol { list-style: none; }

/* Links */
a { color: #a32025; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; text-decoration: none; }

/* Horizontal Line */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/* Forms */
form { margin: 0; padding: 0; }
fieldset { margin: 0; border: 0; outline: 0; padding: 0; }

/* Form Elements */
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }

input:valid, textarea:valid {  }
input:invalid, textarea:invalid {...