/* -------------------------------------------------------------------- */
                          /* !*** GENERAL STYLES *** */
/* -------------------------------------------------------------------- */


body {
	font-family: Arial, sans-serif;
	font-size: 13px;
	color: #333;
	background: #f3f2ed;
	margin: 0;
	padding: 0;
	}

a:link {
	/*color: #333;*/
	text-decoration: underline;
	}

a:visited {
	/*color: #333;*/
	text-decoration:none;
	}

a:hover {
	text-decoration: none;
	}
	
h1,h2,h3,h4,p,ul,li,dl,dt,dd,div,span {
	margin: 0;
	padding: 0;
	cursor: default;
	}
	
img {
	border: none;
	}

.clear {
	clear: both;
	line-height: 0;
	}
	
.spacer {
	clear: both;
	width: 100%;
	height: 20px;
	}
	
.divider {
	clear: both;
	width: 100%;
	height: 20px;
	border-bottom: 1px solid #efefef;
	}
	
.last {
	margin-right: 0 !important;
	}

/* -------------------------------------------------------------------- */
                          /* !*** CONTAINERS *** */
/* -------------------------------------------------------------------- */
	

#container {
	width: 1020px;
	margin: 0 auto;
	}
	
#container-padding {
	float: left;
	width: 980px;
	padding: 0 15px;
	background: #fff;
	border-left: 5px solid #e7e5de;
	border-right: 5px solid #e7e5de;
	}
	
#header {
	width: 950px;
	height: 120px;
	float: left;
	padding: 0 15px;
	background: url(header-bg.png) repeat-x top;
	}

#header-bottom {
	width: 980px;
	height: 25px;
	float: left;
	clear: left;
	background: url(header-bottom.png) no-repeat center top;
	border-top: 1px solid #efefef;
	}

#logo {
	float: left;
	clear: both;
	position: absolute;
	width: 230px;
	height: 48px;
	top: 45px;
	background: url(logo-firmstep-header.png) no-repeat;
/* 	border: 1px solid; */
	}

#left,
#right {
	float: left;
	position: relative;
	width: 625px;
	padding-right: 25px;
	}

#right {
	width: 300px;
	padding-right: 0;
	}
	
.column {
	float: left;
	position: relative;
	width: 300px;
	margin-left: 15px;
	margin-right: 10px;
/* 	min-height: 100px; */
/* 	background: #efefef; */
	}
	
.column-span {
	float: left;
	position: relative;
	width: 625px;
	margin-left: 15px;
	margin-right: 10px;
/* 	min-height: 100px; */
/* 	background: #ccc; */
	}
	
.column-half {
	float: left;
	position: relative;
	width: 430px;
	margin-left: 15px;
	margin-right: 10px;
/* 	min-height: 100px; */
/* 	background: #ccc; */
	}
	
#footer {
	float: left;
	clear: both;
	position: relative;
	width: 980px;
	margin-top: 20px;
	padding: 20px 0;
	background: #313232;
	border-top: 4px solid #707070;
	}

#footer ul {
	float: left;
	position: relative;
	padding-top: 12px;
	padding-left: 65px;
	list-style: none;
	background: url(logo-footer.png) no-repeat 0 10px;
	}
	
#footer ul li {
	float: left;
	padding: 5px 3px;
	font-size: 11px;
	color: #999;
	}

#footer ul li a {
	float: left;
	color: #999;
	}
	
.footer-logos {
	float: right;
	position: relative;
	}

.footer-logos img {
	padding-left: 20px;
	}


/* -------------------------------------------------------------------- */
                          /* !*** PADDINGS *** */
/* -------------------------------------------------------------------- */


.padding-0 {
	padding: 0 0px;
	}

.padding-5 {
	padding: 0 5px;
	}

.padding-10 {
	padding: 0 10px;
	}
	
.padding-15 {
	padding: 0 15px;
	}

.padding-20 {
	padding: 0 20px;
	}

.padding-25 {
	padding: 0 25px;
	}

.padding-30 {
	padding: 0 30px;
	}

/* -------------------------------------------------------------------- */
                          /* !*** TOP MENU *** */
/* -------------------------------------------------------------------- */




/* -------------------------------------------------------------------- */
                          /* !*** WIDGET BAR & LOGIN BAR *** */
/* -------------------------------------------------------------------- */


#login-bar {
	float: right;
	clear: both;
	height: 32px;
/* 	border: 1px solid; */
	}

a.btn-orange {
	display: block;
	float: left;
	height: 13px;
	padding: 5px 12px 8px 8px;
	_padding-left: 4px; /* Compensate for 4px (width of slice) that IE6 adds to the left */
	font-size: 13px;
	line-height: 15px;
	color: #fff !important;
	text-decoration: none;
	background-image: url(button-orange-right.png);
	background-repeat: no-repeat;
	background-position: right 0px;
	overflow: hidden; /* For IE6 */
	}

a.btn-orange span.btn-orange-corner {
	float: left;
	position: relative;
	display: block;
	width: 4px;
	height: 26px;
	top: -5px;
	left: -8px;
	_left: -4px; /* Compensate for 4px (width of slice) that IE6 adds to the left */
	background-image: url(button-orange-left.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	}
	
a.btn-orange img {
	margin-left: 8px;
	}
	
a.btn-orange:hover,
a.btn-orange:hover span.btn-orange-corner {
	cursor: hand;
	background-position: right -26px;
	}
	
	
/* -------------------------------------------------------------------- */
                          /* !*** HOMEPAGE BANNERS *** */
/* -------------------------------------------------------------------- */


#home-slideshow {
	width: 980px;
	float: left;
	clear: left;
	padding-bottom: 10px;
	background: url(banner-home-nav-bottom.png) no-repeat center bottom;
	border-bottom: 1px solid #efefef;
	}

#promo-buttons {
	float: left;
	position: relative;
	width: 210px;
	padding-top: 136px;
	}

#slideshow {
	float: left;
	position: relative;
	}

#slideshow .banner-home {
	width: 770px;
	overflow: hidden;
	position: relative;
	}

#slideshow .banner-home ul {
	width: 4620px;
	list-style: none;
	}
	
#slideshow .banner-home ul:after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

#slideshow .banner-home li {
	float: left;
	width: 770px;
/* 	min-height: 364px; */
/* 	height: auto !important; */
/* 	height: 364px; */
	position: relative;
	background-repeat: no-repeat;
	background-position: right top;
/*	border: 1px solid;*/
	}

.banner-home h1,
.banner-home h2 {
	text-align: center;
	}

.banner-home h1 {
	margin-bottom: 15px;
	}

.banner-home img {
	float: left;
	clear: left;
	border: none;
	}

ul.banner-home-nav {
	float: left;
	clear: both;
	list-style: none;
	padding-left: 30px;
	}

ul.banner-home-nav li {
	float: left;
	position: relative;
	list-style: none;
	padding-right: 20px;
	}

ul.banner-home-nav li.last {
	padding-right: 0px;
	}

ul.banner-home-nav li a {
	display: block;
	list-style: none;
	padding-top: 5px;
	text-align: center;
	font-size: 12px;
	color: #999;
	text-decoration: none;
	border-top: 3px solid #fff;
	}

ul.banner-home-nav li.selected a {
	color: #333;
	text-decoration: none;
	}

ul.banner-home-nav li.selected a.nav-as {
	border-top: 3px solid #009fe0;
	}

ul.banner-home-nav li.selected a.nav-af {
	border-top: 3px solid #69aa0b;
	}

ul.banner-home-nav li.selected a.nav-ac {
	border-top: 3px solid #b3126a;
	}
	
.twitter-feed {
	float: left;
	width: 300px;
	margin-top: 30px;
	padding-bottom: 12px;
	background: url(twitter-box-footer.png) no-repeat bottom;
	}
	
.twitter-feed-inner {
	float: left;
	width: 300px;
	background: url(twitter-box-header.png) no-repeat top;
	}
	
.twitter-feed h3 {
	margin: 0;
	padding: 10px 15px;
	padding-bottom: 0px;
	font-size: 20px;
	line-height: 22px;
	font-weight: normal;
	color: #009fe0;
	}


.twitter-feed p {
	margin: 0;
	padding: 5px 15px 0px 15px;
	font-size: 12px;
	line-height: 16px;
	}
	

/* -------------------------------------------------------------------- */
                          /* !*** HOMEPAGE CLIENT LIST *** */
/* -------------------------------------------------------------------- */


p.client-list {
	display: block;
	float: left;
	clear: both;
	width: 930px;
	margin: 0;
	margin-left: 30px;
	_margin-left: 15px;
	padding: 0;
	padding-bottom: 3px;
	font-size: 10px;
	line-height: 11px;
	color: #999;
/* 	border: 1px solid; */
	border-bottom: 1px solid #efefef;
	}
	
ul.client-list {
	float: left;
	clear: left;
	list-style: none;
	width: 975px;
	margin-bottom: 0px;
	padding-left: 15px;
	padding-bottom: 25px;
	background: url(header-bottom.png) no-repeat center bottom;
	}

ul.client-list li {
	float: left;
	padding: 6px 16px;
	}

ul.client-list li a {
	display: block;
	float: left;
	height: 62px;
	padding: 5px;
	background-repeat: no-repeat;
	background-position: center center;
	border: 4px solid #fff;
	}

ul.client-list li a:hover {
	border-color: #009fe0;
	}

ul.client-list li a#client-lincolnshire {
	width: 137px;
	background-image: url(client-lincolnshire.png);
	}

ul.client-list li a#client-liverpool {
	width: 55px;
	background-image: url(client-liverpool.png);
	}

ul.client-list li a#client-siemens {
	width: 93px;
	background-image: url(client-siemens.png);
	}

ul.client-list li a#client-newham {
	width: 68px;
	background-image: url(client-newham.png);
	}

ul.client-list li a#client-colchester {
	width: 61px;
	background-image: url(client-colchester.png);
	}

ul.client-list li a#client-corby {
	width: 83px;
	background-image: url(client-corby.png);
	}

ul.client-list li a#client-tower-hamlets {
	width: 83px;
	background-image: url(client-tower-hamlets.png);
	}
	
	
/* -------------------------------------------------------------------- */
                          /* !*** HOMEPAGE PROMO SERVICES *** */
/* -------------------------------------------------------------------- */


.promo-service h3 {
	font-size: 18px;
	line-height: 20px;
	color: #333;
	margin-top: 0;
	margin-bottom: 0px;
	padding: 0 15px;
	}

.promo-service p {
	font-size: 17px;
	line-height: 21px;
	margin: 0;
	padding: 5px 15px;
	}

.promo-service ul {
	padding: 15px 15px 5px 15px;
	color: #333;
	}

.promo-service ul li {
	margin-left: 20px;
	padding-bottom: 10px;
	}
	
.promo-service a {
	font-size: 15px;
	font-weight: bold;
	}

.promo-service a.service-logo {
	padding-left: 15px;
	padding-bottom: 5px;
	}

p.achieve-service {
	color: #009fe0;
	}

p.achieve-forms {
	color: #69aa0b;
	}

p.achieve-community {
	color: #b3126a;
	}




/* -------------------------------------------------------------------- */
                          /* !*** SERVICE PAGES *** */
/* -------------------------------------------------------------------- */


.banner-innerpage {
	clear: both;
	height: 205px;
	}

.achieve-service .banner-innerpage {
	background: url(banner-service-as.png) no-repeat;
	}

.achieve-forms .banner-innerpage {
	background: url(banner-service-af.png) no-repeat;
	}

.achieve-community .banner-innerpage {
	background: url(banner-service-ac.png) no-repeat;
	}

.firmstep-platform .banner-innerpage {
	background: url(banner-service-fp.png) no-repeat;
	}

.banner-innerpage h1 {
	padding-top: 56px;
	margin-left: 520px;
	font-size: 36px;
	line-height: 40px;
	}

#service-page p.lead-in {
	margin-bottom: 30px;
	padding: 25px 30px 25px 335px;
	border-bottom: 1px solid #efefef;
	}

#service-page .achieve-service p.lead-in {
	padding-left: 350px;
	background: url(logo-as-service-page.png) no-repeat 30px 15px;
	}

#service-page .achieve-forms p.lead-in {
	padding-left: 350px;
	background: url(logo-af-service-page.png) no-repeat 30px 15px;
	}

#service-page .achieve-community p.lead-in {
	padding-left: 350px;
	background: url(logo-ac-service-page.png) no-repeat 30px 15px;
	}

#service-page .firmstep-platform p.lead-in {
	padding-left: 350px;
	background: url(logo-fp-service-page.png) no-repeat 30px 15px;
	}


a.screenshot-thumb {
	padding-left: 15px;
	}


dl.service-features {
	float: left;
	position: relative;
	width: 300px;
	list-style: none;
	margin-right: 25px;
/* 	border: 1px solid; */
	}

dl.service-features dt {
	padding-left: 15px;
	}

dl.service-features dt h3 {
	margin-top: 10px;
	}

dl.service-features dt.feature-text {
	padding-left: 15px;
	font-size: 14px;
	color: #333;
	padding-bottom: 15px;
	}

dl.service-features dd {
	font-size: 14px;
	color: #333;
	padding-left: 45px;
	padding-bottom: 15px;
	background: url(feature-list-bullet.png) no-repeat 15px 3px;
	}


a.large-button {
	display: block;
	margin-bottom: 20px;
	}
	
p.testimonial {
	padding-left: 0;
	font-size: 13px;
	font-style: italic;
	}

p.testimonial img {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	}

a.file-download {
	display: block;
	padding-left: 22px;
	margin-bottom: 10px;
	font-size: 13px;
	line-height: 16px;
	background: url(document-pdf.png) no-repeat;
	}

	
/* -------------------------------------------------------------------- */
                          /* !*** EVENTS *** */
/* -------------------------------------------------------------------- */

	
.event-date {
	float: left;
	clear: left;
	position: relative;
	width: 30px;
	padding: 5px 0 2px 15px;
	font-size: 10px;
	color: #999;
	border-right: 1px solid;
	}
	
.event-day {
	display: block;
	font-size: 18px;
	}
	
.event-body {
	float: left;
	position: relative;
	width: 550px;
	margin-bottom: 40px;
	padding-left: 10px;
/* 	border: 1px solid; */
	}

.event-body h3 {
	margin-top: 0;
	margin-bottom: 20px;
	padding-top: 1px;
	
	}

.event-body p {
	font-size: 13px;
	padding-left: 0;
	margin-bottom: 10px;
	}
	
.side-list p {
/* 	padding-left: 0; */
	padding-bottom: 20px;
	border-bottom: 1px solid #efefef;
	background: url(bg-arrow.png) no-repeat;
	}
	
.side-list-title {
	font-size: 15px;
	line-height: 18px;
	}
	
.side-list a {
	font-size: 12px;
	line-height: 13px;
	}
	
.side-list-small {
	display: block;
	font-size: 12px;
	line-height: 15px;
/* 	color: #666; */
	}
	
.recent-date {
	display: block;
	font-size: 11px;
	line-height: 13px;
	color: #999;
	}
	
	

/* -------------------------------------------------------------------- */
                          /* !*** WHO *** */
/* -------------------------------------------------------------------- */

.side-links {
	list-style: none;
	}

.side-links li {
	padding-bottom: 10px;
	}

.side-links a {
	display: block;
	font-size: 14px;
	font-weight: bold;
	padding-left: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #efefef;
	background: url(bg-arrow.png) no-repeat 0 0px;
	}



/* -------------------------------------------------------------------- */
                          /* !*** CLIENTS *** */
/* -------------------------------------------------------------------- */

.client-logo {
	float: left;
	position: relative;
	margin-top: 40px;
	}

.client-story {
	margin-left: 100px;
	}
	
.clients-logos {
	padding-top: 70px;
	}

.clients-logos div {
	float: left;
	width: 150px;
	height: 80px;
	text-align: center;
	}

/* -------------------------------------------------------------------- */
                          /* !*** CONTACT *** */
/* -------------------------------------------------------------------- */

.contact-phone,
.contact-map {
	padding-left: 35px;
	background: url(icn-contact-phone.png) no-repeat;
	}

.contact-map {
	background: url(icn-contact-map.png) no-repeat;
	}
	
.contact-side {
	margin-top: 60px;
	}

.contact-side h3 {
	font-size: 15px;
	color: #333;
	margin-top: 0;
	padding-top: 5px;
	}

.contact-side p {
	font-size: 14px;
	line-height: 20px;
	}



/* -------------------------------------------------------------------- */
                          /* !*** ELEMENT STYLES *** */
/* -------------------------------------------------------------------- */


.achieve-service {
	color: #009fe0;
	}

.achieve-forms {
	color: #69aa0b;
	}

.achieve-community {
	color: #b3126a;
	}
	
.firmstep-platform {
	color: #f16531;
	}


h1 {
	font-size: 32px;
	line-height: 34px;
	margin-bottom: 35px;
	}

h2 {
	font-size: 22px;
	line-height: 25px;
	font-weight: normal;
	color: #333;
	margin-bottom: 25px;
	}
	
h3 {
	font-size: 18px;
	line-height: 20px;
	margin-top: 40px;
	margin-bottom: 15px;
/* 	padding-left: 15px; */
	}
	
p {
	font-size: 14px;
	line-height: 20px;
	color: #333;
	text-align: justify;
	margin-bottom: 20px;
	padding: 0px 15px;
	}

p.lead-in {
	font-size: 18px;
	line-height: 24px;
	text-align: justify;
	color: #333;
	margin: 0;
	padding: 25px 15px 25px 15px;
	}

.note {
	font-size: 11px;
	line-height: 15px;
	color: #999;
	}
  
  

/* BLOG */

.blog-author { font-size: 0.7em; float:right; }
.blog-divider { border-top: 1px solid lightgray; }
.blog-row { clear: both; }
.blog-title .feedlink { color: #F16531 }

.menuouter div.blog-row { margin:0 0 1em; }
.menuouter div.blog-row div { margin: 0; }
.blog.chrome .pickouter { float:right; margin: 5px 0 10px; }
.blog.chrome .pickouter .pickpagebuttons a { 0 0.5em }

.menuouter.comments .comment ol, .menuouter.comments .comment ul { padding-left: 2em; }

.menuouter.post { padding-bottom: 2em }
.menuouter.post .authorinfo { font-size: 120%; font-weight: bold; }

.genericsubmit { color: #EEEEEE !important; border-color:  #277DA6 !important; -moz-border-radius: .4em; -webkit-border-radius: .4em; }
.genericsubmit:hover { color: #FFFFFF !important; }

.menuouter.comments .comment { border-bottom:1px solid lightgray; margin-bottom:1em; padding-bottom:1em; }
.comment .commentdetails { font-size: 120%; }
.comment .commentdetails .commentuser, .commentdetails .commentdate, .commentdetails .commentbutton { float:left; padding-right:.5em; }
.comment .commentdetails .commentuser { font-weight:bold; }
.comment .commentcomment { clear:both; font-size: 14px; }

.commentdetails .commentbutton input { border:1px solid #4F4F4F; font-size:90%; margin:0 0.2em; padding:0 0.2em; color: #2F2F2F; -moz-border-radius: .3em; -webkit-border-radius: .3em; }