p,blockquote,pre,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,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;}table{}ol,ul{list-style:none;}q:before,q:after,blockquote:before,blockquote:after{content:"";}

body{
	font-family: Helvetica, "Helvetica Neue", Arial,  sans-serif;
	color:#1a1f27;
	font-size:62.5%;
	margin-top:0; margin-right:0; margin-left:0; margin-bottom:0;
	background-color:#333;
}

.mainbody{
vertical-align:middle;
}

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

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

#projects{
	width:782px;
	height:352px;
	display:block;	
	margin: 0 auto;
	position:relative;
	color:#1a1f27;
}

#projects-bottom{
	height:48px;
	background:url(bg-main.png) no-repeat bottom left;	
	width:782px;
	position:absolute;
	left:0;
	bottom:0;
}

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

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

.project-dots a.active{
	background:url(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(button-next-client.png) no-repeat top right;
	text-indent:-99999em;
	cursor: pointer;
}


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


.project {
	width:782px;
	height:352px;
	position:relative;
	margin-right:0px;
	
	}

.project-image-wrap{
	padding-right:0px;
	padding-top:0px;
	padding-bottom:0px;
	position:relative;
	margin-bottom:0px;
}

.project-image-wrap img{
	width:782px;	
	height:304px;
	display:block;
}

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

.project-image-wrap .overlay{
	position:absolute;
	top:0;
	left:0;
	right:0;
	width:782px;
	height:304px;
	}

.project h3.project-title{
	font-size:18px;
	font-weight:bold;
	left:10px;
	bottom:18px;
	color:#fff;
	padding-left:150px;
	padding-top:10px;
}

.project-image-wrap a{
	position:absolute;
	left:0px;
	top:0px;
	width:782px;	
	height:304px;
	text-indent:-9999em;
	opacity:0;
	border:0;
}

.project-text{
	color:#000;
	font-size:12px;
	line-height:19px;
	margin-top:5px;
	margin-left:150px;
	padding-right:10px;
}

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

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

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

#scroller-window,
#scroller-web-window,
#scroller-iphone-window,
#scroller-desk-window{
	height:352px;
	width:782px;
}

#scroller-window {
   position:relative; 
   overflow:hidden;          
   width: 782px;     
   float:right;
   margin-top:0px;
   margin-right:0px;	
   margin-bottom:0px;
   fbackground-color:#f00;
}
#project-type-nav li.htmlnew a span{	background-image:url(text-web.png);}
#project-type-nav li.web a span{	background-image:url(text-web.png);}	
#project-type-nav li.iphone a span{	background-image:url(text-iphone.png);}	
#project-type-nav li.desktop a span{	background-image:url(text-desktop.png);}	

#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(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:78px;
	height:16px;
	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(text-web.png);}	
#project-type-nav li.iphone a span{	background-image:url(text-iphone.png);}	
#project-type-nav li.desktop a span{	background-image:url(text-desktop.png);}	

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

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

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


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

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

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


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

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

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

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

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


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

.image1{
position:relative;
width:255px;
height:147px;
top:0px;
left:0px;
}

.link1{
position:absolute;
width:255px;
height:26px;
top:121px;
left:0px;
background-image:url(url_bg.png); background-repeat:no-repeat;
font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;font-weight:bold;color:#FFFFFF;text-decoration:none; text-align:center; vertical-align:middle; padding-top:6px;
}
.link1 A:link {	COLOR: #FFFFFF; TEXT-DECORATION: none}
.link1 A:visited {COLOR: #FFFFFF; TEXT-DECORATION: none}
.link1 A:active {COLOR: #FFFFFF; TEXT-DECORATION: none}
.link1 A:hover {COLOR:#FFFF00; TEXT-DECORATION: none}

.image2{
position:relative;
width:255px;
height:147px;
top:-147px;
left:266px;
}

.image3{
position:relative;
width:255px;
height:147px;
top:-294px;
left:531px;
}
.image4{
position:relative;
width:255px;
height:147px;
top:-284px;
left:0px;
}
.image5{
position:relative;
width:255px;
height:147px;
top:-431px;
left:266px;
}
.image6{
position:relative;
width:255px;
height:147px;
top:-578px;
left:531px;
}