@charset "UTF-8";
/* CSS Document */

/*===== FONTS =====*/

@font-face {
  font-family: "gilLight";
  src: url(../fonts/gilSansLight.otf) format("truetype");
}
@font-face {
  font-family: "garamondBold";
  src: url(../fonts/garamondBold.otf) format("truetype");
}


/*===== CSS =====*/

body{
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	display: block;
	background: #EAEAEA url(../img/bg-main.png) repeat-x;
}

#wrap{
	width: 1000px;
	margin: 0 auto 0;
	position: relative;
	padding: 0;
}
#bgTopBlock {
	position: relative;
	height: 502px;
	top: 0px;
	background: url(../img/bg-top-block.jpg) no-repeat center;
	width: 100%;
}
#topBlock {
	background: url(../img/img-top.jpg) no-repeat center;
	height: 502px;
	width: 1000px;
	position: relative;
	float: left;
}

#topBlock #btnFound {
	background: url(../img/btn-get-found.jpg) no-repeat center 0px;
	height: 60px;
	width: 210px;
	position: relative;
	top: 420px;
	left: 517px;
}
#topBlock #btnFound a {
	background: url(../img/btn-get-found.jpg) no-repeat center 0px;
	height: 60px;
	width: 210px;
	position: relative;
	float: left;
}
#topBlock #btnFound a:hover {
	background: url(../img/btn-get-found.jpg) no-repeat center -70px;
	height: 60px;
	width: 210px;
	position: relative;
	float: left;
}
#topBlockInternal #logo {
	background-image: url(../img/img-logo.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	position: absolute;
	height: 47px;
	width: 110px;
	left: 32px;
	top: 23px;
}
#topBlock #nav {
	position: absolute;
	height: 33px;
	width: auto;
	top: 10px;
	right: 0px;
}

#bgTopBlockInternal {
	position: relative;
	height: 184px;
	top: 0px;
	background: url(../img/bg-top-block-internal.jpg) no-repeat center;
	width: 100%;
}
#topBlockInternal {
	background: url(../img/img-top-internal.jpg) no-repeat center;
	height: 184px;
	width: 1000px;
	position: relative;
	float: left;
}
#topBlockInternal #nav {
	position: absolute;
	height: 33px;
	width: auto;
	top: 10px;
	right: 0px;
}
#bgMidInternal {
	position: relative;
	height: auto;
	top: 0px;
	background: url(../img/bg-content.png) repeat-y center;
	width: 100%;
}
#midInternal {
	height: auto;
	width: 1000px;
	position: relative;
	background: #fff;
}


ul.nav {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 18px;
	color: #fff;
	list-style: none;
	position: relative;
	height: 33px;
	width: auto;
	line-height: 33px;
}
ul.nav li {
	font-family: gilLight, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #fff;
	position: relative;
	height: 33px;
	width: 96px;
	float: left;
	text-align: center;
	padding: 0 5px 0;
	margin: 0;
	line-height: 33px;
}
ul.nav li a {
	font-family: gilLight, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #1b96e2;
	position: relative;
	height: 30px;
	width: 96px;
	float: left;
	text-decoration: none;
	padding: 0;
	margin: 0;
	text-shadow: #00135F 0 1.5px 0;
	line-height: 33px;
}
ul.nav li a:hover {
	font-family: gilLight, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #fff;
	position: relative;
	height: 33px;
	width: 96px;
	float: left;
	background: url(../img/bg-nav-over.png) no-repeat center 0px;
	padding: 0;
	margin: 0;
	line-height: 33px;
}
ul.nav li.current a{
	font-family: gilLight, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #fff;
	position: relative;
	height: 33px;
	width: 96px;
	float: left;
	background: url(../img/bg-nav-over.png) no-repeat center 0px;
	padding: 0;
	margin: 0;
	line-height: 33px;
}
#bgMidTop {
	position: relative;
	height: 69px;
	top: 0px;
	background: url(../img/bg-main-top.jpg) no-repeat center;
	width: 100%;
}

#midTop {
	background: url(../img/bg-nav.jpg) no-repeat center;
	height: 69px;
	width: 1000px;
	position: relative;
}
#midTop #navOne {
	position: relative;
	height: 47px;
	width: 165px;
	left: 205px;
	float: left;
}
#midTop #navOne a {
	position: absolute;
	height: 47px;
	width: 165px;
	background: url(../img/btn-what-we-do.png) no-repeat center 0px;
	float: left;
}
#midTop #navOne a:hover {
	position: absolute;
	height: 47px;
	width: 165px;
	background: url(../img/btn-what-we-do.png) no-repeat center -57px;
	float: left;
}
#midTop #navTwo {
	position: relative;
	height: 47px;
	width: 178px;
	left: 205px;
	float: left;
}
#midTop #navTwo a {
	position: relative;
	height: 47px;
	width: 178px;
	float: left;
	background: url(../img/btn-why-we.png) no-repeat center 0px;
}
#midTop #navTwo a:hover {
	position: relative;
	height: 47px;
	width: 178px;
	float: left;
	background: url(../img/btn-why-we.png) no-repeat center -57px;
}
#midTop #navThree {
	position: relative;
	height: 47px;
	width: 250px;
	left: 205px;
	float: left;
}
#midTop #navThree a {
	position: relative;
	height: 47px;
	width: 250px;
	float: left;
	background: url(../img/btn-what-it-means.png) no-repeat center 0px;
}
#midTop #navThree a:hover {
	position: relative;
	height: 47px;
	width: 250px;
	float: left;
	background: url(../img/btn-what-it-means.png) no-repeat center -57px;
}
#bgMid {
	position: relative;
	height: auto;
	top: 0px;
	background: url(../img/bg-content.png) repeat-y center;
	width: 100%;
}
#mid {
	height: auto;
	width: 1000px;
	position: relative;
	background: #fff;
}
#contentLeft {
	height: auto;
	width: 540px;
	padding-left: 47px;
	position: relative;
	float: left;
}
#contentLeft #title {
	background: url(../img/img-title-sfm-team.png) no-repeat center 0px;
	position: relative;
	height: 18px;
	width: 179px;
}
#contentLeft #ourTeam {
	height: 200px;
	width: 540px;
	position: relative;
	margin: 0;
}
#ourTeam #imgTeam {
	float: left;
	height: 200px;
	width: 258px;
	position: relative;
	background: url(../img/img-our-team.jpg) no-repeat center 0px;
}
#ourTeam #ourTeamContent {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	position: relative;
	width: 252px;
	padding: 0 15px 0;
	float: left;
}
#ourTeamContent h2 {
	font-family: garamondBold, Georgia, "Times New Roman", Times, serif;
	font-size: 24px;
	width: 282px;
	margin: 0;
	padding: 0 0 20px 0;
	color: #1b96e2;
}
#ourTeamContent p {
	font-family: gilLight, "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align: justify;
	line-height: 125%;
	padding: 0;
	color: #333;
	font-size: 14px;
}

#contentLeft #ourProjects {
	background: url(../img/bg-projects.png) no-repeat center 0px;
	position: relative;
	height: 347px;
	width: 540px;
	padding: 0 0 115px 0;
}
#ourProjects #ourProjectsLeft {
	position: absolute;
	height: auto;
	width: 165px;
	left: 20px;
	top: 80px;
}
#ourProjects #ourProjectsCenter {
	position: absolute;
	height: auto;
	width: 165px;
	left: 186px;
	top: 80px;
}
#ourProjects #ourProjectsRight {
	position: absolute;
	height: auto;
	width: 165px;
	left: 352px;
	top: 80px;
}
#project {
	position: relative;
	height: auto;
	width: 165px;
}
.portfolio {
	padding: 0 31px 0 35px;
	position: relative;
	margin: 0 0 15px 0;
}
#project h3 {
	font-family: garamondBold, Georgia, "Times New Roman", Times, serif;
	font-size: 24px;
	line-height: 100%;
	color: #1b96e2;
	text-align: center;
}
#contentRight {
	height: auto;
	width: 413px;
	position: relative;
	float: left;
}
#contentRight #getStarted {
	background: url(../img/bg-get-started.jpg) no-repeat 0px 0px;
	position: relative;
	height: 482px;
	width: 413px;
}
#getStarted #content {
	font-family: gilLight, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 125%;
	position: absolute;
	height: auto;
	width: 250px;
	left: 90px;
	top: 240px;
	text-align: justify;
	color: #333;
}
#getStarted #btnStart {
	background: url(../img/btn-get-started.jpg) no-repeat center 0px;
	position: relative;
	height: 59px;
	width: 209px;
	left: 113px;
	top: 393px;
}
#getStarted #btnStart a {
	background: url(../img/btn-get-started.jpg) no-repeat center 0px;
	position: relative;
	height: 59px;
	width: 209px;
	float: left;
}
#getStarted #btnStart a:hover {
	background: url(../img/btn-get-started.jpg) no-repeat center -69px;
	position: relative;
	height: 59px;
	width: 209px;
	float: left;
}
#bgBtm {
	position: relative;
	height: 103px;
	background: url(../img/bg-btm.png) repeat-x;
	width: 100%;
}
#bgBtmMain {
	position: relative;
	height: 103px;
	background: url(../img/bg-btm-main.png) no-repeat center;
	width: 100%;
}
#btm {
	background: url(../img/bg-ftr.png) no-repeat center 0px;
	height: 103px;
	width: 1000px;
	position: relative;
	text-shadow: #e1e1e1 0 1px 0;
}
#btm #logo {
	float: left;
	height: 75px;
	width: 70px;
	position: relative;
}
#btm #copy {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #222;
	float: left;
	height: 55px;
	width: 200px;
	position: relative;
	line-height: 37px;
	padding: 20px 0 0;
}
#btm #phone {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #222;
	float: right;
	height: 55px;
	width: 200px;
	position: relative;
	line-height: 37px;
	padding: 20px 0 0;
	text-align: right;
}

div#portfolio {
	width: 98px;
	height: 97px;
}

/* ===== Home Slider ===== */

.stepcarousel{
position: relative; /*leave this value alone*/
border: none;
overflow: scroll; /*leave this value alone*/
width: 1000px; /*Width of Carousel Viewer itself*/
height: 400px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0; /*margin around each panel*/
width: 1000px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

#galleryc{
width: 450px;
height: 170px;
border: 10px solid darkred;
}

#galleryc .panel{
height: 150px;
font: bold 28px Arial;
text-align: center;
background-color: green;
color: white;
}

p.samplebuttons{
width: 300px;
text-align: center;
}

p.samplebuttons a{
color: #2e6ab1;
padding: 1px 2px;
margin-right: 3px;
text-decoration: none;
}
#block2 {
	position: relative;
	height: auto;
	width: 261px;
	float: left;
	margin: 10px 10px 10px 30px;
}
#block2 h1 {
	font-family: gilLight, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #666;
	padding: 10px 0 10px;
}
#block2 h1 a {
	font-family: gilLight, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #666;
	padding: 10px 0 10px;
}
#block2 h1 a:hover {
	font-family: gilLight, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #1633CF;
	padding: 10px 0 10px;
	text-decoration: none;
}
#block2 h1.current a {
	font-family: gilLight, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #1633CF;
	padding: 10px 0 10px;
}
#block2 h1.current a:hover {
	font-family: gilLight, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #1633CF;
	padding: 10px 0 10px;
	text-decoration: none;
}
#poftolioDetails #iconsProject {
	position: relative;
	height: 48px;
	width: auto;
	margin: 10px 0 20px 0;
	padding: 0 20px 0;
}
#iconsProject #iconFlash {
	float: right;
	height: 48px;
	width: 48px;
	position: relative;
	margin: 0 5px 0;
	background: url(../img/icons/flash.png) 0px 0px;
}
#iconsProject #iconHTML {
	float: right;
	height: 48px;
	width: 48px;
	position: relative;
	margin: 0 5px 0;
	background: url(../img/icons/code.png) 0px 0px;
}
#iconsProject #iconDesign {
	float: right;
	height: 48px;
	width: 48px;
	position: relative;
	margin: 0 5px 0;
	background: url(../img/icons/design.png) 0px 0px;
}
#iconsProject #iconSEO {
	float: right;
	height: 48px;
	width: 48px;
	position: relative;
	margin: 0 5px 0;
	background: url(../img/icons/seo.png) 0px 0px;
}
#iconsProject #iconPPC {
	float: right;
	height: 48px;
	width: 48px;
	position: relative;
	margin: 0 5px 0;
	background: url(../img/icons/ppc.png) 0px 0px;
}
#iconsProject #iconLocal {
	float: right;
	height: 48px;
	width: 48px;
	position: relative;
	margin: 0 5px 0;
	background: url(../img/icons/local.png) 0px 0px;
}
#iconsProject #iconSocial {
	float: right;
	height: 48px;
	width: 48px;
	position: relative;
	margin: 0 5px 0;
	background: url(../img/icons/social.png) 0px 0px;
}
#block3 {
	position: relative;
	height: auto;
	width: 651px;
	float: left;
	margin: 10px 30px 10px 10px;
}
#portfolioList {
	background: url(../img/bg-portfolio-list.jpg) no-repeat center 0px;
	position: relative;
	height: 616px;
	width: 261px;
}
#porfolioTop {
	position: relative;
	height: auto;
	width: 606px;
	margin: 0 22px 0;
}
#porfolioBtm {
	position: relative;
	height: auto;
	width: 606px;
	margin: 20px 22px 0;
}
#poftolioDetails {
	background: url(../img/bg-portfolio-details.jpg) no-repeat center 0px;
	position: relative;
	height: auto;
	width: 651px;
}
#poftolioDetails #title {
	font-family: gilLight, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #1B22DF;
	position: relative;
	height: auto;
	width: 100%;
	text-align: center;
	padding: 12px 0 20px;
}
#poftolioDetails #content {
	height: auto;
	width: 550px;
	position: relative;
	color: #333;
	font-size: 14px;
	padding: 20px 50px  0;
	line-height: 140%;
}
#poftolioDetails #btnViewWebsite {
	background-image: url(../img/btn-view-site.png);
	background-position: 0px 0px;
	position: relative;
	height: 59px;
	width: 209px;
	margin: 15px auto 20px;
}
#btnViewWebsite a{
	background-image: url(../img/btn-view-site.png);
	background-position: 0px 0px;
	position: relative;
	height: 59px;
	width: 209px;
	float: left;
}
#btnViewWebsite a:hover {
	background-image: url(../img/btn-view-site.png);
	background-position: 0px -59px;
	position: relative;
	height: 59px;
	width: 209px;
	float: left;
}
#portfolioList #linkTop {
	width: 221px;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	color: #1B22DF;
	height: 39px;
}
#portfolioList #linkTop a {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #333;
	height: 39px;
	line-height: 39px;
	padding: 0 20px 0;
	width: 221px;
	float: left;
}
#portfolioList #linkTop a:hover {
	color: #1B22DF;
	background: url(../img/portfolio/bg-nav-link-top.jpg) no-repeat center 0px;
	float: left;
	position: relative;
	text-decoration: none;
}
#portfolioList #linkMid {
	width: 221px;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	color: #1B22DF;
	height: 39px;
}
#portfolioList #linkMid a {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #333;
	height: 39px;
	line-height: 39px;
	padding: 0 20px 0;
	width: 221px;
	float: left;
}
#portfolioList #linkMid a:hover {
	color: #1B22DF;
	background: url(../img/portfolio/bg-nav-link.jpg) no-repeat center 0px;
	float: left;
	position: relative;
	text-decoration: none;
}
#portfolioList #linkTop a.current {
	color: #1B22DF;
	background: url(../img/portfolio/bg-nav-link-top.jpg) no-repeat center 0px;
	float: left;
	position: relative;
	text-decoration: none;
}
#portfolioList #linkMid a.current {
	color: #1B22DF;
	background: url(../img/portfolio/bg-nav-link.jpg) no-repeat center 0px;
	float: left;
	position: relative;
	text-decoration: none;
}
#ourWork {
	background: url(../img/img-our-work.jpg) no-repeat center 0px;
	height: 58px;
	width: 179px;
	position: relative;
}
#previewSite {
	position: relative;
	height: auto;
	width: 100%;
	margin: 0 auto;
}
#bgPreview {
	background-color: #08289C;
	position: relative;
	height: 75px;
	width: 100%;
}