/* reset */
* {border: 0; margin: 0; padding: 0; outline: 0; text-decoration: none; color: #000000}

/* global */
.clear {clear: both}

/* site design */
body {background: url('images/body-bg.jpg') repeat-x}

#wrapper {width: 960px; margin: auto; font-family: 'Century Gothic', sans-serif; font-size: 12px; letter-spacing: 1px; color: #434242; padding: 0 0 20px 0}

#header {height: 90px; margin: 20px 10px}
#header #logo {width: 220px; height: 90px; display: block; float: left; background: url('images/logo.jpg') no-repeat}
#header #navigation {float: right; margin: 40px 0 0 0; background: url('images/navigation-bg.png') repeat-x; position: relative}
#header #navigation li {float: left; list-style: none; display: inline; height: 42px}
#header #navigation #leftEnd {display: block; width: 5px; height: 42px; background: url('images/navigation-end-sprite.png'); position: absolute; left: 0; overflow: hidden}
#header #navigation #leftEnd.on {background-position: 15px 0}
#header #navigation #rightEnd {display: block; width: 5px; height: 42px; background: url('images/navigation-end-sprite.png') 5px 0; position: absolute; right: -1px; overflow: hidden}
#header #navigation #rightEnd.on {background-position: 10px 0}
#header #navigation li a {display: block; padding: 0 30px 0 30px; height: 42px; line-height: 42px; vertical-align: middle; color: #434242; background: url('images/navigation-divider.png') 0 100% no-repeat; width: 1%}
#header #navigation li.on {background-image: url('images/navigation-bg-on.png')}
#header #navigation li.on a {color: #FFFFFF}
#header #navigation li a.afterOn {background-image: url('images/navigation-divider-on.png')}
#header h1 {font-weight: normal; color: #DADADA; float: right; margin-top: 30px}

#main {background: url('images/main-bg.png') no-repeat; width: 940px; padding: 10px}

#main #content {width: 710px; margin: 0 0 0 10px; float: right}
#main #content h1 {font-weight: normal; line-height: 30px; font-size: 24px}
#main #content h2, #main #content h3 {margin: 10px 0 0 0}
#main #content h2 {border-bottom: 1px solid #434242; padding: 5px 0; font-size: 18px}
#main #content h3 {border-left: 5px solid #3588A0; padding-left: 10px; margin-left: 5px; font-size: 15px}
#main #content h3 a {text-decoration: underline}
#main #content p {line-height: 20px; margin: 5px 0}
#main #content p a {color: #3588A0; text-decoration: underline}
#main #content ul {margin: 10px}
#main #content ul li {line-height: 20px; margin: 0 0 0 20px}
#main #content label {color: #595D5C; font-weight: bold; text-transform: uppercase; display: block; margin: 5px 0}
#main #content .textInput, #main #content textarea {border: 1px solid #CFD6D9; padding: 4px}
#main #content .textInput {width: 160px}
#main #content .button {border: 1px solid #292828; padding: 5px; font-size: 13px; background: #CFD6D9; color: #292828}
#main #content #twitterFeed {width: 625px; height: 36px; background: url('images/twitter-feed.png') no-repeat; padding: 14px 0 0 85px; font-size: 13px}
#main #content img.right {float: right; padding: 0 0 10px 10px}
#main #content #box {position: relative; background: #E8E8E8 url('images/content-area-box-top.png') no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 35px 10px 10px 10px}
#main #content #box #title {position: absolute; top: 5px; left: 5px; font-size: 12px; font-weight: bold; color: #FFFFFF}
#main #content #box #rss {position: absolute; top: 5px; right: 5px}

#main #moreNavigation {float: left; width: 220px}
#main #moreNavigation li {list-style: none; background: url('images/service-button-bg.png') no-repeat}
#main #moreNavigation li a {display: block; padding: 0 0 10px 50px; line-height: 40px; height: 40px; color: #DADADA; font-size: 13px}
#main #moreNavigation .graphicDesign {background: url('images/graphic-design-icon.png') 9px 4px no-repeat}
#main #moreNavigation .webDevelopment {background: url('images/web-development-icon.png') 9px 4px no-repeat}
#main #moreNavigation .mobileApplications {background: url('images/mobile-applications-icon.png') 9px 4px no-repeat}
#main #moreNavigation .socialNetworking {background: url('images/social-networking-icon.png') 9px 4px no-repeat}

#main #topGraphic {float: right; width: 710px; margin-bottom: 10px}
#main #topGraphic img {height: 190px; width: 710px}

#main .box {float: left; width: 200px; margin: 0 0 10px 0; clear: left; background: #CFD6D9; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px}
#main .box p {font-size: 11px; line-height: 20px}
#main .box h2 {font-size: 13px; font-weight: bold}
#main .box .testimonialFooter {margin: 10px 0 0 0}
#main .box .testimonialFooter img {float: left; height: 40px; margin: 0 10px 0 0}
#main .box .testimonialFooter .name {font-size: 12px}
#main .box .testimonialFooter .title {font-size: 10px}

#main #highQualityLogo {float: right; margin: 20px 0 0 0}

#main .portfolioBox {width: 345px; float: left; margin: 5px; display: inline}

#main #requestAQuoteForm td {padding: 5px 10px}
#main #requestAQuoteForm textarea {width: 360px; height: 80px}

#footer {clear: both; position: relative; padding: 10px 0 0 0; height: 110px; background: url('images/footer-bg.png')}
#footer #contactInfo {background: url('images/footer-email.png') no-repeat; padding: 0 0 0 130px; height: 110px; float: left; margin: 0 20px}
#footer #contactInfo .label {clear: left; float: left; color: #9FA3A2; margin-top: 15px}
#footer #contactInfo .info {clear: left; float: left; color: #DADADA; font-size: 13px}
#footer #requestAQuote {background: url('images/request-a-quote-area.png') no-repeat; height: 70px; width: 180px; padding: 20px; float: left}
#footer #requestAQuote span {line-height: 35px; color: #DADADA; text-align: center; font-size: 16px; display: block; width: 180px}
#footer #requestAQuote a {line-height: 20px; color: #FFFFFF; text-align: center; font-size: 13px; display: block; width: 180px; line-height: 20px; margin: 10px 0 0 0}
#footer #socialNetworking {position: absolute; right: 0; top: 20px}
#footer #socialNetworking li {list-style: none; float: left; display: inline}
#footer #socialNetworking li a {display: block; padding: 0 5px; height: 40px; width: 1%}
#footer #socialNetworking li a img {height: 60px; width: 60px}
#footer #copyright {position: absolute; right: 15px; top: 90px; color: #9FA3A2}
#footer #copyright a {color: #DADADA; text-decoration: underline}