@import url("blueprint/screen.css");
@import url("blueprint/ie.css");
@import url("typography.css");

body {
	background: #ababab;
}

.wrapper {
	position: relative;
	width: 950px;
	margin: 10px auto 0;
	padding: 0 20px;
	background: white url(images/bg-content.png) center center repeat-y;
	overflow: auto;
}

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

.header {
	width: 990px;
	margin-left: -20px;
}

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

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

.banner h2 {
	color: white;
	line-height: 100px;
	text-indent: 30px;
	font-size: 1.5em;
}

.content {
	float: left;
	width: 950px;
	text-align: left;
}

.mainContent,
.subContent {
	float: left;
	width: 680px;
	margin-bottom: 10px;
	padding: 10px;
}

.subContent {
	width: 210px;
	padding-left: 19px;
	border-left: 1px solid #eee;
}

.mainContent {
	padding-right: 20px;
}

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

/* Masthead & Navigation 
--------------------------------------------- */
.header h1,
.header h2 {
	display: none;
}

.header ul,
.header ul li,
.header ul li a {
	display: block;
	position: relative;
	float: left;
}

.header ul {
	float: right;
	margin: 10px 20px 0 0;
}

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

.header ul li a:hover {
	color: #e36a6a;
}

.header ul li ul {
	display: none;
}

/* Services Navigation 
--------------------------------------------- */
.servicesNav h4 {
	margin-bottom: 1em;
}

.servicesNav a {
	text-decoration: none;
}

.servicesNav a:hover {
	color: #333;
}

.servicesNav ul,
.servicesNav ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.servicesNav ul {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

.servicesNav ul ul {
	margin-top: 0.25em;
	padding-top: 0.25em;
	border-top: 1px solid #e4e4e4;
}

.servicesNav ul li {
	margin-bottom: 1.5em;
}

.servicesNav ul li a {
	font-weight: bold;
	color: #0f4e53;
}

.servicesNav ul ul li {
	margin-bottom: 0.25em;
	padding-bottom: 0.25em;
	border-bottom: 1px dotted #ddd;
}

.servicesNav ul ul li a {
	font-weight: normal;
	color: #2d7980;
}

.servicesNav ul li.last {
	margin: 0;
	padding: 0;
	border: 0;
}

.servicesNav ul ul li.active {}

.servicesNav ul ul li.active a {
	margin-left: -26px;
	padding-left: 26px;
	color: #333;
	background: url(images/subNav-arrow.png) 0 2px no-repeat;
	cursor: default;
}
/* Home Page
--------------------------------------------- */
#home .banner {
	height: 270px;
	margin-bottom: 0.6em;
	background: #f4f4f4 url(images/splash-home.jpg) center center no-repeat;
}

#home .banner 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;
}

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

#home .banner p {
	text-indent: -999em;
}

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

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

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

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

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

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

.columns {
	float: left;
	width: 100%;
	margin-bottom: 1.5em;
}

.column {
	float: left;
	margin-right: 10px;
	padding: 10px;
}

.column.last {
	margin-right: 0;
}

.columns.threeCol .column {
	width: 290px;
}

.columns.fourCol .column {
	width: 210px;
}

.columns.fourCol .column img {
	margin-bottom: 10px;
	border: 5px solid #f4f4f4;
}

.columns.fourCol .column h4,
.columns.fourCol .column p {
	margin-bottom: 10px;
	color: #666;
}

.columns.fourCol .column h4 span {
	color: #222;
}

.columns.fourCol .column ul {
	color: #999;
	padding-left: 2.5em;
}

/* Logo Design
--------------------------------------------- */
ul.showcase,
ul.showcase li {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.showcase {
	padding: 0 0 0 110px;
}

ul.showcase li {
	margin: 0 10px 10px 0;
}

/* Temp Form
--------------------------------------------- */
form,
form fieldset,
form label,
form input,
form button {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
}

form#EmailForm {
	width: 620px;
}

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

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

form#EmailForm label input:focus {
	background: white;
}

form#EmailForm input#cfContact {
	padding: 3px 7px;
	font-weight: bold;
}

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;
}

/* 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: #e4e4e4;
}

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

/* 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;	
}

/* Footer
--------------------------------------------- */
.footer p {
	color: white;
	margin: 1em 0;
	padding: 0;
	text-align: right;
}

.footer .footer-wrapper {
	margin-top: 30px;
	background: #666;
	overflow: auto;
}

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

.footer .content .links {
	float: left;
	width: 670px;
}

.footer .content .social {
	float: right;
	padding-right: 0;
	width: 280px;
}

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

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

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

.footer .content .contact {
	float: left;
	width: 100%;
	margin-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid #555;
}

.footer .content .contact p {
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid #777;
	color: #999;
}

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

.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: #e4e4e4;
	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: #bbb;
}