/* This is the Style sheet for a Tech in a Sec */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
	margin:0;
	padding:0;
	border:0;
	font-weight:normal;
	text-align:left;
}table{border-collapse:collapse;border-spacing:0;}ol,ul{list-style:none;}q:before,q:after,blockquote:before,blockquote:after{content:"";}

.clear{
	clear:both;
	height:1px;
	margin-bottom:-1px;
}

body{
	background: #586273 url(../images/bg-tile.png) repeat top left;
	font-family: Helvetica, "Helvetica Neue", Arial,  sans-serif;
	color:#1a1f27;
	font-size:62.5%;
}


* {
	outline:0;
	outline-style:none;
	-moz-outline:0;
}

a{
	color:#1a1f27;
	text-decoration: none;
}

a:visited{
	color:#00F;
	text-decoration: none;
}

.column{
	width:800px;
	margin:0 auto;
}

.imgtext{
	display:block;
	background-repeat:no-repeat;
	background-position: top left;
	text-indent: -99999em;
}

.hovFade{
	opacity:0.85;
	opacity:0.90;	
}

/***************************************************************************
***************************** SITEWIDE STYLES ******************************
***************************************************************************/

/* header */

#header {
	width:100%;
	height:61px;
	display:block;
	background: url(../images/bg-header.png) repeat-x top center;
	overflow:hidden;
}

#header h1 a{
	width:152px;
	height:29px;
	background: url(../images/title-tech.png) no-repeat top left;
	display:block;
	text-indent:-99999em;
	margin-top:15px;
	float:left;
}

#header h1 a:hover{
	width:173px;

}

#topnav {
	float:right;
	display:block;
	margin-top:13px;
	}
	
#topnav li{
	float:left;
	margin-left:5px;
}

#topnav li a{
	height:33px;
	background-repeat:no-repeat;
	background-position:top left;
	display:block;
	text-indent:-99999px;
}

#topnav li a:active{
	background-position: bottom left;
}


#topnav li.home a{
	width:80px;
	background-image:url(../images/main-nav-home.png);	
}

#topnav li.about a{
	width:105px;
	background-image:url(../images/main-nav-about-us.png);
}

#topnav li.contact a{
	width:98px;
	background-image:url(../images/main-nav-contact.png);
}

#page-home #topnav li.home a{background-position: bottom left; opacity:1;}
#page-about-us #topnav li.about a{background-position: bottom left; opacity:1;}
#page-contact #topnav li.contact a{background-position: bottom left; opacity:1;}
#page-contact-post #topnav li.contact a{background-position: bottom left; opacity:1;}

#main{
	width:815px;
	width:900px;
	margin:0 auto;
	background: url(../images/glow-top.png) no-repeat center top;
	position:relative;
	overflow:hidden;
}

#main #gloss-overlay{
	position:absolute;
	top:0;
	left:50%;
	margin-left:-400px;
	background:url(../images/gloss-overlay.png) no-repeat center top;
	width:800px;
	height:128px;
}

#bottom-bar{
	width:790px;
	height:82px;
	margin:0 auto;
	margin-top:32px;
	background: url(../images/bg-bottom-bar.png) no-repeat top right;
	padding-left:1px;
}

#bottom-bar #left{
	float:left;
}

#bottom-bar #left h4{
	float:left;
	margin-left:22px;
	text-indent:-9999em;
	background:url(../images/text-interested-in-working-with-us.png) no-repeat top left;
	width:257px;
	height:18px;
	display:block;
	margin-top:33px;
}

#bottom-bar #left a.button-get-in-touch{
	background:url(../images/button-get-in-touch.png) no-repeat top;
	text-indent:-99999em;
	width:141px;
	height:46px;
	display:block;
	float:left;
	margin-top:17px;
	margin-left:14px;
}

#bottom-bar #left a.button-get-in-touch:active{
	background-position: left bottom;
}


#bottom-bar #right{
	float:right;
	width:270px;
	margin-right:10px;
	height:72px;
	margin-top:3px;
	background: url(../images/image-stamp.png) no-repeat 16px 14px;
	padding-left:70px;
}

#bottom-bar #right form{
	margin-top:12px;
	color:#1e2633;
	font-size:11px;
	width:240px;
}

#bottom-bar #right form p{
	display:block;
	color:#1e2633;
	font-size:11px;
	text-shadow: 0px 1px 0px #abbace;
	margin-bottom:4px;
	margin-left: 8px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
}

#bottom-bar #right form input#email-address{
	border:0;
	padding:0;
	margin:0;
	background:url(../images/text-input-newsletter.png);
	width:136px;
	height:24px;
	padding-top:5px;
	color:#2d2e30;
	font-size:14px;
	padding-left:15px;
	padding-right:10px;
	float:left;
	outline:0;
}

#bottom-bar #right form input#submit{
	border:0px;
	padding:0px;
	margin:0px;
	width:54px;
	height:29px;
	background:url(../images/button-newsletter-go.png) no-repeat top left;
	float:left;
	text-indent:-99999em;
	cursor:pointer;
}

#bottom-bar #right form input#submit:active{
	background:url(../images/button-newsletter-go.png) no-repeat bottom left;
}

#footer{
	overflow:visible;
	background:url(../images/glow-bottom.png) no-repeat center 40px;
	padding-bottom:70px;
}


/***************************************************************************
*****************************HOME/PROJECT PAGE******************************
***************************************************************************/

h2#tagline{
	width:580px;
	height:46px;
	background: url(../images/headline-we-make-interfaces.png);
	margin:0 auto;
	margin-top:45px;
	margin-bottom:25px;
	position:relative;
	z-index:90;
}

#projects{
	width:799px;
	height:620px;
	display:block;
	background:url(../images/bg-main.png) no-repeat top left;
	margin: 0 auto;
	position:relative;
	color:#1a1f27;
}

#projects-bottom{
	height:48px;
	background:url(../images/bg-main.png) no-repeat bottom left;	
	width:799px;
	position:absolute;
	left:0;
	bottom:0;
}
#project-type-nav{
	width:161px;
	margin-top:20px;
	float:left;
	font-size:14px;
	font-weight:bold;
	color:#dce7fa;
	margin-left:2px;
	border-bottom:1px solid #5d6776;
	border-top:1px solid #313742;
	position:relative;
}

#project-type-nav li{
	width:161px;
	height:36px;
	background:url(../images/project-nav-bg.png) no-repeat top left;
}

#project-type-nav li a{
	width:161px;
	height:36px;
	display:block;
	overflow:hidden;
	cursor:pointer;
}

#project-type-nav li a span{
	width:90;
	height:50;
	display:block;
	text-indent:-99999em;
	margin-left:20px;
	margin-top:10px;
	background-repeat:no-repeat;
	background-position:bottom left;
	background-position:top left;
	position:relative;
	z-index:50;
	opacity: 0.65;
}
	
#project-type-nav li.web a span{	background-image:url(../images/text-web.png);}	
#project-type-nav li.iphone a span{	background-image:url(../images/text-iphone.png);}	
#project-type-nav li.desktop a span{	background-image:url(../images/text-desktop.png);}	

#project-type-nav li.current{
	position:absolute;
	width:	182px;
	height:	41px;
	display:block;
	background:url(../images/project-nav-current-bg.png) no-repeat top left;
	top:-1px;
	left:-7px;
} 

.project-dots {
	position:absolute;
	left:192px;
	bottom:17px;
}

.project-dots a{
	width:12px;
	height:12px;
	display:block;
	background:url(../images/icon-dot.png) no-repeat top left;
	text-indent:-99999em;
	margin-right:5px;
	float:left;
}

.project-dots a.active{
	background:url(../images/icon-dot.png) no-repeat bottom left;
}


.project-dots a.active:hover{
	opacity:1;
}

.button-next-project{
	position:absolute;
	right:0;
	bottom:0;
	width:153px;
	height:48px;
	background: url(../images/button-next-client.png) no-repeat top right;
	text-indent:-99999em;
	cursor: pointer;
}


.button-next-project:active{
	background: url(../images/button-next-client.png) no-repeat bottom right;	
}	


/***************************************************************************
**************************** PROJECT LISTING *******************************
***************************************************************************/

.project {
	width:600px;
	height:540px;
	position:relative;
	margin-right:20px;
	
	}

.project-image-wrap{
	padding:10px;
	padding-top:9px;
	padding-bottom:9px;
	position:relative;
	margin-bottom:15px;
}

.project-image-wrap img{
	width:570px;	
	height:288px;
	display:block;
}

.project-image-wrap a{
	display:block
}

.project-image-wrap .overlay{
	position:absolute;
	top:0;
	left:0;
	width:590px;
	height:308px;
	background: url(../images/overlay-image.png) no-repeat top left;
}

.project h3.project-title{
	font-size:25px;
	font-weight:bold;
	left:32px;
	bottom:18px;
	color:#1b1d20;
	text-shadow: 0px 1px 0px #e0e8f5;
	padding-left:3px;
	text-align: center;
}

.project-image-wrap a{
	position:absolute;
	left:10px;
	top:9px;
	width:570px;	
	height:288px;
	background: url(../images/button-zoom.png) no-repeat bottom right;
	text-indent:-9999em;
	opacity:0;
	border:0;
}

.project-text{
	color:#000;
	font-size:12px;
	text-shadow: 0 1px 0 #c6cbd5;
	line-height:19px;
	margin-top:5px;
	margin-left:3px;
	padding-right:12px;
}

.project-text-left{
	color:#000;
	font-size:12px;
	text-shadow: 0 1px 0 #c6cbd5;
	line-height:19px;
	margin-top:5px;
	margin-left:3px;
	padding-right:12px;
	width: 58%;
	float: left;
}

.project-text-right{
	color:#000;
	text-shadow: 0 1px 0 #c6cbd5;
	line-height:19px;
	margin-top:5px;
	margin-left:3px;
	padding-right:12px;
	width: 36%;
	float: right;
	font-size: 14px;
}

.project-text p{
	margin-bottom:0.5em;
}

.view-the-site-link {
	text-indent:-99999em;
	display:block;
	height:25px;
	width:105px;
	background:url(../images/button-view-the-site.png) no-repeat top left;
	margin-top:10px
	

}
.view-the-site-link:active{
	background-position: bottom left;
}

/***************************************************************************
**************************** SCROLLER STUFF ********************************
***************************************************************************/

#scroller-window,
#scroller-web-window,
#scroller-iphone-window,
#scroller-desk-window{
	height:540px;
}

#scroller-window {
   position:relative; 
   overflow:hidden;          
   width: 610px;     
   float:right;
   margin-top:18px;
   margin-right:12px;	
   margin-bottom:9px;
   fbackground-color:#f00;
}

#scroller-fade-left,
#scroller-fade-right{
	position:absolute;
	width:10px;
	height:100%;
	top:0px;	
}

#scroller-fade-left{
	left:0px;
	background: url(../images/scroller-fade.png) repeat-y top right;
}


#scroller-fade-right{
	right:0px;
	background: url(../images/scroller-fade.png) repeat-y top left;
}

#scroller-web-window{ 
overflow:hidden;          
   width: 600px;     
}

#scroller-web-wrap{
	width:10000em;
	position:absolute;
}


#scroller-iphone-window{
   overflow:hidden;          
   width: 600px;     
 
}

#scroller-iphone-wrap{
	width:10000em;
	position:absolute;
}

#scroller-desk-window{
   overflow:hidden;          
   width: 600px;     
 
}

#scroller-desk-wrap{
	width:10000em;
	position:absolute;
}

#scroller-window .project{
	float:left;
}


#scroller-vertical{
	position:absolute;
	top:0;
	left:10px;
	height: 1380px;
	width:600px;
}

/***************************************************************************
***************************** ABOUT US PAGE*********************************
***************************************************************************/

#about-us{
	width:799px;
	margin:0 auto;
	background: url(../images/bg-about-us.png) no-repeat top left;
	margin-top:36px;
	padding-bottom:15px;
	position:relative;
}

#about-us-bottom{
	width:799px;
	height:6px;
	margin:0 auto;
	background: url(../images/bg-about-us.png) no-repeat bottom left;
	left:0px;
	bottom:0px;
	position:absolute;
}

#about-us h2#heading-about-us{
	width:134px;
	height:31px;
	background: url(../images/heading-about-us.png) no-repeat bottom right;
	margin-left:19px;
	padding-top:9px;
	margin-bottom:7px;
	text-indent:-9999em;
}


#we-list {
	width:750px;
	margin:0 auto;
	padding-top:10px;
	padding-bottom:10px
}

#we-list li{
	width:750px;
	border-bottom:1px solid #8a8e94;
	border-top:1px solid #dee2e9;
	text-align:right;
	overflow:hidden;
	padding-top:24px;
	padding-bottom:17px;
}

#we-list li h3{
	text-indent:-99999em;
	height:35px;
	width:750px;
	background-position:top right;
	background-repeat:no-repeat;
	float:right;
}

#we-list li#we-1{border-top:none}
#we-list li#we-5{border-bottom:none}

#we-list li#we-1 h3{	background-image:url(../images/we-1.png);}
#we-list li#we-2 h3{	background-image:url(../images/we-2.png);}
#we-list li#we-3 h3{	background-image:url(../images/we-3.png);}
#we-list li#we-4 h3{	background-image:url(../images/we-4.png);}
#we-list li#we-5 h3{	background-image:url(../images/we-5.png);}


#about-us h3#heading-kind-words{
	width:815px;
	height:43px;
	background:url(../images/heading-kind-words.png) no-repeat top left;
	margin-left:-8px;
	margin-bottom:20px;
	text-indent:-99999em;
}

#quotes{
	width:750px;
	margin:0 auto;
	overflow:hidden;
	margin-bottom:10px;
	padding-top:5px;
}

#quotes .quote{
	float:left;
	width:385px;
	margin-bottom:15px;
}

#quotes .quote.right{
	float:right;
}

#quotes .quote .quote-portrait{
	float:left;
	overflow:hidden;
	padding-left:7px;
	padding-right:7px;
	padding-bottom:5px;
	background:url(../images/quote-puddle.png) no-repeat center 54px;
	width:61px;
}

#quotes .quote.right .quote-portrait{
	float:right
}

#quotes .quote .quote-portrait img{
	width:61px;
}


#quotes .quote .quote-bubble{
	width:350px;
	background: url(../images/bg-quote-bubble.png) no-repeat top left;
	display:block;
	position:relative;
	overflow:hidden;
	float:left;
	padding-bottom:38px;
}

#quotes .quote.right .quote-bubble{
	background: url(../images/bg-quote-bubble.png) no-repeat top right;
	float:right;
}

#quotes .quote .quote-bubble p{
	font-size:13px;
	font-family:Verdana, Geneva, sans-serif;
	color:#080808;
	padding:8px;
	padding-left:23px;
	padding-right:12px;
	line-height:19px;
	text-shadow: #c9d1de 0 1px 0;
}

#quotes .quote.right .quote-bubble p{
	padding-left:12px;
	padding-right:23px;
}

#quotes .quote .quote-bubble-bottom{
	width:346px;
	height:38px;
	position:absolute;
	left:0;
	bottom:0;
	background: url(../images/bg-quote-bubble.png) no-repeat bottom left;
}

#quotes .quote.right .quote-bubble-bottom{
	background: url(../images/bg-quote-bubble.png) no-repeat bottom right;	
}

#quotes .quote .quote-bubble span{
	width:323px;
	height:23px;
	position:absolute;
	right:3px;
	bottom:5px;
	font-size:14px;
	color:#fff;
	text-shadow: #2a3039 0 1px 0;
	font-weight:bold;
}

#quotes .quote.right .quote-bubble span{
	text-align:right;
	right:28px;

}

#quotes .quote .quote-bubble span i{
	color:#fff;
	font-weight:normal;
	font-style:normal
}

#quotes .quote .quote-bubble span i a{
	color:#fff;
	font-weight:normal;
	font-style:normal	
}




#about-us h3#heading-our-team{
	width:815px;
	height:43px;
	background:url(../images/heading-our-team.png) no-repeat top left;
	margin-left:-8px;
	margin-bottom:20px;
	text-indent:-99999em;
}