Newsletter css

by toddj

HTML

<html>
<head>
<title>SWVA Gaming</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
    <body>
        <div id="container">
            <div id="head">
            <div class="smallhead">Can't view this? [click here to view in browser] You are receiving this newsletter because you registered on our mailing list. </div><!-- close smallhead -->
                
           <div class="arrows"><img src="http://i.imgur.com/ftxFd.gif" />
                </div><!-- close arrows -->
                
            </div><!-- close head -->
            <div class="title">SWVA Gaming</div>
            <div class="newbutton"><img src="http://i.imgur.com/ia4Vn.gif" /></div>
            <div class="subtitle">Newsletter Issue 1 - January 2012</div>
            <div class="content">
                <h1>LAN Announced for April!</h1>
                <img src="http://tehpwnerer.com/wp-content/uploads/2010/11/mershedperderder-305x326.jpg" width="600" alt="" />
                <h1>New This Month</h1>
                <p>Here's the skinny. We're continuing to plan for our April event, but we need your help! So we've landed a lot of <a href="http://www.swvagaming.com/sponsors">sponsors</a> for our April event, right? And, the amount of awesomeness they send is often directly related to how many people we have preregistered.  This is where you come in!  If you get some time, please take a minute to <a href="http://swvagspring2012.eventbrite.com/?ref=ebtn">register</a> for the event; $10 a person, and that includes food and drinks for the night.  We know what you're thinking - "What do I get out of it?" Well, we're still deciding that.  Could be a drawing for $25 Visa gift card, or it could be a new laser mouse.  You'll just have to wait and see :)</p>
            </div><!-- close content -->
            
            <div class="footer">
                <div class="col1">
                    <h1>December LAN</h1>
                    We would just like to...

CSS

body {
    background: #161616;
    color: #767572;
    font: bookman;
    font-size: 14px;
    margin: 0;
}

a:link {
    color: #61c7dd;
}

a:hover {
    color: #59b8cc;
}

#container {
    width: 600px;
    margin: 15px auto 0px auto;
}

#head {
    width="100%";
    height: 50px;
    background: url("http://i.imgur.com/9iRLU.gif") no-repeat bottom;
}

.smallhead {
    font: 11px helvetica, arial, sans-serif; 
    width: 500px;
    display: inline-block;
}


.arrows {
    display: inline-block;
    float: right;
    position: absolute;
    top: 0px;
}

.title {
    font-size: 55px;
    font-family: Helvetica, Arial, Sans-serif;
    color: #f9f8f2;
    font-weight: bold;
    display: inline-block;
    width: 500px;
    padding-top: 7px;
}

.newbutton {
    display: inline-block;
    float:right;
}

.clearboth {
    clear:both;
}

.subtitle {
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 19px; 
    font-weight: bold; 
    color: #4e4e4e; 
    letter-spacing: -2px;
    background: url("http://i.imgur.com/UyGxQ.gif") bottom no-repeat;
    padding-top: 10px;
    padding-bottom: 40px;
}

.content {
    background: url("http://i.imgur.com/UyGxQ.gif") no-repeat bottom;
    padding-bottom: 30px;
    margin-bottom: 25px;
}

h1 {
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 30px; 
    font-weight: bold; 
    color: #767572; 
    letter-spacing: -2px;
    margin-bottom: 15px;
    margin-top: 15px;
}

.footer {
    display: block;
}

.info {
    background: url("http://i.imgur.com/UyGxQ.gif") no-repeat top;
    margin-top: 10px;
    display: block;
    padding-top: 40px;
    width: 600px;
    margin-bottom: 30px;
    padding-bottom: 70px;
}

.col1 {
    width: 30%;
    float: left;
    margin-right: 30px;
    display: block;
    clear:both;   
}

.col2 {
    width: 30%;
    float: left;
    margin-right: 30px;
    display: block;
    
}

.col3 { 
    width: 30%;
    float: left;
}

.col4 {
    width: 50px;
    float: left;
}

.col5{
   ...