/* --- Resets --- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
ol, ul {
list-style: none;
}
.hide {
display: none;
}
strong {
font-weight: bold;
color: #000;
}
.clear, .clearer {
clear: both;
}
.fleft {
float: left;
}
.fright {
float: right;
}
/* --- Basic Styles --- */
body {
background: #fff url(../images/cleaners_3b-header.jpg) top center no-repeat;
font: 11px/20px "Lucida Grande", Tahoma, sans-serif;
color: #545454;
}
body#subpage {
background: #fff url(../images/bg-subbody.jpg) top left repeat-x;
}
p {
margin: 0 0 15px 0;
}
#container {
width: 900px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -120px;
text-align: left;
position: relative;
}
h4, h5 {
color: #222 !important;
}
/* --- Link Styles --- */
a:link, a:visited {
color: #1e9be4;
text-decoration: none;
}
a:hover {
color: #1e9be4;
text-decoration: underline;
}
a:active {
color: #1e9be4;
text-decoration: none;
}
/* -------------------------
--------- HOMEPAGE ---------
-------------------------- */
/* --- Top Header --- */
#top {
width: 900px;
height: 151px;
position: relative;
}
#top h1 {
background: transparent url(../images/dnd-logo.png) top left no-repeat;
text-indent: -9999px;
width: 286px; height: 72px;
margin: 30px 0 0 35px;
float: left;
cursor: pointer;
}
#tagline {
background: transparent url(../images/tagline.png) left no-repeat;
text-indent: -9999px;
width: 621px;
height: 41px;
margin: 37px 0 15px;
}
#slogan {
DISPLAY: NONE;
color: #1f1f1f;
float: left;
margin: 40px 0px 0px 20px;
padding: 0px;
height: 20px;
background: url(../images/bg-sloganright.jpg) no-repeat right;
}
#slogan span {
font-family: "Myriad Pro", "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
float: left;
display: block;
margin: 0px;
padding: 3px 6px 0px 12px;
height: 17px;
background: url(../images/bg-sloganleft.jpg) no-repeat left;
}
/* --- Navigation --- */
#nav {
position: absolute;
bottom: 0px;
}
#nav li {
display: block;
width: 111px;
height: 37px;
line-height: 37px;
float: left;
text-align: center;
margin: 0 5px 0 0;
}
#nav li a {
color: #000;
font: 16px arial, sans-serif;
text-decoration: underline;
}
#nav li a:hover {
}
#nav li.current {
background: url("../images/bg-nav-selected.png") top center no-repeat;
}
#nav li.current a {
color: #000;
}
#nav li a {
display: inline;
line-height: 39px;
}
/* --- Spotlight / Slider --- */
#spotlight {
height: 345px;
width: 900px;
overflow: hidden;
position: relative;
visibility: hidden;
}
#spotlight p {
margin-bottom: 0;
}
#employee {
position: absolute;
z-index: 100;
top: 53px;
right: -125px;
display: none;
}
#mover {
position: relative;
overflow: hidden;
width: 3000px; /* Adjust the width based on spotlight-items number (1000*[items number]) */
}
#item {
width: 820px;
}
.spotlight-item {
margin: 15px 50px 0;
overflow: hidden;
width: 820px;
float: left;
position: relative;
display: inline;
}
.spotlight-item h2 {
color: #2a2a2a;
font: 48px Arial, Helvetica, Verdana, sans-serif;
font-weight: bold;
margin: 0px 0 15px 0;
}
.spotlight-item p {
color: #444;
font: 11px/18px Arial, Helvetica, Verdana, sans-serif;
padding: 0 0 0 2px;
}
.spotlight-item .description {
margin: 40px 0 0 10px;
width: 260px;
}
.spotlight-item img {
position: absolute;
top: 0; right: 0;
}
.launch {
background: url(../images/launch.png) top left no-repeat;
display: block;
width: 95px;
height: 25px;
text-indent: -9999px;
margin: 10px 0 0 -1px;
cursor: pointer;
}
.pause {
background: url(../images/pause.png) top left no-repeat;
display: block;
width: 97px;
height: 25px;
text-indent: -9999px;
position: absolute;
bottom: 2px; right: 20px;
cursor: pointer;
}
#spotlight img.preview {
float: right;
}
/* --- MAIN CONTENT --- */
/* --- Content: First Row --- */
#mainContent {
background: transparent url(../images/bg-maincontent.jpg) top left no-repeat;
background: 0 none;
margin: 2px 0 0;
}
#topMain {
padding: 13px 18px 0 18px;
margin: 0 0 20px 0;
overflow: hidden;
}
#who {
width: 485px;
float: left;
padding: 0 20px 0 0;
}
#who img {
background-color: #eee;
border: 1px solid #ccc;
padding: 7px;
margin: 0 25px 15px 5px;
float: left;
}
#topMain h3 {
color: #393939;
font: 18px/24px "Lucida Grande", Tahoma, Verdana, sans-serif;
font-weight: bold;
text-transform: uppercase;
background: transparent url(../images/bg-h3.jpg) bottom left repeat-x;
padding: 0 0 15px 5px;
margin: 0 0 20px 0;
}
#who p {
margin: 0 0 20px 0;
}
#who p.more {
text-align: right;
}
#who p.more a {
text-decoration: underline;
}
#services {
width: 332px;
float: right;
margin: 45px 0 0 0;
padding: 0 0 0 25px;
border-left: 1px solid #e4e4e4;
}
#services li {
width: 310px;
height: 47px;
display: block;
padding: 10px 0 5px 20px;
}
#services li h5 {
color: #111;
font: 12px "Lucida Grande", Tahoma, Verdana, sans-serif;
font-weight: bold;
}
#services li h5 a {
color: #111;
}
#services li p {
color: #545454;
font: 11px "Lucida Grande", Tahoma, Verdana, sans-serif;
}
#services li#first {
border-bottom: 1px solid #e4e4e4;
background: #f6f6f6;
}
#services li#first:hover {
text-decoration: none;
background: #fff;
}
#services li#second {
border-top: 1px solid #fff;
border-bottom: 1px solid #e4e4e4;
background: #f6f6f6;
}
#services li#second:hover {
text-decoration: none;
background: #fff;
}
#services li#third {
border-top: 1px solid #fff;
background: #f6f6f6;
}
#services li#third:hover {
text-decoration: none;
background: #fff;
}
.servicesList {
}
.servicesList strong {
display: block;
font-size: 12px;
}
.servicesList li {
margin-bottom: 1.5em;
}
/* --- Content: Second Row --- */
#bottomMain {
border-top: 1px solid #e4e4e4;
padding: 15px 15px 0;
margin: 0 0 25px 0;
overflow: hidden;
}
#notes {
width: 265px;
padding: 0 25px 0 0;
float: left;
}
#swipe {
width: 270px;
padding: 0 25px 0 25px;
float: left;
border-right: 1px solid #e4e4e4;
border-left: 1px solid #e4e4e4;
}
#bulb {
width: 220px;
float: left;
padding: 0 0 0 25px;
}
.phone {
font-size: 25px;
color: #40c3d3;
}
#notes h4, #swipe h4, #bulb h4 {
color: #222;
font: 14px/24px "Lucida Grande", Tahoma, Verdana, sans-serif;
font-weight: bold;
margin: 0 0 10px 0;
height: 20px;
padding: 0;
}
/* --- FOOTER --- */
#footer {
height: 120px;
padding-top:20px;
margin: 150px 0 0 0;
}
#footer {
background: #f0f0f0 url(../images/bg-h3.jpg) top left repeat-x;
}
#footer-inner {
width: 800px;
margin: 0 auto;
overflow: hidden;
}
#footer-inner p {
float: left;
}
#footer-inner p.credits {
float: right;
line-height: 18px;
}
#footer-inner p.credits a {
}
#footer-inner p.credits a.blend {
text-decoration: none;
color: #555;
}
/* -------------------------
--------- SUBPAGES ---------
-------------------------- */
#content {
width: 100%;
background: transparent url(../images/bg-maincontent.jpg) top left no-repeat;
margin: 36px 0 0 0;
overflow: hidden;
}
#portfolio {
margin: 30px 5px 0;
overflow: hidden;
}
/* --- Single Portfolio Item --- */
.item {
width: 425px;
float: left;
margin: 0 10px 40px;
color: #565656;
}
.item img {
background-color: #ececec;
border: 1px solid #ddd;
padding: 6px;
margin: 0 0 15px;
}
.item h2 {
font: 18px "Lucida Grande", Tahoma, Verdana, sans-serif;
border-top: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
padding: 12px 0 12px 2px;
margin: 0 7px 15px;
}
.item p {
padding: 0 10px;
}
/* --- Portfolio Nav --- */
#folioNav {
width: 100%;
height: 35px;
margin: 0 5px;
background: #ececec url(../images/bg-h3.jpg) top left repeat-x;
border-bottom: 1px solid #e4e4e4;
overflow: hidden;
}
#folioNav span#previous {
float: left;
width: 96px;
height: 26px;
background: transparent url(../images/previous.png) top left no-repeat;
text-indent: -9999px;
margin: 5px 10px;
}
#folioNav span#next {
float: right;
width: 96px;
height: 26px;
background: transparent url(../images/next.png) top left no-repeat;
text-indent: -9999px;
margin: 5px 10px;
}
/* --- Clients & Testimonials --- */
#wrap {
margin: 40px 10px 25px 20px;
overflow: hidden;
}
#clients {
width: 600px;
float: left;
padding: 0 10px 0 0;
border-right: 1px solid #e4e4e4;
position: relative;
}
#testimonials {
width: 230px;
float: left;
margin: 0 0 0 20px;
}
#clients h4, #testimonials h4 {
color: #222;
font: 14px/16px "Lucida Grande", Tahoma, Verdana, sans-serif;
font-weight: bold;
margin: 0 0 10px 0;
height: 16px;
padding: 0 0 0 22px;
}
#clients h4 {
/*background: url(../images/h4-clients.jpg) top left no-repeat;*/
padding: 0;
}
#testimonials h4 {
background: url(../images/h4-testi.jpg) top left no-repeat;
line-height: 10px;
margin-left: 18px;
}
#clientlist {
overflow: hidden;
}
#clientlist li {
float: left;
margin: 0 15px 0 0;
}
#clientlist li img,
img.grayBorder,
img.thumbPopup {
background-color: #ececec;
border: 1px solid #ddd;
padding: 6px;
margin: 0 0 15px;
}
#testimonials .quotel{
padding-right:5px;
float:left;
height:17px;
width:20px;
background: url(../images/quotes.jpg) top left no-repeat;
}
#testimonials blockquote {
padding: 0 10px 0 25px;
margin: 0 0 15px 0;
color: #999;
font-style: italic;
}
#testimonials .content{
float:left;
width:170px;
}
#testimonials .quoter{
position:relative;
top:-18px;
padding-left:5px;
float:right;
height:17px;
width:20px;
background: url(../images/quotesr.jpg) bottom right no-repeat;
}
#testimonials p.author {
padding: 0 10px 0 25px;
}
#testimonials span.readmore {
display: block;
width: 96px;
height: 25px;
background: transparent url(../images/readmore.png) top left no-repeat;
text-indent: -9999px;
margin: 0 20px;
}
/* --- CONTACT PAGE --- */
#contactForm {
width: 465px;
float: left;
padding: 0 20px 0 0;
margin: 25px 0 25px 20px;
}
.topBorder {
border-top: 1px solid #e4e4e4;
padding-top: 30px;
}
#contactInfo {
margin-bottom: 50px;
}
#contactInfo p {
color: #545454;
}
#contactInfo h4 {
color: #222;
font: 14px/16px "Lucida Grande", Tahoma, Verdana, sans-serif;
font-weight: bold;
background: url(../images/contact.png) top left no-repeat;
margin: 0 0 10px 0;
height: 16px;
padding: 0 0 0 25px;
}
/* --- Contact Form --- */
#contactForm form label {
display: none;
}
#contactForm form input {
display: block;
height: 15px;
border: none;
border-bottom: 1px solid #ccc;
background-color: #f6f6f6;
width: 230px;
margin: 0 0 20px 0;
color: #2c2c2c;
padding: 5px;
font: 11px/20px "Lucida Grande", Tahoma, sans-serif;
}
#contactForm form input#submit {
display: inline;
height: 25px;
width: 97px;
background: transparent url(../images/send.png) top left no-repeat;
border: 0;
text-indent: -9999px;
float: right;
margin: 5px 55px 0 0;
}
#contactForm form textarea {
display: block;
border: none;
border-bottom: 1px solid #ccc;
background-color: #f6f6f6;
width: 400px;
margin: 0 0 20px 0;
color: #2c2c2c;
padding: 5px;
font: 11px/20px "Lucida Grande", Tahoma, sans-serif;
}