@charset "UTF-8";
/* CSS Document */

/*--------------  Global  ----------------*/

@import url(fontface.css) all;




* {
	margin: 0;
	padding: 0;
}

body {
	font: 12px/1.5 Arial, "Helvetica Neue", Helvetica, Verdana, sans-serif;
	color:#666;
}

a img {
	border: 0;
	
}

a
{
  outline: none;
}



	/*-------  floating and clearing  ---------*/
	.floatR {
		float: right;
	}
	
	.floatL {
		float:left;
	}
	.clearB {
		clear: both;
	}

	/*------margins  --------------*/
	.marginB_20 {
		margin-bottom: 20px; 
	}
	.marginT_20 {
		margin-top: 20px;
	}
	.marginL_20 {
		margin-left: 20px;
	}
	.marginR_20 {
		margin-right: 20px;
	}
	
	.marginB_15 {
		margin-bottom: 15px; 
	}
	.marginT_15 {
		margin-top: 15px;
	}
	.marginL_15 {
		margin-left: 15px;
	}
	.marginR_15 {
		margin-right: 15px;
	}
	
	.marginB_10 {
		margin-bottom: 10px; 
	}
	.marginT_10 {
		margin-top: 10px;
	}
	.marginL_10 {
		margin-left: 10px;
	}
	.marginR_10 {
		margin-right: 10px;
	}
	
	.marginB_5 {
		margin-bottom: 5px; 
	}
	.marginT_5 {
		margin-top: 5px;
	}
	.marginL_5 {
		margin-left: 5px;
	}
	.marginR_5 {
		margin-right: 5px;
	}
	
/*---------------  typography  ------------------*/


	/*-------- headings -----------*/
	h1 {
		font-size:;
		color:#;
	}
	
	h2 {
		font-size:;
		color:;
		font-weight:;
		
	}
	
	h3 {
		font-size:;
		color:#;
	}
	
	
	/*-------- paragraphs -----------*/
	
	p {
		margin-bottom: 10px;
		letter-spacing: .1px;
	}
	
	#main p {
		line-height: 1.8;
	}
	
	/*-------- lists -----------*/
	
	ul.textindent {
		position: relative;
		left: 12px;
		margin-bottom: 10px;
		width: 363px; /* to keep the text aligned below the bullets, we need to move the list to the right; to prevent it to spill out of the div, we have to set the width again (2col width - 12px = 363px) */
	}

	ul {
		margin:0;
		padding:0;
		list-style-type: none;
	}
	
	ul.bullet_list li {
		margin:0 0 5px 0;
		padding:0;
		list-style-type: none;
		background: url(../images/global/list_bullet.png) no-repeat 0 50%;
		padding-left:12px;
	}
	
	/*-------- colors -----------*/
	
	.red {
		color: #c00;
	}
	
	.yellow {
		color:#fcf8ce;
	}
	
	.light_grey {
		color:#B7B9BC;
	}
	
	.grey {
		color:#666;
	}
	.dark_grey {
		color:#333;
	}
	/*-------- links -----------*/
	
	a:link, a:visited {
		color:#333;
		text-decoration:none;
		background-color: #fcf8ce;
	}
	
	a:hover, a:active {
		color:#333;
		text-decoration:none;
/*		background-color:#F0E9A5;
*/		background-color:#ff9;
	}
	
	
	/*-------- images -----------*/
	
	img.border {
		border: thin #ccc solid;
	}
	
	
/*---------------  structure  ------------------*/
#wrapper {
	margin: 0 auto;
	width: 960px;
	background:url(../images/wrapperBG.png) repeat-y;
}
	#top {
		height: 100px;
		margin-left:18px;
		background:url(../images/global/top_bg.png) no-repeat top left;
	}
	
#wrapper #top.bg_email { background:url(../emails/images/top_bg_email.png) no-repeat bottom right;}	
		
		#top #logo {
			width: 210px;
			height:96px;
			float:left;
		}
		
		#top #logo_home {
			width: 210px;
			height:96px;
			float:left;
			background: url(../images/global/menu/inqbase_logo.png) bottom left no-repeat;
		}
		
		#top #logo_lp {
			width: 210px;
			height:96px;
			float:left;
			background: url(../images/global/menu/inqbase_logo.png) top left no-repeat;
		}
		
		
		#top a:link #logo, #top a:visited #logo {
			background: url(../images/global/menu/inqbase_logo.png) bottom left no-repeat;
		}

		#top a:hover #logo, #top a:active #logo {
			background: url(../images/global/menu/inqbase_logo.png) top left no-repeat;
		}
		
			#top #logo h1, #top #blog p, #top #logo_home h1, #top #logo_lp h1 {
				position: absolute;
				left: -9999px;
			}
		
		#top #blog {
			float: left;
			margin: 0 0 0 130px;	
			height: 90px;
			width: 125px;	
		}
		
		/* link to blog */
	 	#top a:link #blog, #top a:visited #blog {
			background: url(../images/global/menu/visit_blog.png) bottom left no-repeat;
		}

		#top a:hover #blog, #top a:active #blog {
			background: url(../images/global/menu/visit_blog.png) top left no-repeat;
		} 
		
		#top #contact {
			width: 210px;
			height:90px;
			float:left;
			margin-left: 30px;
		}
		
		#top a:link #contact, #top a:visited #contact {
			background: url(../images/global/menu/contact.png) bottom left no-repeat;
		}

		#top a:hover #contact, #top a:active #contact {
			background: url(../images/global/menu/contact.png) top left no-repeat;
		}
		
			#top #contact p {
				position:absolute;
				left:-9999px;
			}
		
		#top #growth_engineering {
			height:96px;
			width: 200px;
			float:right;
			margin-right: -10px;
		}
		
		#top a:link #growth_engineering, #top a:visited #growth_engineering {
			background:url(../images/global/menu/growth_engineering.png) bottom left no-repeat;
		}
		#top a:hover #growth_engineering, #top a:active #growth_engineering {
			background:url(../images/global/menu/growth_engineering.png) top left no-repeat;
		}
			
			#top #growth_engineering p {
				font-size: 10px;
				color:#666;
				margin: 55px 75px 0 0;
				float: right;
				
			}
			
		
	/*-------------- menu ---------------*/
	
	#nav {
		position: relative;
		z-index:30;
		margin-bottom:0;
		padding-bottom:0;
	}
	
	
	#menu {
		clear:both;
		margin: 0;
		padding: 0;
		z-index: 30;
		clear:both;
		position: relative;
		font-size: 11px;
	}

	ul#menu, ul#menu ul {
		padding: 0;
		margin: 0;
		list-style: none;
		line-height:1.5;
		width: 925px;
		cursor:pointer;
		z-index:30;
	}
	
	#nav a, #menu a {
		cursor:pointer;
	}
	
	ul#menu li.header {
		margin-top: 5px;
	}

		ul#menu li#menu_first { /* top level of the menu */
			padding: 25px 0px 0 30px;
			background: url(../images/global/menu/inqbase_menubar2.png) no-repeat top left;
			height: 50px;
			width: 935px;
		}
		ul#menu li {
			position: relative;
			width: 925px;
		}

/* first menu item - the one that appears in the menu bar i.e. "inqbase" on the home page */

#menu li#menu_first>a {
	display: block;
	width: 925px;
	padding:15px 0 0 15px;
	margin-left:-15px;
	margin-top:-15px;
	margin-bottom:0;
	color: #c00;
	text-decoration: none;
	background: none;
	
	
	}
	
	#menu li#menu_first a:link, #menu li#menu_first a:visited {
		text-decoration: none;
		color:#c00;
		cursor: pointer;
		background: none;


	}
	
	#menu li#menu_first a:hover, #menu li#menu_first a:active {
		text-decoration: none;
		color:#c00;
		background: none;
		cursor: pointer;

	}

/* end of first_menu style

submenu */

#menu div  {	
	position: absolute;
	width: 925px;   /* 925+12 of negative margin */
	visibility: hidden;
	margin: 8px 0 0 -12px;
	padding: 8px 0 5px 12px;
	background: url(../images/global/menu/menu_bg.png) top left repeat-x;
	}


	
#menu li ul a {
	display: block;
	padding: 4px 10px;
	white-space: nowrap;
	color: #666;
	text-decoration: none;
	padding-left: 10px;
	cursor: pointer;
	
	}

	#menu ul#submenu li a:link, #menu ul#submenu li a:visited {
		text-decoration: none;
		color:#999;
	}
	
	#menu ul#submenu li a:hover, #menu ul#submenu li a:active {
		text-decoration: none;
		color: #fff;
		background-color: #c00;
		background-position: left;
		width: 905px;
	}
	
#menu ul li ul li.last {
padding-bottom:10px;	
	}	

				/* ----- end menu css --------- */
	
	img#learnmore {
		position: absolute;
		left: 797px;
		top: 70px;
	}

	
	#content_wrapper {
		margin: 0 0 0 18px;
		padding:0;
/* 		background: url(../images/global/separator_Hor_red.png) no-repeat top left;
 */	}
			
		#main {
			width: 940px;
			height: auto;
			display: inline; /* to fix a bug in IE6 which otherwise doubles the margin on the left hand side */
			
		}
		
		#main h1 {
			font-family: Lane-NarrowRegular, "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; 
			letter-spacing:-0.01em;
			font-size: 60px;
			line-height:1;
 			font-weight: 100;
 			color: #c00;
			margin-top: 40px;
			margin-bottom:20px;letter-spacing:-20;

		}
		
			#main .post h1 {
				margin-top: 20px;
			}
			
			#main div.post {
		
			}
			
			#main .post img.large {
				
				border:1px solid #999999;
				float:left;
			}
			
			#main .post a.image_lk:link, #main .post a.image_lk:visited, #main .post a.image_lk:hover, #main .post a.image_lk:active {
				background-color:#fff;
				cursor:pointer;
			} 
			#main .post a.image_lk:hover img, #main .post a.image_lk:active img {
				opacity:0.8;filter:alpha(opacity=80);
				background-color:none;
			}
			
			
			.gallery {margin:40px 0; clear:both;}
			
				.gallery .gallery_click {
					width: 82px;
					height:172px;
					background-image:url(../images/global/gallery_click.png);
					float:left;
					margin-top:70px;
				}

			.gallery .thumb {
				width: 150px;
				float: right;
			}
				.gallery .thumb img { margin-bottom:25px; border:1px solid #999;}
				.gallery .thumb img.last {margin-bottom:0px;}
			
		
		
		#main.home {
			width: 700px;
			height: auto;
			padding-right: 20px;
			margin-top:20px;
			float: left;
			display: inline; /* to fix a bug in IE6 which otherwise doubles the margin on the left hand side */
		}
		
		#main.home h1 {
			font-family: "Lane-NarrowRegular", "helvetica neue", sans-serif;
			color:#999;
 			font-weight: 100;
			font-size:40px;
			line-height:1.5;
			margin-top:50px;
			letter-spacing:-0.01em;


		}
		
		
	
		#intro {
			float:left;
			margin-bottom: 20px;
			padding-bottom:20px;
			background:url(../images/global/HL_artwork-separator.png) no-repeat bottom left;
		}	
		
			#intro_lp {
			float:left;
			margin-bottom: 20px;
			padding-bottom:20px;
		}	
			.post {
				width:940px;
				margin-bottom:10px;
				padding-bottom:20px;
				background:url(../images/global/HL_artwork-separator.png) no-repeat bottom left;
				float:left;
			}
		
		
		#col {
			width: 220px;
			float: right;
			margin-top: 120px;
		}
		
		#col.home {
/* 			background: url(../images/global/home/vertical_separator.png) bottom left no-repeat;*/	
			margin-top: 60px; 
	}	
		
		.team_col {
			width: 280px;
			float: left;
			margin-right: 50px;	
				
		}
		
		.team_col_last {
			width: 280px;
			float: left;
			margin-right:0;
		}
		
		.team_col img, .team_col_last img {
			margin-bottom: 20px;
		}
		
			#col p, #col h2  {
				margin: 10px;
				padding-bottom: 10px;
				border-bottom: #d8d8d8 dashed thin; 
			}
			#col a#twitter-link {
				margin: 0 10px;
			}
			
			#col #twitter_div ul {
				margin: 10px;
				font-style: italic;
			}
			
			
			#col p.last {
				border-bottom: none;
			}
		
			#twitter_div img {
				margin-top: 20px;
			}
			
			#twitter_div p {
				border-bottom:none;
			}
			
			
			#col ul.twitter_update_list {
				font-style: italic;
			}
		
	#footer {
		clear: both;
		width: 940px;
		margin: 5px 0 0 20px; 
	}
	

	
		#footer #arrows {
			height: 30px;
			margin-bottom:15px;
		}
		
			#footer #arrows .goto {
				float: right;
				border:0;
				width:200px;
			}
			
			#footer #arrows a {
				background:none;
				cursor: pointer;
			}
			
			#footer #arrows #gototop {
				float:left;
				height:30px;
				width:40px;
			}
			
			#footer a:link #gototop, #footer a:visited #gototop {
				background:url(../images/global/footer/top.png) bottom right;
			}
			
			#footer a:hover #gototop, #footer a:active #gototop {
				background:url(../images/global/footer/top.png) top right;
			}
			
			#growth, #team, #clients, #contact, #advertising, #brand, #corporate, #strategy, #web, #edm, #research, #tvc, #gototop, #hp {height: 30px;}
			
			/* -- */
				#footer .goto a:link #growth, #footer .goto a:visited #growth {
					background:url(../images/global/footer/goto-growth.png) bottom left;
				}
				
				#footer .goto a:hover #growth, #footer .goto a:active #growth {
					background:url(../images/global/footer/goto-growth.png) top left;
				}
				
			/* -- */
				#footer .goto a:link #team, #footer .goto a:visited #team {
					background:url(../images/global/footer/goto-team.png) bottom left;
				}
				
				#footer .goto a:hover #team, #footer .goto a:active #team {
					background:url(../images/global/footer/goto-team.png) top left;
				}
				
			/* -- */
				#footer .goto a:link #clients, #footer .goto a:visited #clients {
					background:url(../images/global/footer/goto-clients.png) bottom left;
				}
				
				#footer .goto a:hover #clients, #footer .goto a:active #clients {
					background:url(../images/global/footer/goto-clients.png) top left;
				}
				
			/* -- */
				#footer .goto a:link #contact, #footer .goto a:visited #contact {
					background:url(../images/global/footer/goto-contact.png) bottom left;
				}
				
				#footer .goto a:hover #contact, #footer .goto a:active #contact {
					background:url(../images/global/footer/goto-contact.png) top left;
				}
				
			/* -- */
				#footer .goto a:link #advertising, #footer .goto a:visited #advertising {
					background:url(../images/global/footer/goto-advertising.png) bottom left;
				}
				
				#footer .goto a:hover #advertising, #footer .goto a:active #advertising {
					background:url(../images/global/footer/goto-advertising.png) top left;
				}

			/* -- */
				#footer .goto a:link #brand, #footer .goto a:visited #brand {
					background:url(../images/global/footer/goto-brand.png) bottom left;
				}
				
				#footer .goto a:hover #brand, #footer .goto a:active #brand {
					background:url(../images/global/footer/goto-brand.png) top left;
				}

			/* -- */
				#footer .goto a:link #corporate, #footer .goto a:visited #corporate {
					background:url(../images/global/footer/goto-corporate.png) bottom left;
				}
				
				#footer .goto a:hover #corporate, #footer .goto a:active #corporate {
					background:url(../images/global/footer/goto-corporate.png) top left;
				}
				
			/* -- */
				#footer .goto a:link #strategy, #footer .goto a:visited #strategy {
					background:url(../images/global/footer/goto-strategy.png) bottom left;
				}
				
				#footer .goto a:hover #strategy, #footer .goto a:active #strategy {
					background:url(../images/global/footer/goto-strategy.png) top left;
				}

			/* -- */
				#footer .goto a:link #web, #footer .goto a:visited #web {
					background:url(../images/global/footer/goto-web.png) bottom left;
				}
				
				#footer .goto a:hover #web, #footer .goto a:active #web {
					background:url(../images/global/footer/goto-web.png) top left;
				}

			/* -- */
				#footer .goto a:link #edm, #footer .goto a:visited #edm {
					background:url(../images/global/footer/goto-edm.png) bottom left;
				}
				
				#footer .goto a:hover #edm, #footer .goto a:active #edm {
					background:url(../images/global/footer/goto-edm.png) top left;
				}
	
			/* -- */
				#footer .goto a:link #tvc, #footer .goto a:visited #tvc {
					background:url(../images/global/footer/goto-tvc.png) bottom left;
				}
				
				#footer .goto a:hover #tvc, #footer .goto a:active #tvc {
					background:url(../images/global/footer/goto-tvc.png) top left;
				}
	
			/* -- */
				#footer .goto a:link #research, #footer .goto a:visited #research {
					background:url(../images/global/footer/goto-research.png) bottom left;
				}
				
				#footer .goto a:hover #research, #footer .goto a:active #research {
					background:url(../images/global/footer/goto-research.png) top left;
				}

			/* -- */
				#footer .goto a:link #hp, #footer .goto a:visited #hp {
					background:url(../images/global/footer/goto-hp.png) bottom left;
				}
				
				#footer .goto a:hover #hp, #footer .goto a:active #hp {
					background:url(../images/global/footer/goto-hp.png) top left;
				}
		#footer #copyr {
		
				background: url(../images/global/menu/separator_Hor_grey.png) top left no-repeat;
				padding-top:10px;
		}
		
			#footer #copyr p {
				color:#999;
				font-size: 10px;
				text-align: right;
			}




#clients-showcase {
	z-index:10;
}

#clients-salad {
	z-index:2;
}
	
	
	
	

	/*------  column layout  --------------*/

	.skinny_col {
		width: 220px;
	}
	.wide_col {
		width: 700px;
	}
	.half_col {
		width: 460px;
	}

	/*------  horizontal lines  --------------*/
	
	.hl {
		border-bottom: thin dashed #ccc;
		width: 100%;
		margin-bottom: 10px;
	}




	/*------  address  --------------*/
	
	address {
		font-style:normal;
	}
	
	.form p {
		font-size: 10px;
	}

	
	/*------  showreel  --------------*/


	.video {
		border:#CCCCCC solid thin;
	}
	
	.video_thumb {
		width: 240px;
		margin: 0 110px 10px 0; float:left;
	}
	
	.video_thumb_last {
		width: 240px;
		margin: 0 0 10px 0; float:right;
	}
	
	.video_thumb a {
		background:none; 
	}
	
	#main .video_thumb p, #main .video_thumb_last p {
		margin-top: 10px;
		line-height:1.4;
		
	}
	
	.video_thumb p a:link, .video_thumb p a:visited  {
		color:#333;
		text-decoration:none;
		background-color: #fcf8ce;
	}
		
	.video_thumb p a:hover, .video_thumb p a:active {
		color:#333;
		text-decoration:none;
/*		background-color:#F0E9A5;
*/		background-color:#ff9;
	}
	
	
	
	
	    object { outline:none; }

 
 /*  clients page - sliding stuff */
 
 
.clients_header {
	background:url(../images/clients/clients-click.png) no-repeat bottom right;
} 
#nav3 {
	height: 20px;
	padding:.8em 0;
	border-bottom: dotted thin #CDCBCF;
	text-transform:lowercase;
} 
#nav3 li {	
	display: inline;
	list-style: none;
	float: left;
	display: block;
	margin: .3em 2em 0 0;
}

#nav3 li a {
	padding: 0 0.3em;
}

ul.navigation a:link, ul.navigation a:visited {
	text-decoration: none;
	color: #999;
}
ul.navigation a:hover {
	color:#333;
}

ul.navigation a.selected {
	color:#333;
}

ul.navigation a:focus {
    outline: none;
}

/*setting the "here" colour*/
#master #nav3 ul li.here a {
	color: #333; 
}


/*SLIDING STUFF + L&R ARROWS 
/////////////////////////////*/
.space {
 height: 25px;
}

#slider {
	margin: 0 auto;
	position: relative;
}

.scroll {
	width: 940px;
	height: 420px;
	overflow: auto;
	overflow-x: hidden;
	clear:left;
	position: relative;/*it fixes a bug in IE, which overwise doesn't display overflow correct*/
}

.scrollContainer div.panel {
	width: 940px;
	height: 420px;
}




.scroll table img {
	padding: 1.5em 0;
}

.scroll table {
	margin-left:10px;
	float:left;
}

.scroll .skinny_col {

	margin-top:20px;
	}

	
/* email page */

table.email p, table.email h1, table.email h2 {
	font-size:12px; font-family: Arial, sans-serif; color:#666;

}	

table.email p, ul {
	line-height:1.5;
	margin:0px 0 5px 0;
}

#main table.email p.tips {
	line-height:1.2;
}

table.email p.cta, table.email p.cta a {
	font-size:18px;
}

form p { margin-bottom:3px;  font-size:11px;}

form {margin-top:30px; padding-top:20px; border-top: dashed thin #999999;}