html,body,h1,h2,h3,h4,p,img,ul,li,blockquote,table,p {
margin: 0;
padding: 0;
}
header, footer, div {
display: block;
}
body {
background-color: #fff;
font-family: Trebuchet, sans-serif;
font-size: 13px;
line-height: 1.5;
padding-bottom: 40px;
}
.container {
margin: 0 auto;
padding: 0;
background-color: #eff0ed;
max-width: 968px;
box-shadow: 0 5px 10px #aaa;
height: 80%;
}
header {
background: #000 url("images/bar.gif") no-repeat top center;
position: relative;
text-align: center;
}
header:after {
content: "";
width: 90%;
height: 15px;
background-color: #8b856f;
position: absolute;
top: 0;
left: 5%;
}
.logo {
margin: 30px auto 0;
}
h1, h2 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 30px;
line-height: 1;
}
h1 {
color: #c4c0af;
line-height: 1;
padding-bottom: 12px;
}
.email {
display: inline-block;
text-transform: uppercase;
font-size: 11px;
margin-bottom: 15px;
}
.email a {
display: block;
float: left;
text-decoration: none;
color: #fff;
background-color: #869fb5;
padding: 4px 7px 3px;
}
.email a:hover {
background-color: #c2e2ff;
color: #50616f;
}
.appt {
display: block;
float: left;
padding: 3px 7px 2px;
border: 1px solid #fff;
color: white;
}
h2 {
margin: 0 0 0.2em;
}
.main {
overflow: hidden;
padding: 0;
}
.main img {
float: right;
display: block;
padding: 0;
}
.infobox {
background-color: white;
padding: 10px;
}
.tall {
padding-top: 15px;
}
.tall h2 {
color: #863c39;
}
.tall h2:nth-of-type(2) {
color: #00487e;
margin-top: 0.6em;
}
.infobox:nth-of-type(2) h2 {
color: #8b856f;
}
.infobox:nth-of-type(3) h2 {
color: #8c949e;
}
.wide h2 {
color: #869fb5;
}
.wide img {
float: none;
margin: 0.2em 0;
}
p {
font-weight: bold;
}
.infobox ul {
list-style-type: none;
}
.infobox li {
list-style-type: none;
padding-left: 1.2em;
position: relative;
}
.infobox li:before {
content: "";
width: 0.7em;
height: 0.7em;
background-color: #959595;
position: absolute;
top: 0.35em;
left: 0;
}
.productshots {
background: url("images/concrete-floor-bgrd.jpg") no-repeat center top;
overflow: hidden;
position: relative;
}
.productshots img {
border: 2px solid #fff;
border-radius: 3px;
display: block;
}
.left-image {
float: left;
width: 25.723140495868%;
margin: 3.4% 0 3.6% 12.3966942%;
}
.right-image {
float: right;
width: 25.723140495868%;
margin: 3.4% 12.3966942% 3.6% 0;
}
.centre-image {
position: absolute;
top: 4.7%;
left: 50%;
width: 28.202479338843%;
margin-left: -14.101239669422%;
}
.contactinfo {
font-family: "Trebuchet MS", sans-serif;
font-size: 21px;
color: #fff;
margin: 0;
padding: 0.3em 0;
background-color: red;
text-align: left;
}
.contactinfo ul {
list-style-type: none;
}
.contactinfo li {
color: white;
list-style-type: none;
display: block;
margin-left: 10px;
padding-left: 1.1em;
position: relative;
}
.contactinfo li:before {
content: "";
width: 0.45em;
height: 0.45em;
background-color: #c4c0af;
position: absolute;
top: 0.55em;
left: 0;
}

.uppercase {
text-transform: uppercase;
}
footer {
margin-top: 1em;
text-align: center;
font-size: 10px;
padding-bottom: 2em;
}

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
header {
height: 135px;
}
header:after {
height: 22px;
}
.email {
position: absolute;
bottom: 0;
left: 160px;
}
h1 {
position: absolute;
bottom: 49px;
left: 160px;
padding-bottom: 0;
}
.logo {
position: absolute;
bottom: 31px;
left: 50px;
margin: 0;
}
.main {
padding: 30px;
text-align: center;
}
.main img {
margin-left: 10px;
margin-right: 10px;
}
.infobox {
margin-bottom: 0;
float: left;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;
}
.infobox h2 {
margin-left: 10px;
margin-right: 10px;
}
.infobox ul {
margin-left: 10px;
margin-right: 10px;
}
.infobox p {
margin-left: 10px;
margin-right: 10px;
}
.normal,.tall {
width: 48.2%;
}
.tall {
margin: 0 0 30px 0;
}
.normal {
margin-left: 3.6%;
margin-bottom: 30px;
}
.wide {
clear: left;
margin: 0;
width: 100%;
}
.wide img {
float: right;
}
.contactinfo {
margin: 0 30px 0;
}
}

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
h1 {
position: absolute;
bottom: 34px;
left: 160px;
padding-bottom: 0;
}
.logo {
position: absolute;
bottom: 16px;
left: 50px;
margin: 0;
}
.email {
bottom: 12px;
left: 765px;
}

.email a:hover {
background-color: #c2e2ff;
color: #50616f;
}
.email .appt  {
position: relative;
left: 48px;
}
.main {
padding: 35px 0 0 35px;
}
.infobox {
padding: 10px;
}
.normal,.tall {
width: 256px;
}
.normal {
margin: 0 0 0 35px;
}
.tall {
margin-bottom: 0;
}
.wide {
width: 566px;
margin: 35px 0 0 35px;
clear: none;
}
.contactinfo {
font-family: "Trebuchet MS", sans-serif;
font-size: 19px;
color: #fff;
margin: 0 35px 0;
padding: 0.3em 0;
background-color: red;
text-align: center;
}
.contactinfo ul {
list-style-type: none;
}
.contactinfo li {
color: white;
list-style-type: none;
display: inline-block;
margin-left: 1.2em;
padding-left: 2em;
position: relative;
}
.contactinfo li:first-child {
padding-left: 0;
margin-left: 0;
}
.contactinfo li:first-child:before {
display: none;
}
}