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

* {margin:0;padding:0;} 

body {
	background: #1e150c url(images/bodyBkg.jpg) 0 0 repeat-x;
	color:#FFF;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:0.88em;
	letter-spacing:-.04em;
	line-height: 1.0em;
	height:auto;
}

body > #wrapper {height: auto; min-height: 100%;}

#wrapper {
	margin:auto;
}

#main {
	width:960px;
	margin: auto;
	padding-left: 20px;
	padding-bottom: 130px;
}

.clear {
	clear: both;
}

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

a {
	color: #8fb9f9;
	text-decoration:none;
}

a:hover {
	color: #d0e3ff;
	text-decoration:none;
}

b{
	font-size: 110%;
}

img{
	border:0;
}

h1 {
	color: #fff;
	font-size: 1.6em;
	font-weight: 600;
	letter-spacing: -.05em;
	text-align: left;
}


h2 {
	color: #fff;
	font-size: 1.6em;
	font-weight: 600;
	letter-spacing: -.05em;
	margin-left: 5px;
	text-align: left;
}

h2.blue {
	color: #8fb9f9;
	margin: -3px 0 10px 67px;
}

h3 {
	color: #c79315;
	font-size: 1.6em;
	font-weight: 600;
	letter-spacing: -.05em;
	text-align: left;
}

h4 {
	color: #fff;
	font-size: 1.3em;
	font-weight: 600;
	letter-spacing: -.05em;
	margin-left: 7px;
	text-align: left;
}

h4.blue {
	color: #8fb9f9;
	margin: -3px 0 10px 42px;
}

h5 {
	color: #c79315;
	font-size: .9em;
	font-weight: 600;
	letter-spacing:-.05em;
	text-align:left;
	margin-bottom: 3px;
}

h5.tweets {
	color: #c79315;
	font-size: .9em;
	font-weight: 600;
	letter-spacing:-.05em;
	text-align:left;
	margin: 0 0 -5px 10px;
}

h5.subtext {
	color: #d8caa8;
	font-size: .9em;
	font-weight: 600;
	letter-spacing:-.05em;
	text-align:left;
	margin: -1px 0 0 35px;
}

h6 {
	color: #fff;
	font-size: 1.1em;
	font-weight: 300;
	letter-spacing: -.04em;
	margin-left: 7px;
	text-align: justify;
	line-height:1.2em;
}
		  .line1 {
			  margin-bottom: -2px;
		  }
		  .line2 {
			  margin: 4px 0 0 45px;
		  }
		  .line3 {
			  margin: 0 0 0 240px;
		  }
		  .line4 {
			  margin: 2px 0 0 80px;
		  }
		  .line5 {
			  margin: 0 0 0 160px;
		  }


p.LgSanserif {
	color: #fff;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: 300;
	letter-spacing: -.04em;
	margin-left: 7px;
	line-height:1.2em;
}

p.SmSanserif {
	color: #fff;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: .9em;
	font-weight: 300;
	letter-spacing: -.04em;
	margin-left: 7px;
	line-height:1.2em;
}


/* Header */
#header {
	margin: 0;
	width:960px;
	height: 207px;
	position: relative;
	background: transparent url(images/moon.jpg) 134px 0 no-repeat;
}
  
  /* Tagline */
  #tagline {
	  position: absolute;
	  z-index: 1;
	  margin: 30px 0 0 625px;
	  color: #ebf1ff;
	  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	  font-size: 1.4em;
	  font-weight:600;
	  line-height: 1.0em;
  }
  
	  .blueText {
		  color: #8fb9f9;
	  }
	  
	  .tagline1 {
		  margin:0;
	  }
	  
	  .tagline2 {
		  margin-left: 60px;
	  }
	  
	  .tagline3 {
		  margin-left: 12px;
	  }
	  
	  .taglineBlue {
		  color: #11307c;
		  text-transform:uppercase;
	  }
	  
	  .taglineBlue:hover {
		  color: #11307c;
		  background: #fff;
		  text-transform:uppercase;
	  }
  
  /* Logo */
  #logo {
	  width: 590px;
	  height:215px;
	  background: transparent url(images/headerLogo.png) 0 0 no-repeat;
	  float: left;
	  position:absolute;
	  margin:60px 0 0 0;
	  text-indent:-9999px;
	  
  }
  
	  
  /* Nav Menu */
  #navMenu {
	  position: absolute;
	  margin: 163px 0 0 598px;
	  height: 46px;
	  width: 370px;
  }
  
  
	  ul#imgMenu {
		  list-style: none;
		  padding:0;
		  margin:0;
		  height: 46px;
	 	  width: 370px;
	  }
	  ul#imgMenu li {
		  float: left;
		  display: inline;
		  height: 46px;
		  margin:0;
	  }
	  
	  ul#menu a.selected {
		  background-position: bottom left;
	  }
	  
	  ul#imgMenu li.about-btn a {
		  width: 90px;
		  background:url(images/about-btn.png) 0 0 scroll no-repeat;
	  }
	  ul#imgMenu li.services-btn a {
		  width: 120px;
		  background:url(images/services-btn.png) 0 0 scroll no-repeat;
	  }
	  ul#imgMenu li.portfolio-btn a {
		  width: 132px;
		  background:url(images/portfolio-btn.png) 0 0 scroll no-repeat;
	  }
	  
	  ul#imgMenu li.hidden {
		  width: 0;
		  display: none;
	  }
	  
	  ul#imgMenu li a {
		  display: block;
		  height: 46px;
		  text-indent:-9999px;
	  }
	  ul#imgMenu li a.selected {
		  background-position: bottom left;
	  }
	  ul#imgMenu li.about-btn a:hover, ul#imgMenu li.services-btn a:hover, ul#imgMenu li.portfolio-btn a:hover {
  		  background-position: bottom left;
	  }


	  
#mainContent {
	height: 500px;
	position: relative;
	margin-top: 67px;
	margin-bottom:13px;
	clear: both;
	width: 960px;
	float: left;
}

/* Sidebar */
.sidebar {
	float: left;
	position: relative;
	width: 156px;
	height: auto;
	background: transparent url(images/background_dotted.gif) 0 0 repeat;
	padding: 5px 2px 0 2px;
	margin-bottom: 10px;
	text-align:center;
}

.sidebarFeature {
	padding-top: 0;
}



	.sidebarItem {
		height: auto;
		padding: 1px 0 5px 2px;
		line-height: 1.0em;
		letter-spacing:-0.7px;
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
		font-weight:600;
	}
	
	.sidebarItem a {
		color:#fff;
		text-decoration:none;
	}
	
	.sidebarItem a:hover {
		color:#8fb9f9;
		text-decoration:underline;
	}
	
	.sidebarImg {
	width: 148px;
	height: auto;
	/*background: url(images/imgBoxBkg.png) 0 0 no-repeat;*/
	background-color: #3A3A3A;
	border: #fff 1px solid;
	padding: 4px 0 4px 0;
	margin-top: 5px;
	}

/* Scroller/Main Content */


#slider {
  width: 780px;
  margin: 0 auto;
  position: relative;
  float: left;
}


.scroll {
  height: 495px;
  margin-right: 20px;
  overflow: auto;
  position: relative; /* fix for IE to respect overflow */
  clear: left;
  background: transparent url(images/background_dotted.gif) 0 0 repeat;
}


.scrollContainer div.panel{
	width: 770px;
	height: 490px;
	background: transparent;
	padding: 10px;

}

.scrollButtons {
  position: absolute;
  top: 470px;
  cursor: pointer;
}

.scrollButtons.left {
  left: 710px;
  z-index:2;
}

.scrollButtons.right {
  right: 30px;
}

/* panel formatting */
.ie7 .panelColLeft h2 {
	line-height:1.0em;
}
.ie7 .panelColRight h2 {
	line-height:1.0em;
}
.ie7 #startIntro h2 {
	line-height:1.0em;
}
.panelColLeft {
	width: 340px;
	height:auto;
	position:relative;
	float: left;
	margin-top:10px;
	padding-right: 10px;
	z-index: 3;
}

.colLeftBlock {
	width: 330px;
	left:10px;
	height:auto;
	text-align:left;
}

.panelColRight {
	width: 370px;
	height:auto;
	position:relative;
	float: left;
	margin-top:10px;
	padding-left: 10px;
	border-left: #C0C0C0 1px solid;
	z-index: 3;
}

.colRightTop {
	margin-top: -40px;
}

.panelColSingle {
	width: 760px;
	height:460px;
	position:absolute;
	float: left;
	margin: 0px 10px;
}

/* psd2html panel */
#psd2html .LgSanserif {
	text-align:justify;
}

#psd2html .colLeftBlock .SmSanserif {
	margin-top: 30px;
	text-align:center;
}

#psd2html .colRightBlock .SmSanserif {
	text-align:left;
}


#psd123 {
	width:400px;
	height: 440px;
	margin: -45px 0 0 -5px;
	float:left;
	position: relative;
	background: transparent url(images/psd2html123.png) 0 0 no-repeat;
}


#psd123 #step1Detail {
	width: 290px;
	height: auto;
	float: left;
	position: absolute;
	margin: 65px 0 0 55px;
}

#psd123 #step2Detail {
	width: 290px;
	height: auto;
	float: left;
	position: absolute;
	margin: 165px 0 0 55px;
}

#psd123 #step3Detail {
	width: 290px;
	height: auto;
	float: left;
	position: absolute;
	margin: 265px 0 0 55px;
}

#psd123 #turn3day {
	width: 160px;
	height: auto;
	float: left;
	position: absolute;
	margin: 400px 0 0 25px;
}

#psd123 #turn1day {
	width: 160px;
	height: auto;
	float: left;
	position: absolute;
	margin: 400px 0 0 225px;
}


	
/* starting panel */
	
		  #start {
			  width: 760px;
			  height:495px;
			  position:relative;
		  }
		  
		  #start h2.blue {
			  margin: 0px 0 0 170px;
		  }
		  
		  #startIntro {
			  width: 750px;
			  height:450px;
			  position:relative;
			  margin: 30px 20px 0px 75px;
		  }

/* about panel */

#about .LgSanserif {
	text-align:justify;
}

#about ul {
	margin-left: 20px;
}

#about ul li {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: 300;
	letter-spacing: -.04em;
	margin-left: 7px;
	line-height:1.2em;
	list-style-type: none;
	list-style-image: url(images/liBullet.gif);
}


/* start slideshow */
				.sliderFix {
					margin: -450px 0 0 200px;
				}
				
				#s3slider {
				   width: 545px; /* important to be same as image width */
				   height: 270px; /* important to be same as image height */
				   position: relative; /* important */
				   overflow: hidden; /* important */
				}
				
				#s3sliderContent {
				   width: 500px; /* important to be same as image width or wider */
				   
				   position: absolute; /* important */
				   top: 30px; /* important */
				   margin-left: 45px; /* important */
				}
				
				.s3sliderImage {
				   float: left; /* important */
				   position: relative; /* important */
				   display: none; /* important */
				}
				
				.s3sliderImage span {
				   position: absolute; /* important */
				   left: 0;
				   font: 13px/22px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
				   padding: 5px 13px 15px 13px;
				   width: 480px;
				   background-color: #000;
				   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
				   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
				   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
				   opacity: 0.7; /* here you can set the opacity of box with text */
				   color: #fff;
				   display: none; /* important */
				   bottom: 0;
				
				   /*
					   if you put
					   top: 0; -> the box with text will be shown at the top of the image
					   if you put
					   bottom: 0; -> the box with text will be shown at the bottom of the image
				   */
				}

/* contentFade */

.ie #servicesFader {
	float: left;
	display: block;

}

#fadeButtons {
	background: url(images/more_info.png) no-repeat 20px top;
	width: 205px;
	height: 410px;
	position:relative;
	float: left;
	margin-top:10px;
	padding: 50px 5px 0 10px;
}

.button {
	float: none;
	margin: 5px 5px 5px 0px;
	cursor: pointer;
}

#contentFade {
	clear: both;
	position: absolute;
	margin-left: 0px;
	width: 520px;
	height: auto;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	float: left;
	display:inline;
	margin-top: 20px;
}

#contentFade h4 {
	font-size:1.2em;
	font-weight:600;
	color:#8fb9f9;
	font-style:italic;
	margin-bottom: -10px;
	margin-left: 0px;
}

#contentFade img {
	margin-top:10px;		
}

#wordpress {
	display: block;
	padding: 10px;
	margin-left: 0px;
}
#wordpress-button {
	opacity: 1.0;
	border-bottom: 1px solid #0FF;
}

#socialmedia {
	display: none;
	padding: 10px;
	margin-left: 0px;
}
#socialmedia-button {
	opacity: 0.5;
	border-bottom: 1px solid #0FF;

}

#cms {
	display: none;
	padding: 10px;
	margin-left: 0px;
}
#cms-button {
	opacity: 0.5;
	border-bottom: 1px solid #0FF;

}

#business {
	display: none;
	padding: 10px;
	margin-left: 0px;
}
#business-button {
	opacity: 0.5;
	border-bottom: 1px solid #0FF;


}

/* portfolio */

.portfolio-list {
	margin-left: 30px;
}
.portfolio-list a {
	font-size: 110%;
}
.portfolio-list li {
	margin: 10px 0;
}
.portfolio-list em {
	font-size: 80%;
}


/* Footer */
#footer {
	background:url(images/footerBkg.jpg) 0 0 repeat-x;
	position: relative;
	margin: -130px auto; /* negative value of footer height */
	height: 130px;
	text-align:center;
	clear:both;
} 

.ie7 #footer {
	margin: -117px auto;
}

#footerContent {
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding-left: 18px;
}

#footerCopyright {
	font-family: "Segoe UI", Verdana, Geneva, sans-serif;
	letter-spacing: 0.08em;
	font-size:.70em;
	color:#d8caa8;
	position:relative;
	width: 450px;
	float:left;
	margin:110px 0 0 -224px;
}

#footerCopyright a {
	color: #c79315;
	text-decoration:none;
}

#footerCopyright a:hover {
	color: #c79315;
	text-decoration:underline;
}



.footerTitle {
	position: relative;
	margin: 25px 0 0 55px;
}


#contact {
	background: transparent url(images/contact32.png) left 20% no-repeat;
	position:relative;
	width: 490px;
	height: 80px;
	margin: 10px 0 0 0;
	float: left;
	display: inline;
}


#contactMethods {
	height: 80px;
	width: 240px;
	position: absolute;
	float: left;
	display:inline;
	color: #d8caa8;
	line-height:1.8em;
	text-align:left;
	margin: -55px 0 0 35px;
}


.webkit #contactMethods {
	margin-left: 295px;
}

.ie8 #contactMethods {
	margin-left: 265px;
}

#contactMethods a {
	color: #d8caa8;
	text-decoration:none;
}

#contactMethods a:hover {
	color: #d8caa8;
	text-decoration:underline;
}

.contactLinks {
	list-style-type:none;
	position: absolute;
	width: auto;
	float:left;
	line-height:2.0em;
	margin: -80px 0 0 42px;
}

.webkit .contactLinks {
	margin: -77px 0 0 45px;
}

.contactLine1 {
	margin-left:-13px;
}

.contactLine2 {
	margin-left:-8px;
}

.contactLine3 {
	margin-left: 0px;
}


#twitter {
	background: transparent url(images/twitter32.png) 13px 20% no-repeat;
	position: absolute;
	width: 420px;
	height: 80px;
	margin: 10px 0 0 -345px;
	float: left;
	display: inline;
}

.webkit #twitter {
	margin-left: 25px;
}

.ie7 #twitter {
	margin: 10px 0 0 -355px;
}

.ie7 #twitter a {
	color: #c79315;
}

.ie8 #twitter {
	margin-left: -245px;
}

#twitter a {
	color: inherit;
}

#recentTweets {
	color: #d8caa8;
	position: absolute;
	width: 290px;
	text-align: right;
	margin: -45px 0 0 -45px;
	float: left;
	display: inline;
}

.webkit #recentTweets {
	margin-left: 145px;
}

.ie8 #recentTweets {
	margin-left: 165px;
}

#recentTweets a {
	color: #c79315;
	text-decoration:underline;
}

#recentTweets ul.aboutme { color:#d8caa8; margin:8px 5px 0 12px;}
#recentTweets ul.tweet {
	color:#d8caa8;
	font-size:0.78em;
	line-height:1.2em;
	margin:2px 5px 0 12px;
}
#recentTweets ul.tweet_list { color:#d8caa8; margin:2px 5px 0 8px;}
#recentTweets span.tweet_join { color:#d8caa8;}
#recentTweets span.tweet_text { color:#d8caa8;}
#recentTweets a.tweet_avatar { margin:2px 6px 0 8px;}