@import url(reset.css);

body { background: #000 url(../images/body-bg.gif) 0 0 repeat-x; /*background: url(../images/background.png) top center no-repeat;*/ font-size: 75%; font-family: Helvetica, Arial, sans-serif; }
strong { font-weight: bold; }
em { font-style: italic; }
.clear-both { clear: both; }
.fail {  background-color: yellow; }
p .fail { color: #000; padding: 0 2px; }
p { color: #FFF; line-height: 20px; margin: 0 0 20px 0; }
a { color: #C1C1C2; text-decoration: underline; }
a:hover { color: #FFF; }
a img { padding: 5px; }
a:hover img { background: #502472; }
h2 a, h3 a, .button a { text-decoration: none; }

/* Masthead */
#masthead { height: 400px; margin: 0 auto; position: relative; width: 980px; }
#masthead h1 { margin: 0 0 48px 20px; }
#masthead h1 a img { padding: 0; }
#masthead ul { margin: 0 0 0 20px; }
#masthead li a { color: #C1C1C2; display: block; font-family: Optima, "Trebuchet MS", sans-serif; font-size: 20px; text-decoration: none; width: 120px; }
#masthead li a:hover { color: #FFF; }
#masthead .contact { color: #C1C1C2; position: absolute; right: 20px; text-align: right; top: 28px; }
#masthead .contact a { color: #C1C1C2; }
#masthead .contact a:hover { color: #FFF; }
#masthead .contact p { margin: 0; }
#masthead .contact p.telephone { font-family: Optima, "Trebuchet MS", sans-serif; font-size: 20px; margin-top: 2px; }

/* Main content */
#main-content { clear: both; margin: 0 auto; min-height: 498px; width: 980px; }
h2, h3, h4 { color: #C1C1C2; font-family: Optima, "Trebuchet MS", sans-serif; }
#main-content li { line-height: 20px; }
#main-content .button a { background: url(../images/button-bg.png) right center no-repeat; color: #FFF; display: block; padding: 0 0 0 5px; }
#main-content .button a:hover { background: url(../images/button-bg-hover.png) right center no-repeat; }
input.submit { background: url(../images/button-bg.png) right center no-repeat; border: none; color: #FFF; padding: 2px; text-align: left; }
input.submit:hover { background: url(../images/button-bg-hover.png) right center no-repeat; cursor: pointer; }

/* Footer */
#footer-wrap { background: #000 url(../images/body-bg.gif) 0 0 repeat-x; clear: both; }
#footer-inner { margin: 0 auto; overflow: hidden; width: 940px; }
#footer-inner ul { background: url(../images/inspiring-design.gif) 0 -1px no-repeat; padding: 62px 0 0 0; overflow: hidden; }
#footer-inner ul li { float: left; margin: 0 39px 34px 0; }
#footer-inner a { text-decoration: underline; }
#footer-inner p { color: #C1C1C1; }
#footer-inner p.address { clear: left; float: left; }
#footer-inner p.contact { float: right; }

/* Home page specific */
#home-page a.nav-home { color: #FFF; }
#home-page .item { float: left; margin: 20px 0 0 20px; position: relative; width: 300px; }
#home-page .item img { left: -5px; position: absolute; top: -5px; }
#home-page .item h2 { border-top: 2px solid #632B8E; font-size: 24px; margin: 200px 0 10px; padding: 10px 0 0 0; }
#home-page #main-content .team .button a { width: 166px; }
#home-page #main-content .button a { width: 86px; }

#home-page .top-item { float: right; margin: -300px 20px 0 0; min-height: 300px; }
#home-page .top-item h2 { margin: 0 0 10px; }
#home-page .top-item img { left: -325px; }

/* About page specific */
#about-page a.nav-about { color: #FFF; }
body[id="about-page"] h2 { border-top: 2px solid #632B8E; font-size: 34px; float: right; margin: -260px 20px 0 0; padding: 40px 70px 0 0; width: 550px; }
#about-page h3 { border-top: 2px solid #632B8E; font-size: 24px; margin: 0 0 10px; padding: 10px 0 0 0; }
#about-page #first-impressions { float: left; margin: 20px 0 0 20px; width: 300px; }
#about-page #about-ininc { float: left; margin: 20px 0 0 20px; width: 620px; }
#about-page h4 { clear: both; color: #959595; font-size: 18px; margin: 0 0 18px; padding: 0 0 0 140px; position: relative; }
#about-page h4 img { left: 0; position: absolute; top: 0; }
#about-page div[id="about-ininc"] p { float: left; margin: 0 0 20px 140px; width: 300px; }
#about-page div[id="about-ininc"] .contact { float: right; margin: -80px 0 0 0; text-align: right; }
#about-page div[id="about-ininc"] .contact p { float: none; margin: 0; }
#about-page #main-content .button a { float: right; margin-top: 5px; text-align: left; width: 66px; }

/* Showcase page specific */
#showcase-page a.nav-showcase { color: #FFF; }
body[id="showcase-page"] h2 { border-top: 2px solid #632B8E; font-size: 40px; float: right; margin: -260px 20px 0 0; padding: 20px 250px 0 0; width: 370px; }
#showcase-page h4 { color: #959595; font-size: 18px; margin: 0 0 15px; }
#showcase-page #showcase-archive { float: left; margin: 20px 0 0 20px; width: 300px; }
#showcase-page #showcase-archive h3 { color: #959595; font-size: 18px; margin: 0 0 15px; padding: 10px 0 0 0; }
#showcase-page #our-work { float: right; margin: 20px 20px 0 0; width: 300px; }
#showcase-page #our-work h3 { border-top: 2px solid #632B8E; font-size: 24px; margin: 0 0 10px; padding: 10px 0 0 0; position: relative; }
#showcase-page #our-work h3 img { left: -325px; position: absolute; top: -5px; }
#showcase-page #our-work .work-example { min-height: 180px; margin: 0 0 20px; }
#showcase-page #main-content .button a { width: 66px; }

/* These styles control the changing colour on the archive nav, depending on which page you're on */
body.may-2010 #showcase-archive .may-10, body.december-2009 #showcase-archive .december-09, body.august-2009 #showcase-archive .august-09, body.july-2009 #showcase-archive .july-09, body.june-2009 #showcase-archive .june-09, body.april-2009 #showcase-archive .april-09 { color: #FFF; }

/* Services page specific */
#services-page a.nav-services { color: #FFF; }
body[id="services-page"] h2 { border-top: 2px solid #632B8E; font-size: 34px; float: right; margin: -260px 20px 0 0; padding: 40px 70px 0 0; width: 550px; }
#services-page h3 { border-top: 2px solid #632B8E; font-size: 24px; margin: 0 0 10px; padding: 10px 0 0 0; position: relative; }
#services-page h3 img { left: -325px; position: absolute; top: -5px; }
#services-page #what-clients-say { float: left; margin: 20px 0 0 20px; width: 300px; }
#services-page #our-work { float: right; margin: 20px 20px 0 0; width: 300px; }
#services-page #our-work p { min-height: 150px; }
#services-page h4 { color: #959595; font-size: 18px; margin: 0 0 15px; }

/* Contact page specific */
body#contact-page { background: #000 url(../images/body-contact-bg.gif) 0 0 repeat-x; }
#contact-page a.nav-contact { color: #FFF; }
#contact-page #main-content { min-height: 298px; }
#contact-page h2, #contact-page h3 { border-top: 2px solid #632B8E; font-size: 24px; margin: 0 0 10px; padding: 10px 0 0 0; position: relative;}
#contact-page #address { float: right; margin: -300px 20px 0 0; position: relative; width: 300px; }
#contact-page #address .google-map { left: -325px; position: absolute; top: -5px; }
#contact-page #call-us { float: left; margin: 20px 0 0 20px; width: 300px; }
#contact-page #call-us img { width: 60px; }
#contact-page #call-us .contact p { margin: 0; }
#contact-page #call-us .contact .button { width: 65px; }
#contact-page #form { float: right; margin: 20px 20px 0 0; position: relative; width: 620px; }
#contact-page #form p { clear: left; }
#contact-page #form form { position: relative; }
#contact-page #form p.message { position: absolute; right: 0; top: 0; }
#contact-page #form label { float: left; display: block; width: 76px; }
#contact-page #form input { width: 200px; }
#contact-page #form textarea { font-family: Helvetica, Arial, sans-serif; font-size: 12px; height: 80px; width: 230px; }
#contact-page #form input.submit { float: right; margin-top: -21px; width: 66px; }

/* Legal page specific */
#legal-page a.nav-legal { color: #FFF; }
#legal-page #information { border-top: 2px solid #632B8E; float: right; margin: 20px 20px 0 0; padding: 10px 0 0 0; width: 620px; }
body[id="legal-page"] h2 { border-top: 2px solid #632B8E; font-size: 34px; float: right; margin: -260px 20px 0 0; padding: 190px 70px 0 0; width: 550px; }
#legal-page h3 { font-size: 18px; line-height: 24px; position: relative; }
#legal-page #main-content p { margin: 0 0 20px; }

/* Legal page specific */
#sitemap-page a.nav-legal { color: #FFF; }
#sitemap-page #information { border-top: 2px solid #632B8E; float: right; margin: 20px 20px 0 0; padding: 10px 0 0 0; width: 620px; }
body[id="sitemap-page"] h2 { border-top: 2px solid #632B8E; font-size: 34px; float: right; margin: -260px 20px 0 0; padding: 190px 70px 0 0; width: 550px; }
#sitemap-page h3 { font-size: 18px; line-height: 24px; position: relative; }
#sitemap-page #main-content p { margin: 0 0 20px; }

/* Legal page specific */
body[id="error-page"] h2 { border-top: 2px solid #632B8E; font-size: 34px; float: right; margin: -260px 20px 0 0; padding: 190px 70px 0 0; width: 550px; }
#error-page #information { border-top: 2px solid #632B8E; float: right; margin: 20px 20px 0 0; padding: 10px 0 0 0; width: 620px; }
#error-page #main-content p { margin: 0 0 20px; }