reset.css

html, body, div, span, a, img,
h1, h2, h3, h4, h5, h6, hgroup, p,
dl, dialog, dt, dd, ol, ul, li,
abbr, acronym, address, b, big, blockquote,
cite, code, del, dfn, em, i, ins, kbd, pre, q,
samp, tt, var, small, strong, sub, sup,
object, iframe, form, fieldset, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, footer, header, nav, section,
figure, menu, time, mark, audio, video {
font-family: inherit;
font-size: 100%;
font-weight: inherit;
font-style: inherit;
vertical-align: baseline;
white-space: normal;
text-align: left;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;

textarea {
font-family: inherit;
font-size: 100%;
font-weight: normal;
font-style: normal;
white-space: normal;
text-align: left;
margin: 0;
padding: 0;
}

article, aside, footer, header, nav, section,
dialog, figure, hgroup, menu {
display: block;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

del, ins {
text-decoration: none;
}

ol, ul {
list-style: none;
}

nav ul {
list-style-type: none;
}

table {
border-collapse: separate;
border-spacing: 0;
background-color: transparent;
width: auto;
height: auto;
}

:focus {
outline: 0;
}

blockquote:before, blockquote:after, q:before, q:after {
content: "";
}

blockquote, q {
quotes: "" "";
}

/* @end */

/* @group Base */

body {
font-family: helvetica, arial, sans-serif;
line-height: 1.5;
background: white;
color: black;
}

h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
}

h4, h5, h6 {
font-weight: bold;
}

b, strong, caption, th, thead, dt, legend {
font-weight: bold;
}

cite, dfn, em, i {
font-style: italic;
}

code, kbd, samp, pre, tt, var {
font-family: mono-space, monospace;
}

h1, h2, h3, h4, h5, h6 {
word-spacing: -0.125em;
}

p {
word-spacing: 0.125em;
hyphenate: auto;
hyphenate-lines: 3;
}

pre {
white-space: pre;
}

del {
text-decoration: line-through;
}

mark {
background-color: rgba(255, 255, 0, 0.4);
padding: 0 .25em;
}

ins {
color: #f00;
}

small, sup, sub {
font-size: 80%;
}

big {
font-size: 125%;
line-height: 80%;
}

abbr, acronym {
font-size: 85%;
text-transform: uppercase;
letter-spacing: .1em;
}

abbr[title], acronym[title], dfn[title] {
border-bottom: 1px dotted black;
cursor: help;
}

sup, sub {
line-height: 0;
}

sup {
vertical-align: super;
}

sub {
vertical-align: sub;
}

blockquote {
padding: 1.5em;
}

hr {
border: none;
background: #ddd;
width: 100%;
}

ul, ol {
margin-left: 1.5em;
}

ul {
list-style: disc outside;
}

ol {
list-style: decimal outside;
}

table {
font: inherit;
width: 100%;
}

mobile.css

/* ===================================================== |
| |
| Date: 10/7/10 |
| Author: Tony Breed |
| |
| Contents: |
| * base styles |
| * header |
| * top graphic area |
| * top copy section |
| * bottom copy section |
| * footer section |
| * generic content section |
| * MEDIA QUERIES |
| |
| Swatch: |
| #222 (body text) |
| #2229c9 (links) |
| #0c4f28 (dk green) |
| #27834c (lt green) |
| #faeacf (banner bg color) |
| #a75c1e (button text shadow color) |
| #444 (dk gray) |
| #e3e3e3 (footer bg) |
| #07539a (footer link) |
| #666 (copyright line) |
| |
| HEADER GRADIENT |
| rgb(10,69,34) - top |
| rgb(12,76,38) - middle |
| rgb(10,69,34) - bottom |
| |
| GRAPHIC AREA GRADIENT |
| rgb(249,249,249) bottom |
| rgb(247,247,247) middle 30% up |
| rgb(255,255,255) top |
| |
| BOTTOM COPY GRADIENT |
| rgb(241,241,241) top |
| rgb(255,255,255) middle 30% down |
| rgb(255,255,255) bottom |
| |
| ===================================================== */

/* ===================================================== */
/* base styles */

body {
margin: 0 auto;
font: 75%/1.2em arial, sans-serif;
width: 480px;
background: #fff;
color: #222;
}

a img {
border: none;
}

dd {
margin-left: 3.125%;
}

p {
margin: 0 0 1.5625% 0 ;
}

a, a:link, a:visited, a:hover, a:active {
color: #2229c9;
}

/* ===================================================== */
/* specific styles by section */
/* ===================================================== */

/* ===================================================== */
/* header */

#header {
padding: 3.125%;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(10,69,34)),
color-stop(0.5, rgb(12,76,38)),
color-stop(1, rgb(10,69,34))
);
background: -moz-linear-gradient(
center bottom,
rgb(10,69,34) 0%,
rgb(12,76,38) 50%,
rgb(10,69,34) 100%
);
float: left;
width:93.75%;
}

#header * {
color: #fff;
}

#logo {
width:33.44%;
float: left;
}

#logo img {
width: 100%;
}

#header p {
text-align: right;
text-transform: uppercase;
margin: .25em 0 0;
float: right;
}

#header p a {
display: block;
text-align: right;
font-size: 200%;
font-weight: bold;
margin:0;
line-height: .9em;
}

/* ===================================================== */
/* top graphic area */

#graphic {
color: #0c4f28;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(249,249,249)),
color-stop(0.3, rgb(247,247,247)),
color-stop(1, rgb(255,255,255))
);
background: -moz-linear-gradient(
center bottom,
rgb(249,249,249) 0%
rgb(247,247,247) 30%,
rgb(255,255,255) 100%,
);
position: relative;
clear: left;
}

h1 {
font-size: 130%;
font-weight: bold;
margin: 0 3.125%;
padding-top: 3.125%;
line-height: 1.5em;
}

h2 {
font-size: 100%;
font-weight: normal;
line-height:1.5em;
margin: 0 3.125% 3.125% 3.125%;
color: #27834c;
}

#plus {
margin: 0 3.125%;
line-height: 1.5em;
font-style: italic;
}

.banner {
height: 3.8em;
width: auto;
background: #faeacf url('../../images/mobile/banner-bottom.png') bottom repeat-x;
float: left;
padding-left: 2%;
font-style: italic;
}

.banner img {
height: 100%;
float: right;
}

.banner span {
display: block;
float: left;
margin-right: .2em;
}

.banner .num {
font-weight: bold;
font-size: 350%;
line-height: 1em;
}

.banner .num sup{
font-size: 48.57%;
}

.banner .off {
font-weight: bold;
font-size: 170%;
line-height: 1.4em;
}

.banner .what {
line-height: .8em;
clear: left;
}

#head_img {
width:100%;
clear: left;
}

#people {
position: absolute;
right: 0;
bottom: 0;
width: 36.67%;
}

/* ===================================================== */
/* top copy section */

#top_copy {
padding: 3.125%;
}

#top_copy li {
margin: .5em 0;
}

#top_copy p {
text-align: center;
}

#button {
color: #fff;

text-shadow: #a75c1e 2px 2px 1px;

border: solid transparent;
border-width: 8px;
-moz-border-image: url('../../images/mobile/button.png') 8 stretch;
-webkit-border-image: url('../../images/mobile/button.png') 8 stretch;
border-image: url('../../images/mobile/button.png') 8 stretch;

line-height: 1em;
text-align: center;
text-decoration: none;
font: bold 190% 'Helvetica Neue', helvetica, sans-serif;

display: block;
margin: 0 auto;
padding: 0 1em 4px;
width: 11em;
}

#button small {
display: block;
font-size: 52.5%;
text-align: center;
line-height: 1em;
}

#hurry {
font-weight: bold;
font-size: 110%;
margin: .75em 0;
}

p#guarantee {
font-size: 100%;
margin: .75em auto;
width: 22em;
font-weight: bold;
font-style: italic;
color: #444;
text-align: left;
}

#guarantee strong{
font-size: 120%;
display: block;
}

#guarantee img {
float: left;
width: 50%;
margin-right: .5em;
}

/* ===================================================== */
/* bottom copy section */

#bottom_copy {
padding: 3.125%;
margin: 3.125%;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(241,241,241)),
color-stop(0.3, rgb(255,255,255)),
color-stop(1, rgb(255,255,255))
);
background: -moz-linear-gradient(
center top,
rgb(241,241,241) 0%,
rgb(255,255,255) 30%,
rgb(255,255,255) 100%
);
}

h4 {
font-weight: bold;
font-size: 100%;
margin: 0 0 .75em 0;
}

#bottom_copy p {
margin: 0 0 1.25em 0;
}

#bottom_phone p{
text-align: center;
margin: 0 0 2em 0;
}

#bottom_phone a {
display: block;
font-size: 180%;
font-weight: bold;
margin: 0 0 .75em;
text-align: center;
}

/* ===================================================== */
/* footer section */

#footer {
padding: 3.125%;
background-color: #e3e3e3;
font-size:85%;
}

#footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
color: #07539a;
}

ul#nav {
list-style: none;
text-align: left;
margin: 0;
}

ul#nav li {
display: inline;
padding: 0 1em 0 0;
}

ul#nav a:active {
font-weight:bold;
}

#copyright {
margin: 4em 0 1em 0;
text-align: center;
color: #666;
}

/* ===================================================== */
/* generic content section */

#content {
padding: 6.25% 3.125% 3.125%;
}

#content h1, #content h2, #content h3, #content h4 {
font-weight: bold;
margin: 3.125% 0 1.5625% 0 ;
color: #0c4f28;
background: transparent;
padding-left: 0;
}

#content h1 {
margin-top: 0;
}

#content h3 {
margin-top: 6.25%;
}

#content ul, #content ol {
margin: 0 0 3.125% 2.2em;
}

/* ===================================================== */
/* MEDIA QUERIES all at the end */

/* if hand-held device, set width to 100% */

@media all and (max-width: 480px) {
body {
width: 100%;
}
}

/* adjustments for portrait mode */

@media all and (max-width: 400px) {

/* smaller phone number at top of page */
#header p a {
font-size: 150%;
}
}

pest.css

/* ===================================================== |
| |
| Date: 10/7/10 |
| Author: Tony Breed |
| |
| Contents: |
| * formatting pest list |
| * MEDIA QUERIES |
| |
| ===================================================== */

/* ===================================================== */
/* formatting the pest list in the bottom copy section */

ul.pests {
color: #115C2F;
float: left;
font-size: 110%;
line-height: 1.2em;
font-weight: bold;
list-style: none;
margin: 0 0 1em 0;
}

ul.pests li {
padding-left: 9%;
width: 22%;
margin:5px 0 2px 0; /* = no spacing between columns of pests */
float: left;
}

/* NOTE---> There should be an image for each pest, which will function like a bullet */

li.termite {
background: url(../images/termite.png) bottom left no-repeat;
height: 1.75em;
line-height: 2.5em;
}

li.flea {
background: url(../images/flea.png) bottom left no-repeat;
height: 1.75em;
line-height: 2.5em;
}

li.bedbug {
background: url(../images/bedbug.png) bottom left no-repeat;
height: 1.75em;
line-height: 2.5em;
}

li.mouse {
background: url(../images/mouse.png) top left no-repeat;
}

li.rat {
background: url(../images/rat.png) top left no-repeat;
}

li.roach {
background: url(../images/roach.png) top left no-repeat;
}

li.ant {
background: url(../images/ant.png) top left no-repeat;
}

li.fly {
background: url(../images/fly.png) top left no-repeat;
}

li.silverfish {
background: url(../images/silverfish.png) top left no-repeat;
}

ul.pests li.more {
width:80%;
}

#bottom_copy p {
font-size: 85%;
line-height: 1.75em;
margin-top: 1em;
clear: left;
}

/* ===================================================== */
/* MEDIA QUERIES all at the end */

/* adjustments for portrait mode */

@media all and (max-width: 400px) {

/* Pest list goes 2 across in portrait mode */

ul.pests li, ul.pests li.more {
width: 37%;
padding-left: 12%;
}

li.bedbug {
background-position: top left;
line-height: 1.2em;
height: auto;
}
}