@charset "utf-8";
/*Reset*/
* {margin:0; padding:0; outline: none; }html, body {} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}img, img a {border: 0px; padding: 0; margin: 0; line-height:1px;}

html, body{color:#333333; background: #e3e3e4; text-align: center;}
body{font-size: 13px; line-height: 19px; color: #333333; font-family: "Century Gothic", Centrury Gothic, sans-serif, Tahoma, Arial;}

/**Typography**/
a, a:link {text-decoration: none; color: #4096ee}
a:hover {text-decoration: underline;}
p {margin-bottom: 15px;}
h1, h2, h3 ,h4, h5 {font-family: "Century Gothic", Centrury Gothic, sans-serif, Tahoma, Arial; font-weight: normal; margin-bottom: 15px;}
h2 {color: #82bf1a; font-size: 24px; line-height: 42px;}
h3 {color: #4096ee; font-size: 18px; line-height: 42px;}
input, textarea {font-size: 12px; line-height: 18px; color: #333333; font-family: "Century Gothic", Centrury Gothic, sans-serif, Tahoma, Arial;}
strong {font-weight: bold;}
em {font-style:italic;}
.iso {margin-left: 60px;}
.iso2 {margin-left: 35px}
.qualif p {margin-bottom: 0px;}
#container {width: 964px; text-align: left; margin: 20px auto;}

#header {background: url(../images/bg/header-n.gif) top left no-repeat;  padding: 48px 28px 0px 28px; height: 135px;}
	h1#logo {float: left; margin-bottom: 0px; margin-top: 4px;}
		h1#logo a {background:url(../images/icons/logo.png) top left no-repeat; width: 342px; height: 64px; display: block; text-indent: -10000px;}
	h2#phone {float: right; font-size: 26px; color: #fff; background:url(../images/bg/phone.png) top left no-repeat; display: block; width: 190px; height: 57px; line-height: 55px; padding-left: 60px; margin-top: 7px; margin-bottom: 0px;}
	ul#mainav {clear: both; margin-top: 27px; position: relative;}
		ul#mainav li {float: left; position: relative;}
			ul#mainav li a {float: left; display: block; width: 120px; height: 40px; background:url(../images/bg/nav.png) 0px -80px no-repeat; text-align: center; color: #fff; font-size: 15px; line-height: 42px;}
			ul#mainav li a:hover {background:url(../images/bg/nav.png) 0px -40px no-repeat; text-decoration: none;}
			ul#mainav li a.selected {background:url(../images/bg/nav.png) 0px 0px no-repeat; text-decoration: none; color: #333333;}
			ul#mainav li ul {position: absolute; margin: 0px; top: 40px; width: 260px;padding: 0px 0px; visibility: hidden; background: #cecece; border-right: 2px solid #9a9a9a; border-bottom: 2px solid #9a9a9a; border-left: 1px solid #9a9a9a; left: -1px; z-index: 1000;}		
			ul#mainav li ul li {border-top: 1px solid #9a9a9a; z-index: 1000}
			ul#mainav li ul li a {width: 230px; background: #ccc; background-image: none; color: #fff; padding: 0px 15px; text-align: left; z-index: 1000; display: block;}
			ul#mainav li ul li a:hover, ul#mainav li ul li a.selected {background-image: none; background: #4096EE; color: #fff; display: block;}			
			ul#mainav li:hover ul, ul#mainav a:hover ul{visibility:visible; }
			ul#mainav li:hover ul ul, ul#mainav a:hover ul ul {visibility: hidden}

			ul#mainav li ul li ul {position: absolute; margin: 0px; top: -1px; left: 260px; width: 260px;padding: 0px 0px; visibility: hidden; background: #cecece; border-right: 2px solid #9a9a9a; border-bottom: 1px solid #9a9a9a; border-left: 2px solid #9a9a9a; z-index: 1000;}		
			ul#mainav li ul li ul li {border-top: 1px solid #9a9a9a; z-index: 1000}
			ul#mainav li ul li ul li a {width: 230px; background: #ccc; background-image: none; color: #fff; padding: 0px 15px; text-align: left; z-index: 1000; display: block;}
			ul#mainav li:hover ul li:hover ul, ul#mainav a:hover ul a:hover ul{visibility:visible; }



.breadcrumb {margin-bottom: 10px; margin-left: 20px; clear: both;}
			

#main {background: #fff url(../images/bg/body.gif) top left repeat-y; clear: both; padding: 10px 12px;}
	#banner {background:url(../images/bg/panel-large-top.gif) top left no-repeat; clear: both; padding-top: 20px; margin-bottom: 10px; z-index:1}
		#banner .inside {background:url(../images/bg/panel-large-middle.gif) top left repeat-y; padding: 0px 11px;}
		#banner .bottom {background:url(../images/bg/panel-large-bottom.gif) top left no-repeat; display: block; width: 940px; height: 20px;}
		
		#banner ul#banner-links {float: left; width: 245px; overflow: hidden; z-index: 1}
			#banner ul#banner-links li {border-bottom: 1px solid #dbdbdb;}
			#banner ul#banner-links li a {display: block; height: 12px; line-height: 10px; padding: 20px 20px; color: #333; background:#FFF;}
			#banner ul#banner-links li a:hover, #banner ul#banner-links li.ui-tabs-selected a {background: #4096ee url(../images/icons/arrow.gif) 97% 50% no-repeat; color: #fff; text-decoration: none;}
		#inside-b { overflow: hidden; height: 264px;}
		.banner-text {float: left; margin-left: 40px; width: 624px; padding-top: 20px; position:relative; overflow: hidden; z-index: 1 !important;}
		.banner-text h2 { margin-bottom: 10px;}
		.banner-text p {margin-top: 0px;}		
		.banner-text p.img {float: right; margin: 0px; padding: 0px;}
		#banner .ui-tabs-hide{ display:none; }
		#banner .ctd {position: relative; top: -39px;}

	#about {float: left; width: 600px; background:url(../images/bg/panel-medium-top.gif) top left no-repeat; padding-top: 20px;}
		#about .inside {background:url(../images/bg/panel-medium-middle.gif) top left repeat-y; padding: 0px 22px 10px 22px;}
		#about .bottom {background:url(../images/bg/panel-medium-bottom.gif) top left no-repeat; display: block; width: 600px; height: 20px;}
		
	#news {float: left; width: 330px; background:url(../images/bg/panel-small-top.gif) top left no-repeat; padding-top: 20px; margin-left: 10px;}
		#news .inside {background:url(../images/bg/panel-small-middle.gif) top left repeat-y; padding: 0px 22px 10px 22px; height:307px;}
		#news .bottom {background:url(../images/bg/panel-small-bottom.gif) top left no-repeat; display: block; width: 330px; height: 20px;}
		#news .news-item {margin-bottom: 16px; clear: both;}
			#news .news-item .title {font-weight: bold; margin-bottom: 2px;}
			#news .news-item .title a{font-weight: bold; color: #333333;}
			#news .news-item.last {margin-bottom: 0px;}
      #news h2 a {background: url(../images/icons/rss.gif) 100% 8px no-repeat; text-indent: -9999px; display:inline-block; margin-left: 5px; width: 32px; height: 32px;}
			.entry h3 {margin-bottom: 5px;}
			p.info {font-style:italic;}
			p.info strong {font-weight:bold;}
			.entry {padding-bottom: 20px; margin-top: 10px; border-bottom: 1px solid #eaeaea;}


	#clients {background:url(../images/bg/panel-large-top.gif) top left no-repeat; clear: both; padding-top: 12px; margin-top: 10px;}
		#clients .inside {background:url(../images/bg/panel-large-middle.gif) top left repeat-y; padding: 0px 22px 0px 22px;}
		#clients .bottom {background:url(../images/bg/panel-large-bottom.gif) 0px -7px no-repeat; display: block; width: 940px; height: 13px;}
		#clients #logos {height: 57px !important; overflow: hidden;}
		#clients h2 {float: left; width: 170px; line-height: 75px; margin: 0px; background: url(../images/bg/clients-arrow-2.gif) top right no-repeat; text-align: left;}
			#clients #logos	div.scrollWrapper{position:relative; overflow:hidden; width:100%; height:100%}
			#clients #logos	div.scrollableArea{position:relative; width:auto; height:100%}		
			#clients #logos {float: left; width: 700px; padding: 5px 10px 0px 10px; position: relative;}
			#clients #logos a {float: left; display: block; text-indent: -9999px; margin: 0px 0px 0px 0px; padding: 0px 20px; width: 196px; height: 50px; background-position: 50% 50%; background-repeat: no-repeat; margin-top: 7px;}
			
			#clients #logos a.opinionpanel { background-image:url(../images/clients/op.gif); width: 196px;}
			#clients #logos a.gusto {background-image: url(../images/clients/gusto.gif); width: 94px;}
			#clients #logos a.quaestor {background-image: url(../images/clients/quaestor.gif); width: 130px;}
      #clients #logos a.rsuk {background-image: url(../images/clients/rsuk.gif); width: 149px;}
      #clients #logos a.cello {background-image: url(../images/clients/cello.gif); width: 251px;}
      #clients #logos a.buzz {background-image: url(../images/clients/buzz.gif); width: 180px;}
      #clients #logos a.zebra {background-image: url(../images/clients/zebra.gif); width: 127px;}
      #clients #logos a.mesh {background-image: url(../images/clients/mesh.gif); width: 190px;}
      #clients #logos a.cog {background-image: url(../images/clients/cog.gif); width: 178px;}
      #clients #logos a.protel {background-image: url(../images/clients/protel.gif); width: 116px;}	
      #clients #logos a.swift {background-image: url(../images/clients/swift.gif); width: 183px;}
      #clients #logos a.blue {background-image: url(../images/clients/blue.gif); width: 65px;}
      #clients #logos a.warwick {background-image: url(../images/clients/warwick.gif); width: 48px;}	

      #clients #logos a.jigsaw{background-image: url(../images/clients/jigsaw.gif); width: 190px; height: 33px}
      #clients #logos a.platypus {background-image: url(../images/clients/platypus.gif); width: 155px; height: 50px}
      #clients #logos a.tuned-in {background-image: url(../images/clients/tuned-in.gif); width: 113px; height: 50px}
      #clients #logos a.spring {background-image: url(../images/clients/spring.gif); width: 91px; height: 50px}
      #clients #logos a.redc {background-image: url(../images/clients/redc.gif); width: 71px; height: 50px}
      #clients #logos a.market-probe {background-image: url(../images/clients/market-probe.gif); width: 152px; height: 50px}
      #clients #logos a.honest-rewards {background-image: url(../images/clients/honest-rewards.gif); width: 190px; height: 46px}
      #clients #logos a.cint {background-image: url(../images/clients/cint.gif); width: 96px; height: 50px}
      #clients #logos a.ceeda {background-image: url(../images/clients/ceeda.gif); width: 174px; height: 50px}
      #clients #logos a.blauw {background-image: url(../images/clients/blauw.gif); width: 172px; height: 36px}
			
			.clients-text {float: right; width: 390px; background:url(../images/bg/clients-arrow.gif) top left no-repeat; height: 224px; padding: 10px 20px 10px 40px; overflow: auto;}
			.clients-text h3 {margin-bottom: 5px;}

		#inside-c {height: 244px; overflow: hidden;}
		#clients .ui-tabs-hide{ display:none; }


/**Other pages**/
.other-l {float: left; width: 600px; background:url(../images/bg/panel-medium-top.gif) top left no-repeat; padding-top: 20px; margin-bottom: 10px;}
.other-l ul, .other-l ul li {list-style-type:disc !important;}
.other-l ul li {margin-left: 30px; margin-bottom: 05px;}
		.other-l .inside {background:url(../images/bg/panel-medium-middle.gif) top left repeat-y; padding: 0px 22px 10px 22px;}
		.other-l .bottom {background:url(../images/bg/panel-medium-bottom.gif) top left no-repeat; display: block; width: 600px; height: 20px;}
.other-r {clear: right; float: right; width: 330px; background:url(../images/bg/panel-small-top.gif) top left no-repeat; padding-top: 20px; margin-left: 10px;  margin-bottom: 10px;}
		.other-r .inside {background:url(../images/bg/panel-small-middle.gif) top left repeat-y; padding: 0px 22px 0px 22px;}
		.other-r .bottom {background:url(../images/bg/panel-small-bottom.gif) top left no-repeat; display: block; width: 330px; height: 20px;position:relative;top:-5px;}
.other-f {background:url(../images/bg/panel-large-top.gif) top left no-repeat; clear: both; padding-top: 12px; margin-top: 10px; width:940px;}
 .other-f .inside {background:url(../images/bg/panel-large-middle.gif) top left repeat-y; padding: 0px 22px 0px 22px;}
 .other-f .bottom {background:url(../images/bg/panel-large-bottom.gif) 0px -7px no-repeat; display: block; width: 940px; height: 13px;}		
	.other-r.address h3 {margin-bottom: 10px;}
	.other-r.address p {margin-bottom: 10px;}
/**End other pages**/

/**Small nav**/
ul.small-nav {float: left; width: 286px; overflow: hidden;}
	ul.small-nav li {border-bottom: 1px solid #dbdbdb;}
	ul.small-nav li a {display: block; height: 12px; line-height: 10px; padding: 15px 25px; color: #333; background:#FFF;}
	ul.small-nav li a:hover, ul.small-nav li a.selected {background: #4096ee url(../images/icons/arrow2.gif) 10px 50% no-repeat; color: #fff; text-decoration: none;}
		ul.small-nav li.in a {padding-left: 45px;}
		ul.small-nav li.in a:hover, ul.small-nav li.in a.selected {background: #4096ee url(../images/icons/arrow2.gif) 30px 50% no-repeat; color: #fff; text-decoration: none;}		


/**Conact Form**/
.tbContactform {margin-top: 30px;}
.tbContactform .antispam {display:  none;visibility: hidden;}
.tbContactform label {width:  95px;display:  inline-block;vertical-align: top;clear: both;}
.tbContactform input.text,.tbContactform textarea {width:  325px;padding: 2px; border: 1px solid #CCC;}
.tbContactform textarea {height:  145px; width: 450px;}
.tbContactform input.submit {color: #fff; background:url(../images/bg/more.gif) top left no-repeat; width: 118px; font-size:14px; line-height: 30px; height: 32px; border: 0px; display: block; padding: 0px 0px 5px 0px; display: block; float: right; cursor: pointer;}
.tbContactform .tbErrors p {color: #cc0000;}


/**Case studies**/
.ui-accordion-header {padding-top: 10px; margin-top: 10px; border-top: 1px solid #eaeaea;}
.study {height: auto !important;}

/**Vacancies**/
p.test {margin-top: 40px;}
p a.button {background:url(../images/bg/button.gif) top left no-repeat; display: block; width: 118px; height: 30px; line-height: 30px; color: #fff; text-align: center; margin: 0px auto;}
table.testtable {width: 798px; margin-top: 20px; margin-bottom: 40px; background: #fafafa; padding:20px;  border: 1px solid #fafafa; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
table.testtable tr th {padding: 10px; font-weight: bold; text-align: center;}
table.testtable tr td {padding: 10px !important; border-bottom: 1px solid #eaeaea; text-align: center;}
table.testtable tr td.f {text-align: left; color: #4096EE}
table.testtable tr td a.failed {background-image:url(../images/icons/results.png); background-repeat: no-repeat; display: block; width: 20px; height: 21px; background-position: 0px -21px; text-indent: -9999px; margin: 0px auto; text-align: center;}
table.testtable tr td a.passed {background-image:url(../images/icons/results.png); background-repeat: no-repeat; display: block; width: 20px; height: 21px; background-position: 0px 0px; text-indent: -9999px; margin: 0px auto; text-align: center;}
table.testtable tr td a.alert {background-image:url(../images/icons/results.png); background-repeat: no-repeat; display: block; width: 20px; height: 21px; background-position: 0px -42px; text-indent: -9999px; margin: 0px auto; text-align: center;}
table.testtable tr:hover td {background: #fdffe2;}
table.testtable .help {display: block; padding: 20px; background:#FFF;}
#resume {display: none; clear: both;}
#resume a.button {background:url(../images/bg/button.gif) top left no-repeat; display: block; width: 118px; height: 30px; line-height: 30px; color: #fff; text-align: center; margin: 0px auto;}
#resume form {margin-top: 20px; background: #fafafa; padding: 0px 0px 0px 0px;}
#resume form fieldset {padding-bottom: 20px; padding-top: 0px;}
#resume form fieldset .legend {background: #eaeaea; border: 1px solid #ccc; font-size:18px; line-height: 20px; padding: 10px; margin-bottom: 30px;}
#resume form .antispam {display:  none;visibility: hidden;}
#resume form label {margin-left: 20px; width:  250px;display:  inline-block;vertical-align: top;clear: both;}
#resume form input.text, #resume form textarea, #resume form select {width:  250px;padding: 2px; border: 1px solid #CCC;}
#resume form textarea {height:  125px;}
#resume form input.submit {color: #fff; background:url(../images/bg/more.gif) top left no-repeat; width: 118px; font-size:14px; line-height: 30px; height: 32px; border: 0px; display: block; padding: 0px 0px 5px 0px; display: block; float: right; cursor: pointer;}
#resume form label.error {color: #C00;}
#resume form select {height: 130px; width: 257px !important;}
table.vacancies {background:#F5F5F5; margin: 15px auto; clear: both;}
table.vacancies td, table.vacancies th {padding: 10px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; text-align: center;}
table.vacancies th {}
table.vacancies th.col1 {width: 120px; background: #FAFAFA; border-left: 0px; border-top: 0px}
table.vacancies .bleft {border-left: 1px solid #ccc;}
table.vacancies .btop {border-top: 1px solid #ccc;}
.vacanciesp {padding: 0px 20px;}
.submitres {text-align:center; margin: 0px auto;}
.submitres .button {background:url(../images/bg/button.gif) top left no-repeat; display: block; width: 118px; height: 30px; line-height: 30px; color: #fff; text-align: center; margin: 0px auto; border: 0px; cursor: pointer; font-size:16px;}



#footer {background:url(../images/bg/footer.gif) top left no-repeat; padding: 11px 37px 0px 37px; clear: both;}
	#footer h4#copy {float: left; color: #fff; font-size: 12px;}
	#footer ul#bottomnav {float: right;}
		#footer ul#bottomnav li {float: left; margin-left: 3px; color: #fff;}
			#footer ul#bottomnav li a {float: left; color: #fff; margin-right: 3px;}
	#footer h5#trade {margin-top: 15px; font-size: 9px; color: #333333; text-align: center; clear: both;}

/**Some general classes - Helpers **/

p.more {float: right; margin: 0px; text-align: left; padding: 0px;}
p.more a {color: #fff; background:url(../images/bg/more.gif) top left no-repeat; width: 110px; line-height: 28px; height: 30px; display: block; padding: 0px 0px 0px 8px;}
#about p.more {margin-top: 60px;}
.img-right {float: right;}
.more-text {float: right; margin: 0px; text-align: left; padding: 0px;}
.nomargin {margin: 0px !important;}
.more-text a {color: #333333; text-decoration: underline;}
.img-left{float: left;}
.clear { clear: both;}
.uline { text-decoration: underline; }
.right {float: right;}
.left {float: left;}
.first {border-left: 0px !important;}
.last {padding-right: 0px !important; margin-right: 0px !important; border-right: 0px !important;}
.last-bottom {border-bottom: 0px !important;}
/**Clearfix Hack**/
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */