* { margin:0;padding:0;border: 0px none;}
ul, ol, li { list-style-type:none; }


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

html {background: #fff url(../img/bg.gif) 0 0 repeat-x;}
body {
font: 12px/14px "Helvetica", Arial, sans-serif;  
background: url(../img/bg-header2.jpg) center 0 no-repeat;
color: #888;
}
#wrapper {
width: 960px;
margin: 0 auto;
}



/* header area */
#header {
width: 900px;
height: 287px;
margin: 0 0 25px;
}
.logo { 
float: left;
font: bold 25px "Helvetica", Arial, sans-serif;
margin: 10px 0 30px;
}
#header h1 {color: #fff;clear: both;}

/* main navigation */
ul.nav {
float: right;
font: bold 15px "Helvetica", Arial, sans-serif;
}
ul.nav li{
float: left;
padding: 0 2px;
height: 68px;
}
ul.nav li a {
float: left;
color: #fff;
text-decoration: none;
padding: 40px 10px 0;
height: 28px;
}
ul.nav li a:hover {text-decoration: underline; }
ul.nav li a.active {
color: #ccc;
background: url(../img/bg-nav-active.png) 0 0 repeat;
}
ul.nav li.client-area {
padding: 0 5px 0 15px;
height: 68px;
}
ul.nav li.client-area a {
color: #fff;
text-decoration: none;
margin: 36px 0 0;
padding: 0;
height: 26px;
background: url(../img/bg-nav-client-area.gif) 0 0 no-repeat;
}
ul.nav li.client-area a span {
color: #fff;
float: left;
text-decoration: none;
padding: 0 15px;
height: 26px;
line-height: 1.6em;
background: url(../img/bg-nav-client-area.gif) right -26px no-repeat;
}
ul.nav li.client-area a:hover {background: url(../img/bg-nav-client-area.gif) 0 -52px no-repeat;text-decoration: none;}
ul.nav li.client-area a:hover span {background: url(../img/bg-nav-client-area.gif) right -78px no-repeat;text-decoration: none;}



/* main content (on white background) */
#content { 
width: 960px;
clear: both;
}
h1 {
font: bold 31px/35px "Helvetica", Arial, sans-serif;	
color: #444;
clear: both;
letter-spacing: -0.04em;
margin: 0 0 25px;
}
h2 {
font: bold 25px/27px "Helvetica", Arial, sans-serif;
background: #e6e6e6;	
color: #444;
clear: both;
letter-spacing: -0.02em;
margin: 0 0 15px;
float: left;
padding: 4px 15px 4px 0;
}
h3 {
font: bold 17px/21px "Helvetica", Arial, sans-serif;
background: #e6e6e6;	
color: #444;
clear: both;
letter-spacing: -0.03em;
margin: 0 0 7px;
float: left;
padding: 2px 8px 2px 0;
}
h4 {
font: bold 21px/24px "Helvetica", Arial, sans-serif;	
color: #444;
clear: both;
letter-spacing: -0.03em;
margin: 0 0 15px;
}
h5 {
font: bold 19px/21px "Helvetica", Arial, sans-serif;	
color: #666;
clear: both;
letter-spacing: -0.02em;
margin: 0 0 15px;
}
h5 span {
font: bold 12px/15px "Helvetica", Arial, sans-serif;	
color: #888;
clear: both;
}
h6 {
font: bold 16px/20px "Helvetica", Arial, sans-serif;	
color: #888;
letter-spacing: -0.02em;
margin: 0 0 15px;
}
p {
font: normal 15px/21px "Helvetica", Arial, sans-serif;
letter-spacing: -0.02em;
margin: 0 0 15px;
}
img.right {float: right;margin: 0 0 25px 0;}
img.left {float: left;margin: 0 0 25px 0;}
p.center {text-align: center;}
p.margin {margin-left: 50px; padding-top: 10px;}
p.margin-more {margin-left: 115px; padding-top: 10px;}
.ruler { 
width: 695px;
margin: 20px auto;
height: 4px;
clear: both;
background: url(../img/bg-ruler.gif) center center no-repeat;
}
.leftcolumn .ruler { 
width: 555px;
margin: 25px auto;
height: 3px;
clear: both;
background: url(../img/bg-ruler-small.gif) center center no-repeat;
}
.rightcolumn .ruler { 
width: 200px;
margin: 25px auto;
height: 3px;
clear: both;
background: url(../img/bg-ruler-right.gif) center center no-repeat;
}
p a.arrow {
font: bold 11px/22px "Helvetica", Arial, sans-serif;
height: 21px;
float: right;
padding: 0 25px 0 0;
text-decoration: none;
background: url(../img/toggle/grey-arrow.gif) right 0 no-repeat;
}
p a.arrow:hover {text-decoration: underline;}
p.testimonial {
text-align: center;
font: normal 16px/20px "Helvetica", Arial, sans-serif;
padding: 20px 0;
margin: 0 60px 0 0;
}



/* main content elements */
.copy-width { float: left; width: 887px;}
.leftcopy { float: left; width: 400px;}
.rightcopy { float: right; width: 400px;}
.leftcopy p, .rightcopy p, .leftcolumn p, .rightcolumn p {clear: left;}
.leftcolumn { float: left; width: 555px;}
.rightcolumn { float: right; width: 235px;}
.contact-left {width: 500px;}
.contact-right { width: 335px;}
a.redbtn {
background: #b70f1b url(../img/bg-red-btn.gif) 0 0 no-repeat;
height: 36px;
float: left;
color: #fff;
text-decoration: none;
margin: 0 12px 0 0;
}
a.redbtn span {
background: url(../img/bg-red-btn.gif) right -36px no-repeat;
height: 29px;
padding: 7px 20px 0;
color: #fff;
text-decoration: none;
font-weight: bold;
float: left;
}
a.login {background: #b70f1b url(../img/bg-red-btn.gif) 0 -72px no-repeat;}
a.login span {padding: 7px 20px 0 38px;}
a.redbtn:hover span {text-decoration: underline;}
.rightcolumn a.redbtn {
background: #b70f1b url(../img/bg-red-btn-small.gif) 0 0 no-repeat;
height: 29px;
float: right;
color: #fff;
text-decoration: none;
margin: 0;
font: normal 12px/14px "Helvetica", Arial, sans-serif;
}
.rightcolumn a.redbtn span {
background: url(../img/bg-red-btn-small.gif) right -29px no-repeat;
height: 23px;
padding: 6px 20px 0 18px;
color: #fff;
text-decoration: none;
font-weight: bold;
float: left;
}
.rightcolumn a.redbtn:hover span {text-decoration: underline;}
.rightcolumn h6, .rightcolumn p { margin: 0 17px 15px;}
.rightcolumn ul {margin: 0 17px 25px;}
.rightcolumn ul li {
background:  url(../img/redarrow.gif) 0 0 no-repeat;
padding: 0 0 0 25px;
margin: 0 0 8px;
font: normal 15px/18px "Helvetica", Arial, sans-serif;
}
.rightcolumn ul li a { text-decoration: none; color: #888;}
.rightcolumn ul li a:hover { text-decoration: underline;}



/* form elements */
.rightcolumn form {
background: #eee;
text-align: right;
font: bold 14px/18px "Helvetica", Arial, sans-serif;
color: #666;
padding: 20px 25px;
}
.rightcolumn form input, .rightcolumn form select, .rightcolumn form textarea {
padding: 5px;
width: 275px;
font: normal 14px/15px "Helvetica", Arial, sans-serif;
color: #666;
margin: 2px 0 15px;
}
.rightcolumn form input.btn {
width: auto; 
border: 0; 
padding: 0; 
outline: none;
background:url(../img/btn-submit.gif) no-repeat;
height:40px;
width:95px;
}
.rightcolumn form small {font: normal 12px/18px "Helvetica", Arial, sans-serif; }



/* gallery */
.gallery {
width: 884px;
}
.gallery img {
float: left;
margin: 0 12px 12px 0;
}
.gallery img.nomarg {margin-right: 0;}
.gallery img.gallery-right {float: right;margin-right: 0;}



/* news stories */
.story { clear: both; }
.story img { float: left;}
.story-alt img {float: right;}
.story div { 
float: right;
width: 350px;
}
.story-alt div { float: left;}
.story p.right { text-align: right;}
.story h2 {
font: bold 21px/25px "Helvetica", Arial, sans-serif;
}
p.pagination {
text-align: center;
font: bold 12px/14px "Helvetica", Arial, sans-serif;
}
p.pagination a {text-decoration: none; padding: 0 5px;}
p.pagination a:hover {text-decoration: underline;}
.story p a.arrow, p a.rss {
font: bold 14px/22px "Helvetica", Arial, sans-serif;
height: 21px;
float: right;
padding: 0 0 0 25px;
margin: 0 0 0 15px;
text-decoration: none;
color: #888;
background: url(../img/toggle/grey-arrow.gif) 0 0 no-repeat;
}
p a.rss {background: url(../img/rss.gif) 0 0 no-repeat; }
.story p a:hover, p a:hover.rss {text-decoration: underline;}
.rightcolumn p a.rss { float: none;margin: 0 0 15px 50px;}



/* 4 columns on home page */
.fourcolumns { 
width: 910px;
clear: both;
float: left;
}
.fourcolumns div { 
width: 206px;
margin: 0 20px 0 0;
float: left;
}
.fourcolumns div img {margin: 0 0 10px;}
.fourcolumns div p { clear: both;font: normal 13px/18px "Helvetica", Arial, sans-serif;margin: 0; padding:0;}
.fourcolumns p { margin: 0 20px 0 0; clear: left; padding: 10px 0 0;}



/* 4 columns on home page */
.core-services { 
width: 910px;
margin: 0 0 25px;
clear: both;
float: left;
}
.core-services div { 
width: 206px;
height: 60px;
padding: 77px 20px 0 0;
margin: 0 0 20px;
float: left;
}
.core-services div h3 a {float: left; width:170px; text-decoration:none; padding-left:5px;}
.core-services div h3 a:hover {text-decoration: underline;}

.core-services div.design { background: url(../img/service_images/top/new/1.jpg) 0 0 no-repeat; }
.core-services div.webdev { background: url(../img/service_images/top/new/2.jpg) 0 0 no-repeat; }
.core-services div.webapp { background: url(../img/service_images/top/new/3.jpg) 0 0 no-repeat; }
.core-services div.cms { background: url(../img/service_images/top/new/4.jpg) 0 0 no-repeat; }
.core-services div.seo { background: url(../img/service_images/top/new/5.jpg) 0 0 no-repeat; }
.core-services div.email { background: url(../img/service_images/top/new/6.jpg) 0 0 no-repeat; }
.core-services div.cro { background: url(../img/service_images/top/new/7.jpg) 0 0 no-repeat; }
.core-services div.news { background: url(../img/service_images/top/new/8.jpg) 0 0 no-repeat; }

.core-services div.cms h3 {width: 170px;}
.core-services div.cro h3 {width: 135px;}




/* people on contact page */
.people { 
clear: both;
padding: 10px 0;
}
.people div { 
width: 225px;
float: left;
padding: 0 10px;
}
.people div img { margin: 0 0 7px;}



/* main navigation */
ul.subnav {
font: bold 16px "Helvetica", Arial, sans-serif;
margin: 0 0 10px;
float: left;
}
ul.subnav li{float: left; margin-right: 35px;}
ul.subnav li a {
float: left;
color: #bbb;
text-decoration: none;
padding: 0;
}
ul.subnav li a:hover {text-decoration: underline; }
ul.subnav li a.active {color: #444;}



/* clear everything (sometimes needed for IE 6) */
.clearall { 
width: 100%;
clear: both;
}


/* footer styles */
#footer {
clear: both;
margin: 0;
height: 198px;
width: 100%;
background:  url(../img/bg-footer-repeat.gif) 0 bottom repeat-x;
}
#footer .wrapper {

margin: 0 auto;
width: 960px;
height: 207px;
background: #222 url(../img/bg-footer3.jpg) 0 0 no-repeat;

}
#footer .contain {

margin: 0 auto 0 auto;
width: 900px;
height: 197px;
float:left;
}
#footer .contain div {
float: right;
width: 175px;
margin:40px 0 0;
}
#footer .contain div.wide {
float: left;
width: 390px;
}
#footer .contain div h5 {
background: url(../img/trans-20.png) 0 0 repeat;
float: left;
color: #fff;	
font: bold 16px/21px "Helvetica", Arial, sans-serif;
letter-spacing: -0.02em;
margin: 0 0 10px;
padding: 2px 10px 2px 0;
}
#footer p {
margin: 0 0 15px;
color: #fff;
clear: left;
font: normal 14px/19px "Helvetica", Arial, sans-serif;
}
#footer a { color: #fff;}
#footer a:hover { color: #aaa;}


img.cap
{width: 175px;
}

span.human
{
	position:relative;
	top:-5px;
	margin-right:10px;
}