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;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
br.bummer-man { clear: both; display: block; height: 0; width: 0;}
/*----------------
COLOURS
brown - #1f1f1f
orange - #FF6600
*/
/* STRUCTURE
------------------------- */
body { background: #e5e5e5; margin-top: 10px; }
#wrap { margin: 0 auto; width: 880px; background: #efefef url(../i/wrap-bg.gif) repeat-y; }
/* TYPE
------------------------- */
body { font-family: Arial, sans-serif; font-size: 12px; color: #333; }
h1 { font-size: 20px; }
h2 { font-size: 20px; color: #999; font-family: Georgia, serif; }
a { color: #FF6600; }
/* HEADER
------------------------- */
#hd { height: 250px; background: transparent url(../i/hd-bg.jpg) no-repeat 10px top; padding-right: 48px; margin-bottom: 35px; }
#skip { display: none; }
/* Heading */
#hd h1 { float: left; margin-top: 65px; }
/* Main Nav */
#hd #main-nav { display: inline; float: right; margin-top: 160px; }
#hd #main-nav li { display: block; float: left; margin-left: 5px; }
#hd #main-nav li a { display: block; padding: 7px 12px; font-size: 13px; color: #1f1f1f; text-decoration: none;
text-transform: lowercase; background: #efefef; }
#hd #main-nav li a:hover,
#hd #main-nav li#active a { background: #1f1f1f; color: #efefef; }
#hd #main-nav li a:active { background: #f60; color: #efefef; }
/* BODY
------------------------- */
#bd { line-height: 18px; }
#bd h2 { margin-bottom: 20px; }
#bd #main-content p,
#bd #main-content ul { margin-bottom: 20px; }
/* ----- About Us ----- */
/* Main Content */
#about #bd { padding-left: 30px; }
#about #main-content { float: left; width: 490px; }
#about #main-content h2 { padding-left: 10px; }
#about #main-content p { padding: 0 10px; }
#about #main-content ul { padding-left: 45px; margin-top: -15px;}
#about #main-content ul li { list-style:url(../i/bullet.gif); }
#about #main-content img { margin-bottom: 20px; }
/* Second Content */
#about #second-content { float: right; width: 320px; }
#about #testimonies { background: #fff; padding: 5px 20px; font-size: 11px; line-height: 15px; }
#about #testimonies li { border-bottom: 1px #ccc solid; padding: 15px 0; }
#about #testimonies li#last { border-bottom: none; }
#about #testimonies li .cite { color: #FF6600; }
#about #testimonies li .quote { padding: 5px 10px 0 10px; font-style: italic; }
/* ----- Services ----- */
#services #bd h2 { padding-left: 40px; }
#services #bd h3 { font-weight: bold; margin-bottom: 5px; }
#services #bd p#intro { padding: 0 40px; }
#services .service-box { width: 360px; height: 160px; padding: 20px 30px; margin-top: 20px; background: #fff; }
#services .commercial { float: left; }
#services .domestic { float: right; }
#services .service-box ul { padding-left: 45px; margin-top: 10px; list-style: url(../i/bullet-white.gif); }
#services .service-boxul li { }
/* ----- Gallery ----- */
#gallery h2 { padding-left: 40px; }
#gallery .section { margin-bottom: 30px; }
#gallery .section-last { margin-bottom: 0; }
#gallery .images { display: block; width: 500px; background: #fff; padding: 20px 25px 10px 30px; }
#gallery .images li { float: left; margin: 0 5px 10px 0}
#gallery .images img { width: 160px; height: auto;}
#gallery .content { width: 280px; }
#gallery .content h3 { margin-left: 10px; font-weight: bold; }
#gallery .content p.text { padding: 5px 10px 10px; border-bottom: 1px #ccc solid; }
#gallery .content blockquote { padding: 10px; font-size: 11px; }
#gallery .content blockquote .quote { font-style: italic; line-height: 15px; }
#gallery .content blockquote .cite { color: #FF6600; }
#gallery .content-l { padding-left: 30px; }
#gallery .content-l .content { float: left; }
#gallery .content-l .images { float: right; }
#gallery .content-r { padding-right: 30px; }
#gallery .content-r .content { float: right; }
#gallery .content-r .images { float: left; }
/* FOOTER
------------------------- */
#ft { margin: 30px 10px 0; }
#ft h2 { color: #fff; }
/* Contact Detials */
#contact-detials { background: #1f1f1f; margin: auto 10px; padding: 15px 30px 5px; color: #fff; }
#contact-detials h2 { padding-bottom: 20px; }
#contact-detials .vcard { display: block; float: left; width: 250px; }
#contact-detials .vcard li { padding-left: 10px; line-height: 20px; }
#contact-detials .fnorg { display: none; }
#contact-detials .type { display: block; width: 60px; float: left; }
#contact-detials .indent { display: block; margin: -5px 0 0 60px; }
/* Contact Form */
#contact-detials form { display: block; float: right; width: 500px; }
#contact-detials form #form-person { display: block; float: left; width: 240px; }
#contact-detials form #form-message { display: block; float: right; width: 240px; }
#contact-detials form label { display:block; margin:1px; }
#contact-detials form .input { width: 230px; font-family:Arial, Helvetica, sans-serif; font-size:12px; border: none;
background: #4c4c4c; padding: 4px; color: #ccc; margin-bottom: 5px; }
#contact-detials form #message { height: 55px; }
#contact-detials form .send { float: left; display: block; border: none; padding: 3px 10px; background:#e5e5e5;
margin-right: 10px; }
#contact-detials form p { float: left; margin-top: 5px; color: #f60; }
/* Copyright and Makers Mark */
#copy-maker { font-size: 10px; color: #898989; background: #e5e5e5 url(../i/contact-bot-bg.gif) no-repeat;
padding: 20px 10px; }
#copy-maker a { color: #4C4B4B; text-decoration: none; }
#copy-maker a:hover { color: #FF6600; text-decoration: underline; }
#copy-maker #copy { float: left; }
#copy-maker #maker { float: right; }