@import url("global.css");
/* Top Navigation ON States */
.WebDesign .NavWeb{
background:url(../images/Nav.gif) -85px 43px;
}
.Seo .NavSeo{
background:url(../images/Nav.gif) -212px -43px;
}
.Directories .NavDirectories{
background:url(../images/Nav.gif) -276px -43px;
}
.Blog .NavSocial{
background:url(../images/Nav.gif) -410px -43px;
}
.Video .NavVideo{
background:url(../images/Nav.gif) -553px 43px;
}
.About .NavAbout{
background:url(../images/Nav.gif) -704px -43px;
}


/* -----------------------------
Hero Images 
 ----------------------------- */
.Hero{
height:312px; /* 312px */
position:relative;
width:980px;
}
	.WebDesign .Hero{
	background:url(../images/HeroWebDesign.jpg);
	}
	.Seo .Hero{
	background:url(../images/HeroSeo.jpg);
	}
	.Directories .Hero{
	background:url(../images/HeroDirectories.jpg);
	}
	.Blog .Hero{
	background:url(../images/HeroSocial.jpg);
	}
	.Video .Hero{
	background:url(../images/HeroVideo.jpg);
	}
	
	/* Videos */
	.VideoBox{
	height:273px;
	position:absolute;
	top:155px;
	width:320px;
	}
	.WebDesign .VideoBox,
	.Directories .VideoBox,
	.Video .VideoBox{ /* Aligns video on right */
	left:638px;
	}
	.Seo .VideoBox,
	.Blog .VideoBox{ /* Aligns videos on on left */
	left:20px;
	}
	.WebDesign #VideoBox { /* This applies to the JWPlayer */
		position:absolute;
		top:150px;
		right:20px;
	}
	.Seo #VideoBox { /* This applies to the JWPlayer */
		position:absolute;
		top:150px;
		left:20px;
	}
	.Blog #VideoBox { /* This applies to the JWPlayer */
		position:absolute;
		top:150px;
		left:20px;
	}
	.Video #VideoBox { /* This applies to the JWPlayer */
		position:absolute;
		top:150px;
		right:20px;
	}
	.Directories #VideoBox { /* This applies to the JWPlayer */
		position:absolute;
		top:150px;
		right:20px;
	}
/* Hero Navigation */
#HeroNav{
bottom:0;
height:39px;
list-style:none;
margin:0;
padding:0;
position:absolute;
width:500px;
}
.WebDesign #HeroNav{
bottom:0;
height:39px;
list-style:none;
margin:0;
padding:0;
position:absolute;
width:550px;
}
	
	.WebDesign #HeroNav,
	.Video #HeroNav,
	.Directories #HeroNav{/* Positions nav to left */
	left:41px;
	}
	.Seo #HeroNav,
	.Blog #HeroNav{/* Positions nav to right */
	left:461px;
	}    
	#HeroNav li{
	float:left;
	}
	#HeroNav a{
	display:block;
	height:39px;
	margin:0 4px 0 0;
	}
	#HeroNav a:hover{
	background-position:0 40px;
	}
	.HeroNavOverview{
	background:url(../images/HeroNavOverview.gif);
	width:100px;
	}
	.HeroNavHow{
	background:url(../images/HeroNavHow.gif);
	width:145px;
	}
	.WebDesign .HeroNavExamples{
	background:url(../images/HeroNavExamples.gif);
	width:100px;
	}
	.Blog .Master #HeroNavExamples{
	background:url(../images/HeroNavExamples_BlackBG.gif);
	position:absolute;
	top:409px;
	left:720px;
	}
	a#HeroNavExamples{
	background:url(../images/HeroNavExamples.gif);
	display:block;
	height:39px;
	position:absolute;
	top:409px;
	left:300px;
	width:138px;
	z-index:10;
	}
		a:hover#HeroNavExamples{
		background:url(../images/HeroNavExamples.gif);
		background-position:0 40px;
		}
		#Profolio a#HeroNavExamples{
		background:url(../images/HeroNavExamples.gif);
		background-position:0 40px;
		}	
	.HeroNavConsult{
	cursor:pointer;
	position:absolute;
	left:400px;
	}
		.WebDesign .HeroNavConsult,
		.Video .HeroNavConsult,
		.Directories .HeroNavConsult{ /* White Consult Button */
		background:url(../images/HeroNavConsult.gif);
		width:138px;
		}	
		

	.ui-tabs-hide { display: none; } /* Tab Navigation */
	.ui-tabs-nav .ui-tabs-selected a.HeroNavOverview {
	background:url(../images/HeroNavOverview.gif) 0 40px;
	}
	.ui-tabs-nav .ui-tabs-selected a.HeroNavHow {
	background:url(../images/HeroNavHow.gif) 0 40px;
	}
	.ui-tabs-nav .ui-tabs-selected a.HeroNavExamples {
	background:url(../images/HeroNavExamples.gif) 0 40px;
	}
	
	
/* -----------------------------
Content 
 ----------------------------- */
.Content{
background:#f3f3f3;
color:#333;
font-size:80%;
padding:50px 0 0;
}
	.Content h1{
	font-size:130%;
	margin:0 0 35px;
	}
	.Content h2{
	font-size:140%;
	margin:0 0 10px;
	}
	
#ExampleContainer.Content{
background:#f3f3f3;
color:#333;
display:none;
margin:0;
padding:0;
font-size:80%;
width:813px;
}
	#ExampleContainer.Content h1{
	font-size:130%;
	margin:0 0 10px 0;
	}
	
#Overview{
padding:0 0 202px 41px;
}
	/* Bottom Images of Overview */
	.WebDesign #Overview{
	background:url(../images/WebOverview.jpg) bottom #f3f3f3 no-repeat;
	}
	.Seo #Overview{
	background:url(../images/SeoOverview.jpg) bottom #f3f3f3 no-repeat;
	}
	.Directories #Overview{
	background:url(../images/DirectoriesOverview.jpg) bottom #f3f3f3 no-repeat;
	}
	.Blog #Overview{
	background:url(../images/BlogOverview.jpg) bottom #f3f3f3 no-repeat;
	}
	.Video #Overview{
	background:url(../images/VideoOverview.jpg) bottom #f3f3f3 no-repeat;
	}
	
	
	.OverviewBox{
	background:url(../images/WebOverviewDividers.gif) 5px 0 repeat-y;
	height:170px;
	}
		.OverviewBox div{
		float:left;
		list-style:none;
		padding:0 43px 0 0;
		width:270px;
		}
			#Overview h1{
			}
			#Overview li h2{
			font-size:120%;
			}
	.OverviewNav{
	background:url(../images/WebOverviewNav.gif) no-repeat;
	clear:both;
	height:60px;
	}
	.OverviewBtm{
	clear:both;
	height:202px;
	margin:0 0 0 -41px;
	width:980px;
	}
	
	
#How{
padding:0 40px 20px 41px;
position:relative;
}
	#How img.FloatRight{
	display:inline; /* fixes IE padding */
	margin:0 -40px 0 20px;
	}
	#How img.FloatLeft{
	display:inline; /* fixes IE padding */
	margin:0 20px 0 0;
	}
	#How .clear{
	border:1px solid #f3f3f3;
	padding:15px 0;
	}
	#How .TextLeft{
	width:600px;
	}
	.BtmLeft{
	bottom:0;
	position:absolute;
	right:0;
	}
	
#Examples{
background:#fff;
padding:35px 40px 20px 40px;
position:relative;
width:733px;/* 813px */	
}
#Examples h1{
padding:0 0 10px 0;
}
		
		/* Sliding Content */		
		.PrevNextArrows {
		position:absolute;
		top:10px;
		right:30px;
		z-index:10;
		}
			.jFlowPrev, .jFlowNext{
			cursor:pointer;
			}
			
		.SideContentBox {
		position:relative;
		width:733px;
		}
		.CompanysiteBox{		
		margin:5px 0 0 0;
		}
			.SiteLargeImg {
			display:block;
			float:left;
			padding:0 25px 0 0;			
			}
			.H_DrName {
			padding:20px 0 10px 10px;
			}
			.SiteThumbs {
			padding:0 0 0 10px;
			}
			.BtnLaunch {
			border:none;
			padding:30px 0 0 10px;
			}
			.BtnDiscover {
			border:none;
			padding:20px 0 0 0;
			}
		
		.HDR_Companysite1 {
		display:block;
		position:absolute;
		top:-60px;
		left:0;
		margin:0 0 20px 0;
		}
		.ContentText {
		padding:10px 0 0 0;	
		}
			.ContentText ul{
			float:left;
			margin:0;
			padding:0;
			}
				.ContentText li{
				font-size:10px;
				background:url(../images/ExamplesSites/ListCheck.gif) no-repeat;
				list-style-type:none;
				margin:0 0 8px 0;
				padding:0 0 0 20px; 				
				}
			.ListCheck {
			margin:0 13px 0 0;
			padding:0 12px 0 0;
			float:left;
			width:170px;
			}
			.ListCheck p {
			padding:0 0 20px 0;
			font-size:10px;
			}
			
			.ListCheck ul{
			margin:0;
			padding:0;
			}
			.ListCheck li{
			font-size:10px;
			background:url(../images/ExamplesSites/ListCheck.gif) no-repeat;
			list-style-type:none;
			margin:0 0 5px 0;
			padding:0 0 0 20px; 
			}
			
		.ThumbSlider {
		background:url(../images/BG_ThumbSlider.jpg) no-repeat;		
		display:block;
		padding:10px 0 0 0;		
		position:relative;
		width:813px;
		}
			#Slide_Prev {
			position:absolute;
			top:0;
			left:0;
			height:130px;
			width:90px;
			}
			#Slide_Next {
			position:absolute;
			top:0;
			right:0;
			height:130px;
			width:90px;
			}
		#myController li{
		color:#FFF;		
		margin-right:10px;
		cursor:pointer;
		}		
		#jFlowSlide{		
		}		
		#myController li.jFlowSelected {
		border:2px solid #838383;
		background:#838383;
		margin:-5px 0 0 5px;
		padding:5px;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		}		
		
		/* Sliding Thumbs */
		div.sc_menu {
		/* Set it so we could calculate the offsetLeft */
		position: relative;
		height: 120px;
		width: 610px;
		overflow: hidden;
		margin:0 70px 0 100px;	
		}
		ul.sc_menu {
		display: block;
		/* max width here, for users without javascript */	
		width: 2540px;	
		padding: 10px 0 0 0; 
		/* removing default styling */
		margin: 0;
		list-style: none;		
		}
		.sc_menu li {
		display: block;
		float: left;	
		margin:0 20px 0 20px;
		padding: 0 4px 0 4px;
		}
		.sc_menu a {
		display: block;
		text-decoration: none;
		}		
		.sc_menu img {
		border: 1px #ededed solid;			
		}
		.sc_menu a:hover img {
		filter:alpha(opacity=50);	
		opacity: 0.5;
		}	
				

/* About Page */
.About .Content{
background:url(../images/HeroAbout.jpg) no-repeat #0d0d0d;
color:#FFF;
padding:390px 300px 75px 60px;
}
.About .Consult{
background:url(../images/AboutContact.jpg) #FFF no-repeat;
height:290px; /* 390 */
padding:100px 30px 0 60px;
}
.About .Consult{
position:relative;
}
.AboutConsultLocation{
left:550px;
position:absolute;
top:95px;
}	
.About .Thank{
background:url(../images/ThankAbout.jpg) no-repeat;
border:3px solid #CCC;
height:352px; /* 452px */
padding:100px 41px 0 39px;
position:relative;
width:894px;
}


/* DashboardLaunch Page */
.DashboardLaunch .Content{
background:url(../images/DashboardLaunchBG.gif) repeat-x;

padding:140px 0 0;
position:relative;
text-align:center;
}
	.LaunchDashboardPrev{
	background:url(../images/DashboardLaunchBtn.gif);
	display:block;
	height:45px;
	left:140px;
	position:absolute;
	top:262px;
	width:351px;
	}
	a:hover.LaunchDashboardPrev{
	background-position:0 -46px;
	}
	.LaunchDashboardRe{
	background:url(../images/DashboardLaunchBtn.gif) 351px 0;
	display:block;
	height:45px;
	left:489px;
	position:absolute;
	top:262px;
	width:351px;
	}
	a:hover.LaunchDashboardRe{
	background-position:351px -46px;
	}

.SubpageNav{
background:url(../images/SubpageNav.jpg) no-repeat;
height:137px;
margin:1px 0 0;
padding:0 0 0 330px;
width:650px; /* 980px */
}
	.SubpageNav li{
	float:left;
	list-style:none;
	}
	.SubpageNav li a{
	display:block;
	height:136px;
	}
		.SubpageNavWeb{
		width:125px;
		}
		.SubpageNavSeo{
		width:100px;
		}
		.SubpageNavDirectories{
		width:135px;
		}
		.SubpageNavBlog{
		width:100px;
		}
		.SubpageNavVideo{
		width:130px;
		}
		/* Hover & On States */
		a:hover.SubpageNavWeb, .WebDesign .SubpageNavWeb{
		background:url(../images/SubpageNav.jpg) -330px -136px;
		}
		a:hover.SubpageNavSeo, .Seo .SubpageNavSeo{
		background:url(../images/SubpageNav.jpg) -455px -136px;
		}
		a:hover.SubpageNavDirectories, .Directories .SubpageNavDirectories{
		background:url(../images/SubpageNav.jpg) -555px -136px;
		}
		a:hover.SubpageNavBlog, .Blog .SubpageNavBlog{
		background:url(../images/SubpageNav.jpg) -690px -136px;
		}
		a:hover.SubpageNavVideo, .Video .SubpageNavVideo{
		background:url(../images/SubpageNav.jpg) -790px -136px;
		}

/* Template Subpage Styles */
.templateSubpage .Content{
padding:50px;
}
.templateSubpage h1{
font-size:18px;
margin:0 0 10px;
padding:0;
}
.templateSubpage h2{
font-size:16px;
margin:0 0 10px;
padding:0;
}
.templateSubpage h3{
font-size:16px;
margin:0 0 10px;
padding:0;
}
.templateSubpage .Copyright{
text-align:center;
}