@charset "utf-8";
/* CSS Document */
/* z e r o e r */
html,body,div,ul,ol,li,h1,h2,h3,h4,h5,pre,p,blockquote {margin: 0;padding: 0;}
ul, li, h3, h2, h1, p {list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;}	
a img{border:none;}	
a:link, a:visited{
	text-decoration:none;
	color:#FFF;
}
a:hover, a:active {
	text-decoration:underline;
	color:#999;
}
.clear{clear:both;}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}
/* z e r o e r  */

* html {font-size:100%;}
body{
	font-size:82.5%;
	background:#fff url(/inc/img/bg/intofocus.jpg) top left no-repeat fixed;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	
	}
#outWrap { 
	border-top:.4em solid black;
	width:100%;
	height:100%;
	background:#fff url(/inc/img/bg/intofocus.jpg) no-repeat fixed top left; /*background:#fff url(/inc/img/construct/rubberbandball-small.jpg) no-repeat scroll bottom right; */ }
.contain{
	width:960px;
	margin:0 auto;
}
#sliderOutWrap {
	width: 960px;
	margin: 0 auto;
	position: relative;
	}
#content {
	float:left;
	/*height:435px;*/
	overflow:hidden;
	/*overflow-y:auto; /* <<< do this to ensure no-.js usability (creates scroll bar for content access) */
	position:relative;
	width:960px;
	}	
.section{
	position:relative;
	width:2895px;
	}
.section .sub{
	position:relative;
	float:left;
	width:960px;
	height:435px;
	}

ul.navigation {
	list-style: none;
	position:absolute;
	right:330px;
	text-align:right;
	font-size:150%;
	font-weight:bold;
	top: 25px;
	width: 16em;
	}
ul.navigation li {
	display: inline;
}
ul.navigation a {
	padding:10px;
	color: #444;
	text-decoration: none;
	}
ul.navigation li a:hover {
	color: #000;
	}
ul.navigation a:focus {outline: none;}
#masthead {
	position:relative;
	padding:.8em 0 .4em 0;
	margin-bottom: 53px;
	}

#mainContent{
	padding:0;
	}

.leftSide{
	width:600px;
	height:380px;
	float:left;
	background:url(/inc/img/bg/divider.png) no-repeat scroll right top;
	}
.rightSide { margin-left:620px; margin-right:10px;}
.rightSide h3{
	padding:15px 0px 10px 0px;
	font-size:24px;
	}
.rightSide h4{
	padding:25px 0px 3px 0px;
	font-size:18px;
	border-bottom:1px solid #e4e4e4;
	}
address{font-style:normal;font-weight:bold;text-align:center;padding-top:.3em;}

#shomptonFamilyWrap{
	width:880px;
	margin:10px auto 0 auto;
	padding:0 0.5em;
	clear:both;
	}
h3#shomptonFamily {
	text-align:center;
	background:url(/inc/img/bg/horiz_divider_2.png) no-repeat top center;
	padding-bottom:14px;
	font-size:28px;
	color:#888;
	padding-top: 14px;
	font-style: italic;
	}
#clientProfiles {
	width:960px;
	margin: 0 auto .8em auto;
	}	
#clientProfiles a img{
	/*filter:alpha(opacity=100);*/
	-moz-opacity: 1.0;   
	opacity: 1.0;
	}
#clientProfiles a:hover img{
	/*filter:alpha(opacity=30);*/
	-moz-opacity: 0.5; 
	opacity: 0.5;
	}

ul#icoRow {
	text-align:center;
	list-style-position:inside;
	line-height:45px;
	margin: 16px 0 0px 0;
	}
ul#icoRow li {
	display:inline;
	line-height:0px;
	}
ul#icoRow li img{
	padding:0 7px;
	}



/************************************************************
	t o o l - t i p s
************************************************************/	

/*tool tip sample document css */
.qtip .tipcontent h2{ margin-bottom: 3px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:175%;color:#666;}
.qtip .tipcontent p{ font-family:Arial, Helvetica, sans-serif; overflow: hidden !important; padding-bottom:7px !important; font-size:14px !important; line-height:1.3 !important;} 
.tipcontent p.introText {font-size:12px !important; line-height:1.4 !important; }
.tipcontent h2 a { color:#444;}
a.visitLink{ font-weight:bold !important; color:#000 !important;}
a.visitLink:hover {color:#888;}
/*t o o l  t i p   s a m p l e d o c u m e n t   c s s  */	
.qtip .qtipcontent .toolTipText{
font-size:12px; line-height:1.4;}
/************************************************************
	t o o l - t i p s
************************************************************/	

.theSlideWrapper{
	height:435px;
	width:960px;
	background:url(/inc/img/construct/20090730/20090730_slide_bg.png) no-repeat center top;
	color:#fff;
}
#logo {
	position: absolute;
	z-index: 1;
	height: 53px;
	width: 275px;
	top: 10px;
	right: 0px;
}
li#webDev,
li#googleApps,
li#seo,
li#eCommerce,
li#scriptingProgramming,
li#hosting,
.slideContentWrap
{
	height:435px;
	width:960px;
}
#endRowWrap{
	width:100%;
	height:463px;
	background:url(/inc/img/bg/20090730_endrowwap.jpg) top left repeat-x scroll;
	color:#FFF;
	}
p.footCopy {
	color:#888;
	font-size:16px;
	line-height:1.4;
	font-family: arial;
	font-weight: normal;
	}
#endRow {
	background:#000 url(/inc/img/bg/20090730_footerfocus_bg.jpg) center center no-repeat scroll;
	/*background:url(/inc/img/bg/horiz_divider_2.png) no-repeat top center;*/
	font-weight:bold;
	height:463px;
	}
#endRow h4,
#endRow h5{
	padding-top:12px;
	font-size: 15px;
	color: #FFF;
	letter-spacing: 0.1em;
	}
#endRow h4
	{
	padding-top:0px;
	padding-bottom:4px;
	font-size: 28px;
	}
.servicesIco {
	position:absolute;
	top:312px;
	left:0; 
	width:960px;
	text-align:center;
	height:90px;
	}
.servicesIco li{
	float:left;	
	}
.servicesIco li a:link, 
.servicesIco li a:visited
	{
		text-align:center;
		color:#666;
		text-decoration:none;
	}
.servicesIco li a:hover, 
.servicesIco li a.yourHere
	{
		color:#000;
		text-decoration:none;
	}
	
.servicesIco li a img{
	padding:0 15px;
	}
.relativeBase
	{
	position:relative;
	width:960px;
	/*margin:10px auto;*/
	height:435px;
	background-attachment:scroll;
	background-color:transparent;
	background-position:top right;
	background-repeat:no-repeat;
	}
.relativeBase h1{
	padding-top:10px;
	padding-bottom:1px;
	font-size:36px;
	padding-left: 20px;
	}
.relativeBase h1 strong
	{
	display:block;
	padding-left:175px;
	}
.relativeBase p.introText {
	color:#888;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	margin-right:256px;
	padding-left:20px;
	line-height:1.5;
	padding-top: 1px;
	}
#webDev .relativeBase p.introText
	{
	margin-right:275px;
	}
#servicesDir .relativeBase	p.introText
	{
	margin-right:290px;
	}
#servicesDir .relativeBase {
	background-image:url(/inc/img/ico/20090730_services.png);
	background-position: 680px 89px;
	}	
#webDev .relativeBase {
	background-image: url(/inc/img/ico/20090730_webdev_lrg.png);
	background-position: 685px 35px;
	}
#googleApps .relativeBase {
	background-image: url(/inc/img/ico/20090730_google_apps_lrg.png);
	background-position:693px 10px;
	}	
#seo .relativeBase {
	background-image: url(/inc/img/ico/20090730_seo_lrg.png);
	background-position:740px 20px;
	}
#eCommerce .relativeBase {
	background-image:url(/inc/img/ico/20090730_ecommerce_lrg.png);
	background-position:745px 25px;
	}	
#scriptingProgramming .relativeBase {
	background-image: url(/inc/img/bg/engineering.png);
	background-position:633px 54px;
	}	
#hosting .relativeBase {
	background-image:url(/inc/img/ico/20090730_hosting_lrg.png);
	background-position:790px 20px;
	}	
#about .relativeBase {
	background-image:url(/inc/img/ico/20090730_about_lrg.png);
	background-position:700px 30px;
	}
	

/************************************************************
	s l i d e   -   p
************************************************************/		
.subHeading,
.subHeading2,
.subHeading3
	{
	position:absolute;
	top:190px;
	left:20px;
	height:130px;
	width:305px;
	}
.subHeading p a:link,
.subHeading p a:visited,
.subHeading2 p a:link,
.subHeading2 p a:visited,
.subHeading3 p a:link,
.subHeading3 p a:visited
	{
	color:#fff !important;
	text-decoration:none;
	}
.subHeading p a:hover,
.subHeading2 p a:hover,
.subHeading3 p a:hover
	{
	color:#888;
	text-decoration:underline;
	}
.subHeading2
	{
	left:355px !important;
	}
.subHeading p,
.subHeading2 p,
.subHeading3 p
	{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	line-height:1.4;
	font-weight:normal;
	color:#888;
	}

/************************************************************
	s l i d e   -   p
************************************************************/	



/************************************************************
	s l i d e   -   h3
************************************************************/	
.subHeading h3 span,
.subHeading2 h3 span,
.subHeading3 h3 span
	{
	letter-spacing:-2px;
	}
.subHeading h3,
.subHeading2 h3,
.subHeading3 h3
	{
	/*letter-spacing:0.1em;*/
	font-size:18px;
	color: #FFF;
	padding-bottom: 2px;
	}
.relativeBase h4
	{
	position:absolute;
	width:960px;
	top:408px;
	text-align:center;
	}
#eCommerce .theSlideWrapper .relativeBase h4
{text-align:left !important;}
#servicesDir .theSlideWrapper .relativeBase .subHeading,
#servicesDir .theSlideWrapper .relativeBase .subHeading2,
#servicesDir .theSlideWrapper .relativeBase .subHeading3,		
#webDev .theSlideWrapper .relativeBase .subHeading,
#webDev .theSlideWrapper .relativeBase .subHeading2,
#webDev .theSlideWrapper .relativeBase .subHeading3,	
#googleApps .theSlideWrapper .relativeBase .subHeading,
#googleApps .theSlideWrapper .relativeBase .subHeading2,
#googleApps .theSlideWrapper .relativeBase .subHeading3
	{
	width:250px;
	}
#hosting .theSlideWrapper .relativeBase .subHeading
	{
	width:290px;
	}
#hosting .theSlideWrapper .relativeBase .subHeading2
	{
	left:325px !important;
	width:250px !important;
	}
#hosting .theSlideWrapper .relativeBase .subHeading3
	{
	left:660px !important;
	}	
#seo .theSlideWrapper .relativeBase .subHeading,
#seo .theSlideWrapper .relativeBase .subHeading2
	{
	width:305px;
	top:140px;
	height: 160px;
	}
#seo .theSlideWrapper .relativeBase h2
	{
	position:absolute;
	width:243px;
	height:61px;
	top:223px;
	left:695px;
	font-style: italic;
	font-size: 20px;
	color:#E8E8E8;
	text-align: center;
	}	
#servicesDir .theSlideWrapper .relativeBase .subHeading,
#servicesDir .theSlideWrapper .relativeBase .subHeading2,
#servicesDir .theSlideWrapper .relativeBase .subHeading3,
#webDev .theSlideWrapper .relativeBase .subHeading,
#webDev .theSlideWrapper .relativeBase .subHeading2,
#webDev .theSlideWrapper .relativeBase .subHeading3
	{
	width:310px !important;
	}
	

#servicesDir .theSlideWrapper .relativeBase .subHeading2,
#webDev .theSlideWrapper .relativeBase .subHeading2,
#googleApps .theSlideWrapper .relativeBase .subHeading2,
	{
	left:285px !important;
	}
#servicesDir .theSlideWrapper .relativeBase .subHeading2,
#webDev .theSlideWrapper .relativeBase .subHeading2
	{
	left:350px !important;
	}
#servicesDir .theSlideWrapper .relativeBase .subHeading3,	
#webDev .theSlideWrapper .relativeBase .subHeading3,	
#googleApps .theSlideWrapper .relativeBase .subHeading3,
#hosting .theSlideWrapper .relativeBase .subHeading3
	{
	left:590px !important;
	width: 194px;
	}
#eCommerce .theSlideWrapper .relativeBase .subHeading,
#eCommerce .theSlideWrapper .relativeBase .subHeading2 {
	width: 300px !important;
	height:110px !important;
	top: 155px;
	}
#eCommerce .theSlideWrapper .relativeBase .subHeading2
	{
	left:355px !important;
	width: 330px !important;
	}	
#eCommerce .theSlideWrapper .relativeBase .subHeading p,
#eCommerce .theSlideWrapper .relativeBase .subHeading2 p
	{
	font-size: 13px !important;
	line-height:1.3;
	}
#eCommerce .relativeBase p.introText
	{
	margin-right:260px;
	}
	
#eCommerce .theSlideWrapper .relativeBase h2
	{
	position:absolute;
	width:200px;
	top:257px;
	left:740px;
	font-style: italic;
	font-size: 20px;
	color:#E8E8E8;
	text-align:center;
	}	
#scriptingProgramming .theSlideWrapper .relativeBase .subHeading,
#scriptingProgramming .theSlideWrapper .relativeBase .subHeading2,
#scriptingProgramming .theSlideWrapper .relativeBase .subHeading3
	{
	width:390px !important;
	height: 115px;
	top: 166px;
	}
#scriptingProgramming .theSlideWrapper .relativeBase .subHeading2
	{
	left: 330px !important;
	}
#scriptingProgramming .theSlideWrapper .relativeBase .subHeading3
	{
	left:640px !important;
	}
#scriptingProgramming .theSlideWrapper .relativeBase h2	
	{
	font-style: italic;
	font-size: 20px;
	color:#E8E8E8;
	padding-left:20px;
	}
.subHeading p img,.subHeading2 p img,.subHeading3 p img {padding: 4px;}
#servicesDir .theSlideWrapper .relativeBase h2
	{
	position:absolute;
	top:36px;
	right:35px;
	width:250px;
	padding-bottom:0;
	font-style: italic;
	font-size: 20px;
	color:#E8E8E8;
	text-align: center;
	}
#webDev .theSlideWrapper .relativeBase h2,
#hosting .theSlideWrapper .relativeBase h2{
	padding-left:20px;
	font-style: italic;
	font-size: 20px;
	color:#E8E8E8;	
	}
#googleApps .theSlideWrapper .relativeBase .subHeading,
#googleApps .theSlideWrapper .relativeBase .subHeading2,
#googleApps .theSlideWrapper .relativeBase .subHeading3{
	width:310px !important;
	top:185px !important;
	}
#googleApps .theSlideWrapper .relativeBase .subHeading2
	{
	left:350px !important;
	width: 315px !important;
	}
#googleApps .theSlideWrapper .relativeBase .subHeading3
	{
	left:715px !important;
	width:235px !important;
	top: 189px;
	height:138px !important;
	}
#googleApps .theSlideWrapper .relativeBase .subHeading3	p
	{
	color:#FFF !important;
	text-align:right !important;
	font: 10px/1 Monaco, arial, helvetica, monospace;
	}
#googleApps .theSlideWrapper .relativeBase h2 {
	position:absolute;
	width:450px;
	height:22px;
	top:22px;
	left:260px;
	font-style: italic;
	font-size: 20px;
	color:#E8E8E8;
}

#googleApps .theSlideWrapper .relativeBase .introText {
	margin-right: 290px;
}
#googleApps .theSlideWrapper .relativeBase .subHeading3 p a {
	color: #CCC !important;
	font-weight:normal;
	font-size:.95em;
}
#scriptingProgramming .theSlideWrapper .relativeBase h2 {
	top: 243px;
	position:absolute;
	width:350px;
	left: 597px;
	text-align: center;
	padding-left: 0px;
}
#scriptingProgramming .theSlideWrapper .relativeBase .introText {
	margin-right: 333px;
}

/************************************************************
	c o n t a c t - f o r m - s t y l i n g
************************************************************/	

#contactInfo {
	position:absolute;
	top:84px;
	left:708px;
	width:235px;
	text-align:center;
	}
#contactInfo h3 {
	font-size:22px;
	padding:4px 0;
	}
#contactInfo address{
	font-style:normal;
	}
#contactFormWrap  p, label, legend {
	font: 1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
	}
#contactFormWrap  hr { color: inherit; height: 0; margin: 6px 0 6px 0; padding: 0; border: 1px solid #d9d9d9; border-style: none none solid; }
#contactFormWrap  {
	display: block;
	width: 680px;
	margin: 0px;
	padding: 2px;
	margin-left:20px;	/*-webkit-border-radius:5px;*/
}
	/* Form style */
#contactFormWrap  label {
	display: inline-block;
	/*float: left;*/
	/*height: 30px;
	line-height: 30px;*/
	/*width: 105px;*/
	font-size: 1em;
	letter-spacing:1px;
	/*-webkit-border-radius:5px;*/
}
#contactFormWrap input, 
textarea,
select 
	{
	width: 210px;
	margin: 0;
	padding: 4px;
	color: #444;
	background: #f5f5f5;
	border: 1px solid #ccc; 
	margin: 1px 0px 5px 0;
	font:1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
	webkit-border-radius:5px; 
	}   
#contactFormWrap  input:focus, 
textarea:focus, 
select:focus { border: 1px solid #999; background-color: #fff; color:#444; }
#contactFormWrap  input.submit { width: 85px; cursor: pointer; border: 1px solid #222; background:#444; color:#fff; }
#contactFormWrap  input.submit:hover { background:#ff0000; }
#contactFormWrap  input[type="submit"][disabled] { background:#888; }
#contactFormWrap  fieldset {
	padding:0px;
	border:0;
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
}
#contactFormWrap  span.required{ font-size: 13px; color: #ff0000; font-weight:bold; } /* Select the colour of the * if the field is required. */
#message { margin: 4px 0 0; padding: 0; }
.error_message { display: block; height: 22px; line-height: 22px; background: #FBE3E4 url('/inc/img/ico/error.png') no-repeat left center; padding: 3px 10px 3px 30px; color:#8a1f11;border: 1px solid #FBC2C4; -webkit-border-radius:5px; }
.loader { padding: 0 10px; }
#contactFormWrap  #success_page h1 { background: url('/inc/img/ico/success.png') left no-repeat; padding-left:52px; line-height:40px; }

/************************************************************
	c o n t a c t - f o r m - s t y l i n g
************************************************************/	

#googleApps .theSlideWrapper .relativeBase .introText {
	margin-right: 277px;
}
#googleApps .theSlideWrapper .relativeBase .subHeading3 p a {
	color: #CCC !important;
	font-weight:normal;
	font-size:.95em;
}
#scriptingProgramming .theSlideWrapper .relativeBase h2 {
	top: 243px;
	position:absolute;
	width:350px;
	left: 597px;
	text-align: center;
	padding-left: 0px;
}
#scriptingProgramming .theSlideWrapper .relativeBase .introText {
	margin-right: 380px;
}
#about .relativeBase .subHeading,
#about .relativeBase .subHeading2
{
	top: 138px !important;
	height:250px !important;
}
a.goYellow, a.goYellow:visited
{
	color:#fff;
	text-decoration:underline;
}
a.goYellow:hover
{
	color:#ff0;
	text-decoration:none;
}