html, body, #mainWrapper {
text-align:center;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-color: #000;
letter-spacing: 1px;
}
@font-face {
font-family: 'Trend Sans One';
src: url('latinotype_-_trendsansone-webfont.eot') format('eot'),
url('latinotype_-_trendsansone-webfont.svg') format('svg'),
url('latinotype_-_trendsansone-webfont.woff') format('woff'),
url('latinotype_-_trendsansone-webfont.ttf') format('truetype');

font-family: 'Dubiel Italic';
src: url('dubielitalic-webfont.eot') format('eot'),
url('dubielitalic-webfont.svg') format('svg'),
url('dubielitalic-webfont.woff') format('woff'),
url('dubielitalic-webfont.ttf') format('truetype');
}	
	
#header {
background: #dfe8d9; 
padding-top: 24px;
}

a {
	color: #555;
	text-decoration: none;
}
a:visited {
	color: #555;
	text-decoration: none;
}
a:active,
a:hover {
	color: #000;
    text-decoration: none;
}

#menu {
background: #dfe8d9;
padding: 24px; 
}

#buttons {
width:748px;
min-width:748px;
position:relative;
margin: 0 auto;
margin-top: 24px;
font-family: "Dubiel italic";
font-size: 16px;
letter-spacing: 1px;
color: #fff;
}

.projects {
width: 178px;
height: 400px;
float: left;
margin-right: 12px;
background: url(projects.jpg) top left no-repeat;
}

.projects:hover {
background: url(projects-roll.jpg) top left no-repeat;
}

.services {
width: 178px;
height: 400px;
float: left;
margin-right: 12px;
background: url(services.jpg) top left no-repeat;
}

.services:hover {
background: url(services-roll.jpg) top left no-repeat;
}

.about {
width: 178px;
height: 400px;
float: left;
margin-right: 12px;
background: url(about.jpg) top left no-repeat;
}

.about:hover {
background: url(about-roll.jpg) top left no-repeat;
}

.contact {
width: 178px;
height: 400px;
float: left;
margin-right: 0px;
background: url(contact.jpg) top left no-repeat;
}

.contact:hover {
background: url(contact-roll.jpg) top left no-repeat;
}

.logos {
width: 367px;
height: 126px;
float: left;
margin-right: 12px;
margin-bottom: 12px;
background: url(services/logos.jpg) top left no-repeat;
}

.logos:hover {
background: url(services/logos-roll.jpg) top left no-repeat;
}

.web {
width: 367px;
height: 126px;
float: left;
margin-right: 0px;
margin-bottom: 12px;
background: url(services/web.jpg) top left no-repeat;
}

.web:hover {
background: url(services/web-roll.jpg) top left no-repeat;
}

.print {
width: 367px;
height: 126px;
float: left;
margin-right: 12px;
margin-bottom: 12px;
background: url(services/print.jpg) top left no-repeat;
}

.print:hover {
background: url(services/print-roll.jpg) top left no-repeat;
}

.marketing {
width: 367px;
height: 126px;
float: left;
margin-right: 0px;
margin-bottom: 12px;
background: url(services/marketing.jpg) top left no-repeat;
}

.marketing:hover {
background: url(services/marketing-roll.jpg) top left no-repeat;
}

.illustration {
width: 367px;
height: 126px;
float: left;
margin-right: 12px;
margin-bottom: 0px;
background: url(services/illustration.jpg) top left no-repeat;
}

.illustration:hover {
background: url(services/illustration-roll.jpg) top left no-repeat;
}

.workshops {
width: 367px;
height: 126px;
float: left;
margin-right: 0px;
margin-bottom: 0px;
background: url(services/workshops.jpg) top left no-repeat;
}

.workshops:hover {
background: url(services/workshops-roll.jpg) top left no-repeat;
}

.bush {
width: 177px;
height: 177px;
float: left;
margin-right: 12px;
margin-bottom: 12px;
background: url(projects/bush.jpg) top left no-repeat;
}

.bush:hover {
background: url(projects/bush-roll.jpg) top left no-repeat;
}

.elf {
width: 177px;
height: 177px;
float: left;
margin-right: 12px;
margin-bottom: 12px;
background: url(projects/elf.jpg) top left no-repeat;
}

.elf:hover {
background: url(projects/elf-roll.jpg) top left no-repeat;
}

.wedrep {
width: 177px;
height: 177px;
float: left;
margin-right: 12px;
margin-bottom: 12px;
background: url(projects/wedrep.jpg) top left no-repeat;
}

.wedrep:hover {
background: url(projects/wedrep-roll.jpg) top left no-repeat;
}

.rainbow {
width: 177px;
height: 177px;
float: left;
margin-right: 0px;
margin-bottom: 12px;
background: url(projects/rainbow.jpg) top left no-repeat;
}

.rainbow:hover {
background: url(projects/rainbow-roll.jpg) top left no-repeat;
}

.wedsess {
width: 177px;
height: 177px;
float: left;
margin-right: 12px;
margin-bottom: 12px;
background: url(projects/wedsess.jpg) top left no-repeat;
}

.wedsess:hover {
background: url(projects/wedsess-roll.jpg) top left no-repeat;
}

.fad {
width: 177px;
height: 177px;
float: left;
margin-right: 12px;
margin-bottom: 12px;
background: url(projects/fad.jpg) top left no-repeat;
}

.fad:hover {
background: url(projects/fad-roll.jpg) top left no-repeat;
}

.bts {
width: 177px;
height: 177px;
float: left;
margin-right: 12px;
margin-bottom: 12px;
background: url(projects/bts.jpg) top left no-repeat;
}

.bts:hover {
background: url(projects/bts-roll.jpg) top left no-repeat;
}

.one {
width: 177px;
height: 177px;
float: left;
margin-right: 0px;
margin-bottom: 12px;
background: url(projects/one.jpg) top left no-repeat;
}

.one:hover {
background: url(projects/one-roll.jpg) top left no-repeat;
}

#text {
width:748px;
min-width:748px;
position:relative;
margin: 0 auto;
padding: 24px;
}

.header1 {
font-family: "Trend Sans One";
font-size: 16px;
letter-spacing: 1px;
}

.header2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
}

.items {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
letter-spacing: 1px;
color: #b8bdb4;
font-style: italic;
}

#footer {
background: #dfe8d9;
padding: 24px;
}

img {
border: none;
}