@import url("lib/framework.css");
@import url("lib/plugins/fancy-type/screen.css");
@import url("lib/ie.css");

body {
	background: #ababab;
	min-width: 960px;
}

#wrapper {
	position: relative;
	float: left;
	width: 990px;
	margin: 10px 0 0 -495px;
	left: 50%;
	background: white url(bg-content.png) center center repeat-y;
}

* html #wrapper {
	margin-left: -247px;
}

#masthead,
#footer {
	position: relative;
	float: left;
	width: 100%;
	height: 110px;
	background: url(masthead.png) top left no-repeat;
}

#footer {
	background: url(footer.png) bottom center no-repeat;
	height: 20px;
}

#splash {
	width: 970px;
	height: 100px;
	padding: 10px 0;
	margin: 0 0 12px -10px;
	border-top: 1px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;
	font-size: 1.5em;
	background: #F4F4F4 url(splash-interior.jpg) 10px 10px no-repeat;
	overflow: hidden;
}

* html #splash {
	margin-left: 5px;
}

#splash h2 {
	color: white;
	line-height: 100px;
	text-indent: 32px;
	font-size: 1.6em;
}

#splash p {
	text-indent: -999em;
}

#mainContent {
	width: 690px;
	padding: 10px;
}

/* @group Masthead & Navigation 
--------------------------------------------- */

#masthead h1,
#masthead h2 {
	display: none;
}

#masthead ul,
#masthead ul li,
#masthead ul li a {
	display: block;
	position: relative;
	float: left;
}

#masthead ul {
	float: right;
	margin: 10px 20px 0 0;
}

#masthead ul li a {
	height: 100px;
	padding: 0 20px;
	font: normal 15px/110px Helvetica, Arial, sans-serif;
	text-transform: capitalize;
	text-decoration: none;
	color: black;
}

#masthead ul li a:hover {
	color: #e36a6a;
}

#masthead ul li ul {
	display: none;
}

/* @end */

/* @group Footer
--------------------------------------------- */

#footer p {
	color: white;
	margin: 1em 0;
	padding: 0;
	text-align: right;
}

#footer #footer-wrapper {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	margin-top: 30px;
	background: #666;
}

#footer #footer-content {
	position: relative;
	float: left;
	width: 950px;
	margin: 0 0 0 -475px;
	left: 50%;
}

#footer #footer-content #footer-links {
	position: relative;
	float: left;
	width: 670px;
}

#footer #footer-content #footer-contact {
	position: relative;
	float: left;
	width: 100%;
}

#footer #footer-content #footer-social {
	position: relative;
	float: right;
	padding-right: 0;
	width: 280px;
}

#footer #footer-content #footer-contact p {
	color: #999;
}

#footer #footer-content #footer-contact p a {
	color: #ababab;
	font-weight: normal;
}

#footer #footer-content #footer-social a {
	display: block;
	position: relative;
	float: left;
	width: 100px;
	height: 37px;
	margin: 30px 16px 0;
	text-indent: -999em;
	overflow: hidden;
}

#footer #footer-content #footer-social a.facebook {
	background: url(facebook-footer.png) 0 0 no-repeat;
}

#footer #footer-content #footer-social a.twitter {
	background: url(twitter-footer.png) 0 0 no-repeat;
}

#footer ul,
#footer ul li,
#footer ul li a {
	position: relative;
	display: block;
	float: left;
	padding-left: 0;
}

#footer ul {
	width: auto;
	margin: 18px 0 0;
	padding: 0 0 0 5px;
}

#footer ul li {
	margin-right: 20px;
}

#footer ul li.last {
	margin-right: 0;
}

#footer ul li,
#footer ul li ul {
	width: 150px
}

#footer ul li ul {
	margin-top: 0;
	padding: 0;
	font-size: 0.9em;
	font-weight: normal;
}

#footer ul li a {
	color: #b5dc66;
	font-weight: bold;
	text-decoration: none;
	text-transform: capitalize;
}

#footer ul li a:hover {
	text-decoration: underline;
}

#footer ul li ul li a {
	font-weight: normal;
	color: white;
}

/* @end */

/* @group Home Page
--------------------------------------------- */

#splash.home {
	height: 270px;
	margin-bottom: 0.6em;
	background: #F4F4F4 url(splash-home.jpg) center center no-repeat;
}

#splash.home a#quoteButton {
	display: block;
	position: absolute;
	width: 170px;
	height: 38px;
	top: 318px;
	left: 42px;
	font: bold 14px/38px Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	color: #666;
}

#splash.home a#quoteButton:hover {
	color: #333;
}

#home div.webDevelopment,
#home div.webDesign,
#home div.internetMarketing {
	background: none;
}

#home div.webDesign h4,
#home div.webDevelopment h4,
#home div.internetMarketing h4 {
	line-height: 40px;
	text-indent: 34px;
	margin-bottom: 0.25em;
}

#home div.webDesign h4 {
	background: url(icons/icon-webDesign-sm.jpg) -6px 0 no-repeat;
}

#home div.webDevelopment h4 {
	background: url(icons/icon-webDevelopment-sm.jpg) -6px 0 no-repeat;
}

#home div.internetMarketing h4 {
	background: url(icons/icon-internetMarketing-sm.jpg) -6px 0 no-repeat;
}

#home div.columns div.span-8 {
	width: 290px;
	padding: 10px;
}

/* @end */

#subContent {
	padding: 10px;
	margin: 0 0 0 -10px;
}

#subContent.columns h3 {
	margin: -0.5em 0 0.5em 15px;
}

#subContent.columns h4 {
	margin-bottom: 0.5em;
}

#subContent.columns h4,
#subContent.columns p {
	margin-left: 0;
	margin-right: 0;
}

#subContent.columns img {
	margin: 0 0 12px;
}

#subContent.columns div.span-6 {
	padding: 15px;
	width: 200px;
}

/* @group Content Columns / Typography Adjustment
--------------------------------------------- */

#subNav h4,
#servicesNav p,
#mainContent h2,
#mainContent h3,
#mainContent h4,
#mainContent p,
#mainContent li,
.columns h2,
.columns h3,
.columns h4,
.columns p {
	margin-right: 10px;
	margin-left: 10px;
}

#mainContent div.contentBox {
	padding-left: 90px;
}

#servicesNav ul {
	padding-left: 0;
	list-style: none;
}

#servicesNav ul li {
	padding: 5px 0;
	border-bottom: 1px dotted #CCC;
}

#servicesNav ul li.last {
	border: 0;
}

#servicesNav ul li ul li {
	border-bottom: 0;
	padding: 2px 0;
}

#servicesNav ul li ul li a {
	font-weight: normal;
	background: none;
}

h3 {
	color: black;
}

p {
	font-family: Arial, Helvetica, Verdana, sans-serif;
}

p.intro {
	font-size: 1em;
}

ul.links {
	list-style: none;
	padding-left: 0;
}

p.link {
	margin-top: -0.5em;
	text-indent: 10px;
	font-family: Helvetica, Arial, sans-serif;
}

div.contentBox img {
	margin-bottom: 2em;
}

div.contentBox hr {
	width: 90%;
	margin: 0 0 1.5em 10px;
	border: 0;
	border-bottom: 1px dashed #e7e7e7;
}

img.length-full {
	margin-left: 10px;
}

/* @end */

/* @group Temporary Form
--------------------------------------------- */

form,
form fieldset,
form label,
form input,
form button {
	display: block;
	position: relative;
	float: left;
}

form#EmailForm {
	width: 620px;
	padding: 10px;
}

form#EmailForm label {
	width: 300px;
	padding: 0 310px 0 0;
}

form#EmailForm label input {
	width: 300px;
	height: 20px;
	line-height: 20px;
}

form#EmailForm p.error {
	display: block;
	float: left;
	position: relative;
	width: 590px;
	margin: 4px 10px;
	background: none;
	border: none;
}

form#EmailForm label textarea {
	width: 480px;
	height: 10em;
}

/* @end */

/* @group Project Portfolio
--------------------------------------------- */

#projectPortfolio {
	position: relative;
	float: left;
	width: 600px;
	margin-left: 40px;
}

* html #projectPortfolio {
	margin-left: 20px;
}

#projectPortfolio a {
	display: block;
	position: relative;
	float: left;
	width: 180px;
	padding: 5px;
	margin: 5px;
	background: #e7e7e7;
}

#projectPortfolio a:hover {
	background: #CCC;
}

/* @end */

/* @group Icons
--------------------------------------------- */

.webDevelopment {
	background: url(icons/icon-webDevelopment.jpg) 0 0 no-repeat;
}
.mobileApps {
	background: url(icons/icon-mobileApps.jpg) 0 0 no-repeat;
}
.webDesign {
	background: url(icons/icon-webDesign.jpg) 0 0 no-repeat;
}
.webHosting {
	background: url(icons/icon-webHosting.jpg) 0 0 no-repeat;
}
.graphicDesign {
	background: url(icons/icon-graphicDesign.jpg) 0 0 no-repeat;
}
.vehicleWraps {
	background: url(icons/icon-vehicleWraps.jpg) 0 0 no-repeat;
}
.internetMarketing {
	background: url(icons/icon-internetMarketing.jpg) 0 0 no-repeat;
}
.firstStep {
	background: url(icons/icon-firstStep.jpg) 0 0 no-repeat;
}
.intranets {
	background: url(icons/icon-intranets.jpg) 0 0 no-repeat;
}
.security {
	background: url(icons/icon-security.jpg) 0 0 no-repeat;
}
.ecommerce {
	background: url(icons/icon-ecommerce.jpg) 0 0 no-repeat;
}
.consulting {
	background: url(icons/icon-consulting.jpg) 0 0 no-repeat;
}
.payPal {
	background: url(icons/icon-payPal.jpg) 0 0 no-repeat;
}
.openSource {
	background: url(icons/icon-openSource.jpg) 0 0 no-repeat;
}
.qualityTraffic {
	background: url(icons/icon-qualityTraffic.jpg) 0 0 no-repeat;
}
.chooseUs {
	background: url(icons/icon-chooseUs.jpg) 0 0 no-repeat;
}
.uxDesign {
	background: url(icons/icon-uxDesign.jpg) 0 0 no-repeat;
}
.analytics {
	background: url(icons/icon-analytics.jpg) 0 0 no-repeat;
}
.customDevelopment {
	background: url(icons/icon-customDevelopment.jpg) 0 0 no-repeat;
}
.seo {
	background: url(icons/icon-seo.jpg) 0 0 no-repeat;
}
.cms {
	background: url(icons/icon-cms.jpg) 0 0 no-repeat;
}
.ppc {
	background: url(icons/icon-ppc.jpg) 0 0 no-repeat;
}
.pci {
	background: url(icons/icon-pci.jpg) 0 0 no-repeat;
}
.socialMedia {
	background: url(icons/icon-socialMedia.jpg) 0 0 no-repeat;
}
.analytics {
	background: url(icons/icon-analytics.jpg) 0 0 no-repeat;	
}

/* @end */