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

body {font-family: Arial, Helvetica, sans-serif; font-size: 1em; color: #FFF; background-color: #000; margin: 0px; padding: 0px; background-image:url(/images/page-bg-short.png); background-repeat:repeat-x; background-position:top; line-height:115%; }

.tall {background-image:url(/images/bg-header-tall.png); background-repeat:repeat-x; background-position:top;}

#wrap { margin:auto; width:980px; }

/* Typography ------------------------------------------------- */ 
p  {
	padding: 0px;
	font-size: .7em;
	color:#fefefe;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px; 
}
h1 {
	padding: 0px;
	font-size: 2em;
	font-size:21px;
	color:#00aeef;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	text-transform:uppercase;
}
h2 {	padding: 0px;
	font-size: 1.6em;
	font-size:14px;
	color:#00aeef;
	font-weight: bold;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	text-transform:uppercase;

}
h3 { margin: 0px 0px .5em 0px; padding: 0px; font-size: .85em; color:#00aeef;}
h4 { margin: 0px 0px .5em 0px; padding: 0px; font-size: .75em; color:#00aeef;}
.smaller {margin: 0px 0px 32px 0px; padding: 0px; font-size: .6em; color:#cccccc;}

a { color:#00AEEF; text-decoration:none;  }
#content p a  { border-bottom:1px dotted #a3a3a3; padding-bottom:3px; }
#content p a:hover { color:#a3a3a3; border-bottom:1px dotted #00AEEF; }

#content li { font-size:.7em; }

dl, dt, dd { padding:0; margin:0; }

.intro_text { color:#00aeef; font-size:20px; line-height:200%; }


/* Home ------------------------------------------------- */ 

#home_feature { position:relative; padding:0; margin:0; list-style-type:none; background:none; height:400px; }

.home_slide { position:absolute; left:0; top:0 }

#home_feature_description { 
	position:absolute; 
	bottom:18px; 
	left:13px; 
	width:350px; 
	min-height:94px; 
	background-color:#000; 
	padding:16px 15px 15px 15px;
	/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);  
	opacity:0.8;*/
	background:url(/images/semi-trans-repeater.png);
	-moz-border-radius:3px; 
	}
#home_feature_description p { margin-bottom:33px; }

	
#home_feature_description h2 { font-size:20px; text-transform:none; margin-bottom:4px; color:#fff; }
#home_feature_switcher { width:242px; height:21px; position:absolute; background:url(/images/home-change-project-bg.png) no-repeat; bottom:15px; } 
#home_feature_switcher #screenbtn { margin:-6px 0 0 87px; padding:0; }
#home_feature_switcher #screenbtn .screendot { width:19px; }



#home_feature #view_proj { position:absolute; width:97px; height:21px; right:13px; bottom:15px; }
#home_feature #view_proj a { background:url(/images/btn-viewproject.png) no-repeat; display:block; text-indent:-9999px; height:21px; }


/* Cufon headings */

/*
.cufon-active h1 { font-size:30px; }
.cufon-active h2 { font-size:18px; }
.cufon-active h3 { font-size:15px; }
*/



.logo { margin: 0 0 0 30px;}

.herostatement { width: 444px; background:url(/images/herotext-bg.png) no-repeat; height: 140px; margin: 12px 12px 12px 0; float:left; padding: 20px;}
.news { width: 196px; background-image:url(/images/news-bg.png); height: 110px; margin: 12px 12px 12px 0; float:left; padding: 50px 20px 20px 20px;}
.recentwork { width: 236px; background-image:url(/images/recentwork-bg.png); background-color:#999; padding-top:30px; height: 150px; margin: 12px 0px 12px 0; float:left; }

#thumb-gallery { width:980px; /*margin-top:74px;*/ margin-bottom:25px; clear:both; float:left; margin-top:20px; }

.workthumbs {
	float:left;
	width:236px;ro
	height: 193px;
	margin-top: 0px;
	margin-right: 12px;
	margin-bottom: 12px;
	margin-left: 0;
	overflow: hidden;
	position:relative;
}
.workthumbs:last-child { margin-bottom:30px; }

.workthumbs:hover { cursor:pointer; }

.workthumbs a { position:relative; overflow:hidden; display:block; width:236px; height:193px;  }
.workthumbs img { position:absolute; /*width:236px; height:190px;*/ overflow:hidden; top:0px; left:0; }
.curves { width:236px; height:193px; display:block; position:absolute; left:0; top:0; z-index:200; background:url(/images/curves.png) no-repeat; } 

.workthumbs  a:hover{background-position:0px -22px;} 


.last { margin:0px 0px 0px 0px;}

#menubg{ height:29px; background-image:url(/images/menu-bg.png); margin: 0 auto 40px auto; padding:0; margin-top:-2px; }

#header_tall {height: 131px; width: 980px; margin: 0 auto 40px auto; padding:0;}
#header {height: 102px; width: 980px; margin: 0 auto 32px auto; padding:0; background-image:url(/images/blueline.png);}

#content {width: 980px; margin: 0 auto 0 auto; position:relative;}

#rightcolumn {float:right; padding-bottom:40px;}
#right_col { float:right; width:240px; }
#leftcolumn {float:left; margin: 0 32px 40px 0; width:712px; }
.contactcolumn {width:236px;}
#leftcolumn.aboutcolumn {/*width:209px;*/ width:236px; margin-right:0; }
#rightcolumn.aboutcolumn {/*width:209px;*/ width:736px; margin-right:0; }
.couchimage {margin: 0 0 32px 0;}


#workimage {float:left; margin: 0 32px 30px 0;}
#worktext { width:240px;}
#worktext p { margin-bottom:22px; }
	#right_col h3 { text-transform:uppercase; }
.divide {color: #000;}



/* tags across the top */

ul#tags { margin: 0px 0px 0px 0px; list-style-type:none; padding:0; /*position:absolute; top:-41px; left:0;*/ }
ul#tags li { padding:0; margin: 0 2px 2px 0; float:left; line-height:normal; }
ul#tags li a { 
	background-color:#242424; 
	color:#fff; 
	font-size:10px; 
	text-decoration:none; 
	padding:6px; 
	line-height:normal; 
	display:block;
	-moz-border-radius: 2px;
    -webkit-border-radius: 2px;
	border-radius:2px;
	}
ul#tags li a:hover { background-color:#3c3c3c; } 

ul#tags li.active a { background-color:#00aeef; }


/* tags in sidebar */

ul#services { margin: 0px 0px 32px 0px; list-style-type:none; padding:0; }
ul#services li { padding:0; margin: 0 2px 2px 0; float:left; line-height:normal; }
ul#services li a { 
	background-color:#242424; 
	color:#fff; 
	font-size:10px; 
	text-decoration:none; 
	padding:6px; 
	line-height:normal; 
	display:block;
	-moz-border-radius: 2px;
    -webkit-border-radius: 2px;
	border-radius:2px;
	}
ul#services li a:hover { background-color:#3c3c3c; } 

#changescreens { background-image:url(/images/change-screensbg.png); padding:0px; width:238px; height:35px; margin: 0px 0px 30px 0px;}




/* NAVS ------------------------------------------------- */


/* Main Nav */
#nav { height:102px; margin:0px 17px 0px 0px; float:right;}
#nav ul {margin:0px;padding:0px; }
#nav li {display:inline; margin:0px 0px 0px 0px; float:left;}
#nav li a, #header li.active {text-indent:-9999px; display:inline; overflow:hidden; float:left;}
#nav li a:hover{background-position:0px -102px;} 
#nav .active {background-position:0px -204px;}
	
.nav_home { background-image:url(/images/navigation-home.png); height:101px; width:76px;}
.nav_about { background-image:url(/images/navigation-about.png); height:101px; width:81px;}
.nav_ourwork { background-image:url(/images/navigation-ourwork.png); height:101px; width:111px; }
.nav_contact { background-image:url(/images/navigation-contact.png); height:101px; width:98px; }

/* About Us 2ndlevel */
#aboutnav { height:29px; margin:0px 0px 0px -40px; float:left;}
#aboutnav  ul {margin:0px;padding:0px; }
#aboutnav  li {display:inline; margin:0px 0px 0px 0px; float:left;}
#aboutnav  li a, #header li.active {text-indent:-9999px; display:inline; overflow:hidden; float:left;}
#aboutnav  li a:hover{background-position:0px -29px;} 
#aboutnav .active, #aboutnav .active:hover {background-position:0px -58px;}

.navabout_profile { background-image:url(/images/nav-about-profile.png); height:29px; width:70px; }
.navabout_process { background-image:url(/images/nav-about-process.png); height:29px; width:75px;}
.navabout_ourteam { background-image:url(/images/nav-about-ourteam.png); height:29px; width:80px;}
.navabout_clients { background-image:url(/images/nav-about-clients.png); height:29px; width:70px; }
.navabout_brands { background-image:url(/images/nav-about-brands.png); height:29px; width:66px; }
.navabout_employment { background-image:url(/images/nav-about-employment.png); height:29px; width:98px; }
.navabout_press { background-image:url(/images/nav-about-press.png); height:29px; width:54px; }

/* Recent Links List on homepage */
.menu {margin:0; padding:0; width:236px; list-style:none; /*font-size: .7em;*/ color:#FFF;}
.menu li{padding:0; margin:0 0 0px 0; height:29px; display:block; border-top: #000 solid 1px; color:#FFF; }
.menu li a{text-align:left; height:29px; padding:0px 12px; display:block; background:url(/images/home-list-bg.png) 0px 0px no-repeat; text-decoration:none;}
.menu li a:hover{background:url(/images/home-list-bg.png) 0px -29px no-repeat; color:#00aeef;}
.menu li a.active, .menu li a.active:hover{background:url(/images/home-list-bg.png) 0px -29px no-repeat; color:#FFF;}
.menu li a span{line-height:29px; color:#FFF;}
.menu bottom {background:url(/images/home-list-bottom-bg.png);}

/* 3rd Level Nav Vertical */
.menunav {margin:0; padding:0; width:236px; list-style:none; font-size: .7em; float:left;}
.menunav li { padding:0; margin:0 0 0px 0; height:29px; display:block; border-top: #000 solid 1px; }
.menunav li a{text-align:left; height:29px; padding:0px 12px; display:block; color:#fff; background:url(/images/nav-side.png) 0px 0px no-repeat; text-decoration:none;}
.menunav li a:hover{background:url(/images/nav-side.png) 0px -29px no-repeat; color:#000; }
.menunav li a.active, .menu li a.active:hover{background:url(/images/nav-side.png) 0px -58px no-repeat; color:#FFF;}
.menunav li a span{line-height:29px; font-size:12px;}
.menunav bottom {background:url(/images/home-list-bottom-bg.png);}




/* Btns ------------------------------------------------------- */
.visit {margin-right:32px;}

.btn{ height:21px; margin:0px 0px 0px 0px;}
.btn ul {margin:0px;padding:0px; }
.btn li {display:inline; margin:0px 0px 0px 0px;}
.btn li a, #header li.active {text-indent:-9999px; display:inline; overflow:hidden; float:left;}
.btn a:hover {background-position:0px -21px;}
div.btn a { text-indent:-9999px; display:block; }
div.btn a:hover { background-position:0 -21px; } 

#btnVisit { float:left; margin-right:18px; }
#btnVisit a { background-image:url(/images/btn-view-website.png); height:21px; width:99px; }

#btnVisit.iphone { margin-bottom:12px; }
#btnVisit.iphone a { background-image:url(/images/btn-app-store.png); height:21px; width:173px;  }




#btnEmail { float:left; }
#btnEmail a { background-image: url(/images/btn-email-page.png); height:21px; width:118px;  }
#btnAppStore a { background-image:url(/images/btn-app-store.png); width:173px; clear:both; }

#screenbtn { height:34px; margin:0px 0px 0px 70px; float:left;}
#screenbtn ul { margin:0px;padding:0px; }
#screenbtn li { display:inline; margin:0px 0px 0px 0px; float:left;}
#screenbtn li a, #header li.active { text-indent:-9999px; display:inline; overflow:hidden; float:left;}
#screenbtn li a:hover {background-position:0px -34px;} 
#screenbtn  .active {background-position:0px -68px;}

.screendot { background-image: url(/images/btn-screenchange.png); height:34px; width:24px;}
.screendotend { background-image: url(/images/btn-screenchange-start.png); height:30px; width:24px;}
.screendotstart { background-image: url(/images/btn-screenchange-start.png); height:34px; width:24px;}

#contact_options { float:right; list-style-type:none; margin-top:22px; }
#contact_options li { float:left; margin-left:6px; }
#contact_options a { text-indent:-9999px; display:block; width:21px; height:21px; }
#contact_options a:hover { background-position:0 -21px; }
	#contact_facebook a { background:url(/images/btn-footer-facebook.png) no-repeat; }
	#contact_email a { background:url(/images/btn-footer-email.png) no-repeat; }
	#contact_twitter a { background:url(/images/btn-footer-twitter.png) no-repeat; }


/*preload classes*/ .svw {width: 50px; height: 20px; background: #fff;} .svw ul {position: relative; left: -999em;} /*core classes*/ .stripViewer { position: relative; overflow: hidden; border: 5px solid #ff0000; margin: 0 0 1px 0; } .stripViewer ul { /* this is your UL of images */ margin: 0; padding: 0; position: relative; left: 0; top: 0; width: 1%; list-style-type: none; } .stripViewer ul li { float:left; } .stripTransmitter { overflow: auto; width: 1%; } .stripTransmitter ul { margin: 0; padding: 0; position: relative; list-style-type: none; } .stripTransmitter ul li{ width: 20px; float:left; margin: 0 1px 1px 0; } .stripTransmitter a{ font: bold 10px Verdana, Arial; text-align: center; line-height: 22px; background: #ff0000; color: #fff; text-decoration: none; display: block; } .stripTransmitter a:hover, a.current{ background: #fff; color: #ff0000; } /*tooltips formatting*/ .tooltip { padding: 0.5em; background: #fff; color: #000; border: 5px solid #dedede; } 




/* PORTFOLIO ------------------------------------------------- */

#portfolio_filter { height:29px; margin:-69px 0 34px 0; padding:0;  }
#portfolio_filter li   { height:29px; text-indent:-9999px; list-style:none; float:left; padding:0; margin:0;} 
#portfolio_filter li a { background-repeat:no-repeat; display:block; height:29px; }
	#category_1 a { width:164px; background:url(/images/filter-menu.png) 0 -29px; }
		#category_1 a:hover { width:164px; background:url(/images/filter-menu.png) 0 -87px; } 
	#category_2 a { width:167px; background:url(/images/filter-menu.png) -165px -29px; }
		#category_2 a:hover { width:167px; background:url(/images/filter-menu.png) -165px -87px; } 
	#category_3 a { background:url(/images/filter-menu.png) -332px -29px; width:95px; } 
		#category_3 a:hover { background:url(/images/filter-menu.png) -332px -87px; } 
	#category_4 a { background:url(/images/filter-menu.png) -426px -29px; width:133px; } 
		#category_4 a:hover { background:url(/images/filter-menu.png) -426px -87px;  } 
	#category_5 a { background:url(/images/filter-menu.png) -557px -29px; width:155px; } 
		#category_5 a:hover { background:url(/images/filter-menu.png) -557px -87px; } 
	#category_6 a { background:url(/images/filter-menu.png) -714px -29px; width:97px; } 
		#category_6 a:hover { background:url(/images/filter-menu.png) -714px -87px; } 
	#category_7 a { background:url(/images/filter-menu.png) -814px -29px; width:166px; } 
		#category_7 a:hover { background:url(/images/filter-menu.png) -814px -87px; }


h3.underlined { border-top:1px solid #383838; padding-top:15px; margin-bottom:12px; clear:both;  }


/* TEAM ------------------------------------------------- */

#slideshow { list-style-type:none; padding:0; margin:0; float:right; position:relative; margin-left:30px; margin-bottom:30px; }
#slideshow li { padding:0; margin:0; position:absolute; }

.profile_wrap { position:relative; width:738px; }

#contact_info { position:absolute; right:0px; top:24px; width:202px; }
#contact_info dt { background:url(/images/contact-name-bg.png) no-repeat; width:194px; height:19px; padding-left:27px; padding-top:2px; padding-left:8px; color:#fff; font-size:11px; }
.contact_ph { background:url(/images/contact-phonel-bg.png) no-repeat; width:175px; height:21px; padding-left:27px; color:#000; font-size:10px; }
.contact_email { background:url(/images/contact-email-bg.png) no-repeat; width:175px; height:19px; padding-left:27px; padding-bottom:2px; display:block; margin:1px 0; }
.contact_email a { color:#000; font-size:10px; text-decoration:none; display:block; margin-bottom:2px; }

#profile_content { padding:0px; margin-top:21px; }

.profile_wrap h1 { text-transform:uppercase; font-size:27px;  }
h1 strong.title { color: #5a5a5a; text-transform:uppercase; font-weight:normal; }

dl.profile_list { float:left; padding:8px 13px; margin-bottom:1px; width:97%; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius:2px; }
dl.profile_list dt { float:left; font-size:12px; color:#00aeef; margin-right:5px; margin-left:15px; text-transform:uppercase; }
dl.profile_list dt:first-child { margin-left:0; }
dl.profile_list span { display:block; float:left; padding:0 7px 0 2px; }
dl.profile_list dd { float:left; font-size:.7em; margin-right:5px; }
dl.profile_list#prof_list_1 { background-color:#00212D; }
dl.profile_list#prof_list_1 span { color:#00aeef; }

dl.profile_list#prof_list_2 { background-color:#161616; margin-top:11px; }



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

#clients_holder { float:right; padding-bottom:40px; width:730px; }
#clients_holder.brands_list { float:none; padding-bottom:40px; width:902px; margin:auto; }


		

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

.slideshow { height:370px; }
.tel { background:url(/images/phone-icon.png) no-repeat; padding-left:22px;  }
.mail { background:url(/images/mail-icon.png) no-repeat 0 3px;  margin-top:5px; }
.mail a { margin-left:22px; color:#78daff;  text-decoration:none; border-bottom:1px solid #78daff; padding-bottom:2px; display:block; padding-top:4px; }



/* PRESS ------------------------------------------------- */

.aboutcolumn h1 { font-size:24px; }
.news_item h2, .downloads h2 { color:#000; font-size:16px; }
.news_item h2 a { color:#000; }

.news_item h3, .downloads h3  { color:#fff; font-size:12px; }
.side_img_right { float:right; margin:0 0 20px 20px; }

.news_item { 
	width:206px; 
	height:142px;
	padding:15px;
	position:relative;
	margin-top:20px; 
	float:left;
	margin-right:12px;
	margin-bottom:12px;
	background-position:0 -172px;
	}
.news_item:hover { background-position:0 0; cursor:pointer; }

/* STORIES */
#NZI 			{ background-image:url(/images/btn-press-nzibusiness.png); }
#iphone_article { background-image:url(/images/btn-press-stuff.png); }


.news_date { position:absolute; bottom:1px; }

.downloads { background:url(/images/press-downloads-bg.png) no-repeat 0 -116px; padding:15px; width:206px; height:86px; margin-right:12px; margin-bottom:12px; float:left; position:relative; }
.downloads:hover { background:url(/images/press-downloads-bg.png) no-repeat 0 0; }
.downloads a { display:block; text-indent: -9999px; }
.downloads.no-right { margin-right:0; }

#logo_pack { position:absolute; left:18px; bottom:18px; background:url(/images/btn-download-logopack.png) no-repeat; width:100px; height:19px; }
#logo_pack:hover { left:18px; bottom:18px; background:url(/images/btn-download-logopack.png) no-repeat 0 -19px;  }

#low_res { position:absolute; left:18px; bottom:18px;  width:97px; height:19px; }
#low_res a { background:url(/images/btn-download-low-res.png) no-repeat; }
#low_res a:hover { background:url(/images/btn-download-low-res.png) no-repeat 0 -19px;  }

#high_res { position:absolute; right:18px; bottom:18px; background:url(/images/btn-download-high-res.png) no-repeat; width:97px; height:19px; }
#high_res a { background:url(/images/btn-download-high-res.png) no-repeat; }

#high_res:hover { background:url(/images/btn-download-high-res.png) no-repeat 0 -19px;  }


/*  Twitter Feed   */


#twitter_update_list span {
color: #ffffff;
font-size:11px;
}

#twitter_update_list li {
list-style-type: none;
padding-bottom:8px;
padding-top:6px;
border-bottom:dotted;
border-bottom-color:#666;
border-bottom-width:1px;
font-size:11px;
}

#twitter_update_list span a {
display: inline;
text-decoration:none;
font-size:11px;
}

#twitter_update_list span a:hover {
text-decoration: underline;
color: #ebebeb;
}



/* FOOTER ------------------------------------------------- */



html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#content {
	padding-bottom: 66px;}  /* must be same height as the footer */

#footer {
	position: relative;
	margin-top: -66px; /* negative value of footer height */
	height: 66px;
	clear:both;
	background-color:#161616;
	background:url(/images/footer-repeater.png) repeat-x; 
	} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

#footer_inner { width:980px; margin:auto; position:relative; }

#tel_number { width:115px; height:16px; position:absolute; left:0; top:23px; font-size:17px; }




/* TOOLS ------------------------------------------------- */

.clear { clear: both; }
.clearfix { zoom: 1; /* for IE7 */ }
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}
* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}
.accessibility {
	position: absolute;
	left: -999px;
	width: 900px;
	background: none;
	}