﻿/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, a,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, 
menu, nav, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  background-repeat:no-repeat;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display:block;
}

table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:top;}
blockquote:before, blockquote:after, q:before, q:after {content:"";} blockquote, q {quotes:"" "";} a img {border:none;outline:none;}

img { -ms-interpolation-mode:bicubic; }

/* end reset */

html.squeezed{
	min-height:100%;
	margin:0 0 1px 0;
	overflow-y:scroll;
}

html.squeezed body{
	background:none;
	height:100%;
}


h3{
	text-transform:uppercase;	
	color:#067BAC;
	font-size:2em;
	line-height: 1em;
	margin: 0 0 10px 0;
}

h2{
	text-transform:uppercase;	
	color:#067BAC;
	font-size:3em;
	line-height: 1em;
	font-weight:normal;
	margin:0 0 11px 0;
}

p{
	margin: 0 0 20px 0;
}

ul{
	padding:0 0 0 15px;
	margin:0 0 20px 0;
}

table{
	border-collapse:collapse;
	background-color:rgba(25,25,25,0.9);
    padding:16px 16px 16px 22px;
    margin:0 0 20px 0;
}

html.no-rgba table{
	background-color:#1A1B1B;
}

table td,
table th{
	border:1px solid #666;
	padding:2px 3px;
}

table th{
	background-color: rgba(18, 18, 84, 0.8);
	color:#fff;
	font-weight:bold;
	padding:6px 3px;
}

html.no-rgba table th{
	background-color: #16174C;
}

a{
	color:#294aaa;
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

.clearfix,
.clear
{
	clear: both;
}

.clearfix:after,.clear:after
{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.no-right-margin{
	margin-right:0!important;
}

.hide
{
	display:none;
}

.red{
	color:#d00000!important;
}

body{
	background-color:#fff;	
	font-family:arial;
	font-size:0.75em;
	color:#000;

	line-height:1.6666666em;
}

#page-container{
	width:80%;
	margin:0 auto;
}

header{
	height:120px;
	position:relative;
	z-index:1000;
	padding:0 0 0 0;
}

header h1{
	width:100%;
	height:100px;
	text-indent:-5000px;
	float:left;
	background-image:url(../images/northcotebanner.png);
	background-color: #000066;
	}


#logo a{
	position:absolute;
	width:180px;
	height:60px;
	text-indent:-5000px;
	left:0;
	top:0;
}

body#page1 header h1{
	width:240px;
	height:100px;
	text-indent:-5000px;
	float:left;
	background-image:url(../images/logo-northcote-home.gif);
}

body#page1 #logo a{
	position:absolute;
	width:240px;
	height:100px;
	text-indent:-5000px;
	left:0;
	top:0;
}

/****************
* MAIN MENU
****************/

header nav{
	float:right;
	height:60px;
	background-color:#121254;
	padding:0 17px 0 14px;
}

header nav ul{
	list-style-type:none;
}

header nav ul{
	padding:0;
	margin:0;
}

header nav ul li{
	float:left;
	padding:22px 3px 0 4px;
}

header nav ul li a{
	display:block;
	color:#fff;
	font-size:0.8333333em;
	text-decoration:none;
	text-transform:uppercase;
	padding:0 10px 0 10px;
	line-height:18px;
	-moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
}

header nav ul li.selectedl1 a,
header nav ul li.childselectedl1 a{	
	background-color:#3f3f74;
}

header nav ul li.first{
	padding-top:21px;	
}

header nav ul li li.first{
	padding-top:0px;	
}

header nav ul li.first a{
	text-indent:-5000px;
	background-image:url(../images/menu-home.gif);
	background-position:center;
	width:22px;	
    background-color:transparent;
	line-height:21px;
}

header nav ul li li.first a{
	text-indent:0;	
	width:auto;	
	line-height:1.083333em;
	background-image:url(../images/menu-chevron.gif);
	background-position:left center;
}


header nav ul li ul { /* second-level lists */
	position: absolute;
	background-color:#121254;
	padding:21px 0px 9px 19px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	z-index:1000;
}

header nav ul li:hover
{
	position:static;
}

header nav ul li:hover ul,
header nav ul li:focus ul,
header nav ul li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

header ul.menu2 li
{
	display:block;
	height:auto;
	width:auto;
	float:none;
	background:none;
	padding:0;
	clear:both;	
	z-index:1000;
	
}

header nav ul.menu2 li a,
header nav li.selectedl1 ul.menu2 li a
{
	line-height:10.8333px;
	text-align:left;
	width:auto;
	padding:6px 20px 5px 12px;
	background-position:left 5px;
	background-repeat:no-repeat;
	color:#fff;
	background-image:url(../images/menu-chevron.gif);
	background-position:left center;
	background-color:transparent;	
}

/**
* FOOTER
**/

footer{
	background-image:url(../images/horizontal-dots.gif);
	color: white;
	background-color: #8a8a8a;
	background-repeat:repeat-x;
	background-position:left top;
	padding:18px 10px 35px 10px;
	margin:60px 0 0 0 ;
}

footer #fright{
	float:right;
	text-align:right;
	width: 50%;
}

footer #fleft{
	float:left;
	text-align:left;
	width: 50%;
}

#main-content{
	background-color:rgba(41,20,181,0.20);
	padding:10px;
}


.no-rgba #main-content,
.no-js #main-content{
	background-color:transparent;
	background-image:url(../images/bg-000000-80pc.png);
	background-repeat:repeat;
}

#main-left{
	float:left;
	width:100%;
	padding:0 0 0 10px;
}

#main-left-inner{
	padding:0 50px 0 0 ;
}

#main-right{
	width:250px;
	float:left;
}

/************************************/
/* BREAD CRUMB
/***********************************/

ul#breadcrumb{
	background-image:url(../images/horizontal-dots.gif);
	background-repeat:repeat-x;
	background-position:left bottom;
	list-style-type:none;
	width:90%;
	height:40px;
	margin:0 0 22px 0;
}

ul#breadcrumb li{
	background-image:url(../images/bg-breadcrumb-divider.gif);
	background-position:left 7px;
	float:left;
	padding:0 5px 0 9px;
	font-weight:bold;
}

ul#breadcrumb li.first{
	padding-left:0;
	background-image:none;
}

ul#breadcrumb li a{
	font-size:0.833333em;
}

ul#breadcrumb li.current a{
	color:#fff;
}

/******************
* HOME
******************/

#home-top-rotator{
	width:525px;
	height:240px;
	float:right;
	background-color:rgba(0,0,0,0.90);
	margin:0 0 40px 0;
}


.no-rgba #home-top-rotator,
.no-js #home-top-rotator{
	background-color:transparent;
	background-image:url(../images/bg-000000-90pc.png);
	background-repeat:repeat;
}

#home-top-rotator .htr-slide{
	width:485px;
	padding:20px;
}

.htr-slide .htrs-left{
	width:215px;
	height:160px;
	float:left;
	overflow:hidden;
}

.htr-slide .htrs-right{
	float:left;
	display:inline;
	margin:0 0 0 20px;
	width:250px;
	height:200px;
	overflow:hidden;
}

.htr-slide .htrs-right p{
	margin: 0 0 8px 0;
	line-height:1.5em;
}

#home-three-buckets{
	background-color:rgba(37,37,37,0.5);
	padding:18px 0 18px 0;
}

.no-rgba #home-three-buckets,
.no-js #home-three-buckets{
	background-color:transparent;
	background-image:url(../images/bg-252525-50pc.png);
	background-repeat:repeat;
}

.hbucket{
	width:241px;
	padding:0 34px 28px 0 ;
	float:left;
	display:inline;
	margin:0 0 0 27px;
	background-image:url(../images/vertical-dots.gif);
	background-repeat:repeat-y;
	background-position:right top;
}

.hbucket h3{
	font-size:2em;
	color:#92d0fc;
	text-transform:uppercase;
	margin:0 0 7px 0;
}

.hbucket p{
	margin:0;
}

a.more{
	padding:15px 39px 0 0;
	overflow:hidden;
	background-image:url(../images/btn-more.gif);
	height:0;
	width:0;
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	position:relative;
	top:1px;
	vertical-align:text-bottom;
}

#latest-case-studies{
	width:468px;
	float:left;
	display:inline;
	margin:30px 0 0 0;
	padding:0 0 0 22px;
}

#latest-case-studies h3{
	color:##92D0FC;
	font-size:2em;
	text-transform:uppercase;
	margin: 0 0 18px 0;
}

#latest-case-studies .home-cs-image{
	float:left;
	border:1px solid #fff;
	margin:5px 21px 0 0 ;
	display:inline;
	width:120px;
	height:68px;
	overflow:hidden;
}

#latest-case-studies .home-cs-summary{
	float:left;
	width:300px;
}

#latest-case-studies article{
	clear:both;
	margin:0 0 31px 0;
	line-height:1.5em;
	float:left;
	width:468px;
}

#latest-case-studies article h4{
	text-transform:uppercase;
	color:#92d0fc;
}

#home-video-gallery{
	width:414px;
	float:right;
	display:inline;
	margin:30px 0 0 0;
}

#home-video-gallery #video-main{
	height:275px;
}

#home-video-gallery #video-selector{
	height:78px;
	margin:1px 0 0 0 ;
}

#home-video-gallery #video-selector #move-left,
#home-video-gallery #video-selector #move-right{
	float:left;
	width:43px;
	height:78px;
	background-color:#1a1a1a;
	background-image:url(../images/circle-arrow-left.gif);
	background-position:center;
	cursor:pointer;
}

#home-video-gallery #video-selector #move-right{
	background-image:url(../images/circle-arrow-right.gif);
}

#home-video-gallery #video-selector #scroller-window{
	width:326px;
	margin:0 1px 0 1px;
	float:left;
	display:inline;
	height:78px;
	overflow:hidden;
	
	position:relative;
}

#home-video-gallery #video-selector #inner-scroller{
	height:78px;
	width:1000px;
}

#home-video-gallery #video-selector #inner-scroller .video-thumb{
	height:78px;
	width:139px;
	float:left;
	display:inline;
	background-color:#333;
	margin:0 1px 0 0;
	overflow:hidden;
	cursor:pointer;
}

.video-thumb img{
	min-height:78px;
}

#home-bottom{
	clear:both;
	padding:30px;	
	background-image:url(../images/bg-home-bottom-grad.gif);
	background-repeat:repeat-x;
}

#home-bottom h3{
	font-size:2em;
}

#home-bottom #testimonials{
	width:310px;
	float:left;
	background-position:left 37px;
	display:inline;
	margin: 0 10px 0 0;
}

.rtestimonial{
	background-image:url(../images/quote-left.png);
	background-position:left top;
	margin: 0 10px 0 0;
	padding:19px 0 0 0;
}

#testimonials h3{
	margin:0 0 14px  0 ;
}

#home-bottom #testimonials blockquote,
.rtestimonial blockquote{
	background-image:url(../images/quote-right.png);
	background-position:right bottom;
	padding:0 13px 0 16px;
}

#home-bottom #testimonials blockquote span,
.rtestimonial blockquote span{
	display:block;
	font-weight:bold;
	font-style:italic;
}

#home-bottom #testimonials p,
.rtestimonial p{
	margin:13px 0 0 16px;
}

/**
* CLIENT SCROLLER
**/

#work-with{
	width:530px;
	float:right;
}

#client-selector{
	width:530px;
}

#client-selector #client-move-left,
#client-selector #client-move-right{
	float:left;
	width:35px;
	height:83px;
	/*background-color:#1a1a1a;*/
	background-image:url(../images/circle-arrow-left.gif);
	background-position:center;
	cursor:pointer;
}

#client-selector #client-move-right{
	background-image:url(../images/circle-arrow-right.gif);
}

#client-selector #client-scroller-window{
	width:460px;	
	float:left;
	display:inline;
	height:83px;
	/*background-color:#f33;*/
	overflow:hidden;
	position:relative;
}

#client-selector #client-inner-scroller{
	height:83px;
	width:1000px;
}

#client-selector  .client-logo{
	height:83px;
	float:left;
	display:inline;
	background-color:#fff;
	margin:0 3px 3px 0;
	padding:0 24px;
	overflow:hidden;	
	line-height:83px;
	width:82px;
	text-align:center;
}

#client-selector .client-logo img{
	max-height:63px;	
	vertical-align: middle;
	max-width:82px;
}
/* IE 6 Hacks */
* html #client-selector  .client-logo{
	font-size:80px;
}
* html #client-selector  .client-logo img { 
   height: expression( this.scrollHeight > 62 ? "63px" : "auto" ); /* sets max-height for IE */
   width: expression( this.scrollWidth > 81 ? "82px" : "auto" ); /* sets max-height for IE */
}

/* end IE 6 Hacks */

/************************************/
/* SUB MENU
/***********************************/

#main-right nav{
	background-color:rgba(18,18,84,0.8);
	padding:17px 10px 10px;
}

.no-rgba #main-right nav{
	background-color:#111247;
}

#main-right nav h3{
	color:#81839f;
	font-size:1.5em;
}

#main-right nav ul{
	list-style-type:none;	
	padding:0;
	margin:0;
}

#main-right nav ul li{
	background-color:rgba(255,255,255,0.05);
	padding:9px 10px 9px 14px;
	margin:0 0 2px 0;	
}

.no-rgba #main-right nav ul li{
	background-color:#212255;
}

#main-right nav ul li a{
	color:#fff;
	text-transform:uppercase;
	font-size:0.9166666em;
	font-weight:bold;
	padding:0 0 0 13px;
	background-image:url(../images/menu-chevron.gif);
	background-position:left center;
}


/* --------------------- *\
		TEAM
\* --------------------- */

.team-box{
	float:left;
	width:178px;
	margin:0 33px 40px 0;
}

.main-team{
	width:600px;
	margin:0 0 17px 0;
}

.main-team img{
	float:left;
	margin:0 35px 15px 0;
	border:1px solid #fff;
}

.team-box strong{
	display:block;
	text-transform:uppercase;
	font-size:1.16666em;
}

/* --------------------- *\
		TESTIMONIALS
\* --------------------- */

#testimonial-block{
	
}

.t-box{
	width:300px;
	float:left;
	border-top:2px solid #000;
	background-image:url(../images/quote-left.png);
	background-position:22px 22px;
	padding:0 0 23px 0;
}

.t-box blockquote{
	padding:40px 40px 17px;
	background-image:url(../images/quote-right.png);
	background-position:232px bottom;
}

#testimonial-block .t-box{
	background-color:#0D0D0D;
	border-bottom:2px solid #000;
	border-top:none;
}

#main-right .t-box{
	width:auto;
	float:none;
}

#main-right .t-box blockquote{
	background-position:185px bottom;
}

.t-box blockquote strong{
	display:block;
	font-style:italic;
}

div#intro{
	padding:0 0 30px 0;
}

article.news{
	background-image:url(../images/horizontal-dots.gif);
	background-position:left bottom;
	background-repeat:repeat-x;
	margin:0 0 20px 0;
}

article.news h3{
	color:#294aaa;
}

article.news .summary{
	float:left;
	width:550px;
	padding:0 0 25px 0;
}

div.date-box{
	width:32px;
	border:1px solid #fff;
	float:left;
	display:inline;
	margin:6px 15px 0 0;
}

div.date-box .db-m{
	display:block;
	background-color:#bc0000;
	text-align:center;
	font-size:0.83333em;
	font-weight:bold;
	text-transform:uppercase;
}

div.date-box .db-d{
	display:block;
	background-image:url(../images/bg-date-grad.gif);
	background-repeat:repeat-x;
	background-position:left bottom;
	text-align:center;
	font-weight:bold;
	color:#303030;
	font-size:1.3333em;
}

/***
* VIDEO GALLERY
**/

#video-gallery{
	border:3px solid #d7d7d7;
	background-image:url(../images/bg-video-gallery.gif);
	background-position:left bottom;
	background-repeat:repeat-x;
	background-color:#e9e9e9;
	padding:20px;
	width:700px;
}

#video-gallery-squeeze{
	background-image:url(../images/bg-video-gallery.gif);
	background-position:left bottom;
	background-repeat:repeat-x;
	background-color:#e9e9e9;
	padding:20px;
	min-height:472px;
}

#vg-selector{
	width:170px;
	height:465px;
	float:right;
}

#vg-selector #move-up,
#vg-selector #move-down{	
	height:27px;
	background-image:url(../images/arrow-up-grey.png);
	background-position:center;
	cursor:pointer;
}

#vg-selector #move-up:hover{background-image:url(../images/arrow-up-blue.png);}

#vg-selector #move-down{
	background-image:url(../images/arrow-down-grey.png);
}
#vg-selector #move-down:hover{background-image:url(../images/arrow-down-blue.png);}

#vg-selector #vg-window{	
	height:406px;
	overflow:hidden;
	
	position:relative;
}

#vg-selector #vg-selector-inner{
	height:1000px;
}

#vg-selector #vg-selector-inner .video-preview{	
	padding:4px 0 14px 4px;	
	width:170px;
}


#vg-selector #vg-selector-inner .video-preview-selected{	
	padding:0 0 10px 0;	
	width:170px;
}

.vp-inner span{
	display:block;
	cursor:pointer;
}

.vp-inner span.vp-title{
	position:absolute;
	width:140px;
	bottom:0px;
	left:0px;
	height:27px;
	line-height:27px;
	background-color:rgba(0,0,0,0.8);
	color:#fff;
	text-transform:uppercase;
	overflow:hidden;
	padding:0 10px;
}

html.no-rgba .vp-inner span.vp-title{
	background-color:#000;
}

#vg-selector #vg-selector-inner .video-preview .vp-inner{	
	border:1px solid #fff;
	width:160px;
	position:relative;
}

#vg-selector #vg-selector-inner .video-preview-selected .vp-inner{
	border:5px solid #3151ad;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;


	width:160px;
}

#vg-selector #vg-selector-inner .vp-inner img{
	padding:0;
	margin:0;
	display:block;
}

#video-area{
	width:520px;
	float:left;
}

#video-area strong{
	text-transform:uppercase;
}

#video-detail{
	padding:19px 0 0 0;
	color:#000;
}

/**
* CASE STUDIES 
*/

#case-study-list article{
	float:left;
	width:600px;	
	
	background-color:#1a1a1a;
	margin:0 0 1px 0;
}

#case-study-list article:hover{
	background-color:#262626;
}

#case-study-list article .cs-image{
	float:left;
	width:219px;
	border-right:1px solid #000;
}

#case-study-list article .cs-image img{
	display:block;
}

#case-study-list .cs-summary{
	float:left;
	width:342px;
	padding:18px 18px 15px;
}

#case-study-list article h3 a{
	color:#787960;
}

#video-gallery-link{
	width:250px;
	height:167px;
	display:block;	
	background-image:url(../images/video-gallery-link.jpg);
	position:relative;
	
	margin:0 0 33px 0;
}

#video-gallery-link:hover{
	text-decoration:none;
}

#video-gallery-link span{
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	line-height:27px;
	background-color:rgba(0,0,0,0.8);
	color:#fff;
	text-transform:uppercase;
	width:218px;
	padding:0 16px;
}

html.no-rgba #video-gallery-link span{
	background-color:#000;	
}

/**
* CLIENTS 
*/

#clients #client-selector-large{
	height:278px;
	margin:0 0 79px 0;
}

#clients #client-selector-large .client-logo{
	width:114px;
	height:114px;
	margin:0 0 1px 1px;
	float:left;
	background-color:#fff;	
	text-align:center;
	line-height:114px;
	overflow:hidden;
	padding:12px;
}

#clients #client-selector-large .client-logo img{
	vertical-align:middle;
	max-width:114px;
	max-height:114px;
}

#client-selector-large #client-move-left,
#client-selector-large #client-move-right{
	float:left;
	width:21px;
	height:278px;
	/*background-color:#1a1a1a;*/
	background-image:url(../images/arrow-left-black.gif);
	background-position:center;
	cursor:pointer;
	background-color:#232323;
}

#client-selector-large #client-move-right{
	background-image:url(../images/arrow-right-black.gif);
}

#client-selector-large #client-scroller-window{
	width:558px;	
	float:left;
	display:inline;
	height:278px;
	overflow:hidden;
	
	position:relative;
}

#client-selector-large #client-inner-scroller{
	height:278px;
	width:8000px;
}

.client-block{
	float:left;
	width:556px;
	height:278px;
}

#contact-left{
	width:200px;
	float:left;
}

#contact-right{
	width:342px;
	float:left;
	display:inline;
	margin:0 0 30px 15px;
	border:1px solid #444;
	-moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color:rgba(25,25,25,0.9);
    padding:16px 16px 16px 22px;
}

html.no-rgba #contact-right{
	background-color:#1A1B1B;
}

/** 
* Form
*/

input.text,
textarea.textarea{
	background-color:#f2f2d7;
	border:4px solid #6a6a6a;
	-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width:219px;
    font-size:1em;
    padding:3px 3px 2px;
}

input.text{
	
}

.input-pair{
	float:left;
	clear:left;
	width:100%;
	margin:0 0 12px 0;
}

.input-pair label{
	float:left;
	width:109px;
	padding:4px 0 0 0;
}

.input-pair input,
.input-pair textarea{
	float:left;
}

.input-pair textarea{
	font-family:arial;
	height:170px;
}

#feedback{
	padding:10px;
	border:4px solid #6a6a6a;
	-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin:0 0 20px 0;
}

#feedback ul{
	margin:0;
}

.feedback-red{
	border-color:#990000!important;
	background-color:rgba(153,0,0,0.5);
}

html.no-rgba .feedback-red{
	background-color:#5A0D0D;
}