@import url("reset.css");

body{
	color: #999;
	font-family:Arial, Tahoma, Geneva, sans-serif;
	font-size:0.8em;
	padding-bottom:30px;
	background-color: #333;
}





/* 
----------------------- @FONT-FACE -------------------------------- */
  


@font-face {
    font-family: 'stonebridge';
    src: url('font-face/stonebridge-webfont.eot');
    src: local('☺'),
    	 url('font-face/stonebridge-webfont.eot?iefix') format('eot'),
         url('font-face/stonebridge-webfont.woff') format('woff'),
         url('font-face/stonebridge-webfont.ttf') format('truetype'),
         url('font-face/tonebridge-webfont.svg#webfont0g8M6dt8') format('svg');
    font-weight: normal;
    font-style: normal;
}


  

  

/*
Global Linking
-------------------------------------------------*/
a {
	outline: none;
}
a:link {
	color: #1f5189;
	text-decoration: none;
}
a:visited {
	color: #1f5189;
	text-decoration: none;
}
a:hover {
	color: #ccc;
	text-decoration: none;
}





/* ==DIVS */


/* layout divs */

#wrapper{
	background-color: #fff;
}
	
#wrapper2{
	width: 974px;
	margin: 0 auto;
	/* border: 1px solid maroon; */
}

.clear-both{
	clear:both;
	display:block;
}





/* ------- HEADER section - incl. top navigation ---------- */
#header{
	z-index: 1;
	height: 113px;
	width: 974px;
}


/* ------ ESCA logo  ----------------------------- */

#escaLogo h1 a{
	width: 312px;
	height: 80px;
	display:block;
	text-indent:-999em;
	/*paranoid tricks for older browsers*/
	text-decoration:none;
	overflow:hidden;
	position: relative;
	background: url(../img/esca-logo.png) no-repeat;
	/* top: 15px; */
	top: 15px;
	z-index: 1;
}

#strapline {
	font: 16px/80% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	float: left;
	color: #1f5189;
	position: relative;
	font-size: 18px;
	/* bottom: 26px; */
	bottom: 18px;
	margin-left: 175px;
}

#telephone{
	font: lighter 16px/80% stonebridge, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	float: right;
	color: #dc2930;
	position: relative;
	font-size: 24px;
	/* bottom: 26px; */
	bottom: 21px;
}

#telephone strong {
	color: #1f5189;
}






/* ----- Main Navigation ----- */

#navigation{
	position: relative;
	color: #fff;
	letter-spacing: 1px;
	height: 27px;
	padding-top: 8px;
	float: right;
	z-index: 100;
	width: 974px;
	background: #333 url(../img/top-nav-bg.png) no-repeat;
	margin: -5px 0 0;
}



/* ----  MEGA MENU --------- 
----------------------------*/

ul#topnav {
	/* z-index: 1; */
	z-index: 100;
	/* position: absolute; */
	position: relative;
	padding: 0;
	/* float:left; */
	width: 100%;
	list-style: none;
	color: #fff;
	/* margin: 0 0 0 5px; */
	margin: 0;
	height: 50% !important;
}
ul#topnav a{
	height: 50% !important;
}
ul#topnav li {
	float: left;
	margin: 0;
	/* padding: 0; */
	position: relative;
}
ul#topnav li a {
	float: left;
	/* text-indent: -9999px;  if using background images*/
	height: 44px;
	/* spacing between each menu item */
	/* padding-left: 39px;
	padding-right: 39px; */
	color: #fff;
	padding-bottom: 10px;
	font-size: 13px;
	line-height: 120%;
}
ul#topnav li:hover a, ul#topnav li a:hover {
	/* background-position: left bottom; */
	color: #666;
}
ul#topnav li .sub, ul#topnav li .sub2{
	position: absolute;
	top: 27px;
	left: -3px;
	/* background: url(../img/mega-bg.png) repeat-x; */
	background-color: #1f5189;
	padding: 12px;
	float: left;
	display: none;
}
/* -- for end of row items / to flip back in opposite direction -- (need to be specified in JS) -- */
ul#topnav li .sub{
	/* left: -108px; */
	left: 17px;  /* adjusted for PC FireFox */
}

ul#topnav li .row {
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 10px;
}
ul#topnav li .sub ul, ul#topnav li .sub2 ul{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 150px; /* need additional width for PC FireFox */
	float: left;
}
ul#topnav li .sub2 ul {
	/* width: 211px; */
	width: 228px; /* need additional width for PC FireFox */
}


ul#topnav .sub ul li, ul#topnav .sub2 ul li{
	width: 100%;
	color: #999;
}
ul#topnav .sub ul li h2, ul#topnav .sub2 ul li h2{
	padding: 0;
	margin: 0;
	font-size: 1.3em;
	font-weight: normal;
}
ul#topnav .sub ul li h2 a, ul#topnav .sub2 ul li h2 a {
	padding: 0 0 5px;
	background-image: none;
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
	line-height: 130%;
}
ul#topnav .sub ul li a, ul#topnav .sub2 ul li a{
	float: none;
	text-indent: 0; /*--Reset text indent--*/
	height: auto;
	/* background: url(../img/navlist_arrow.png) no-repeat 5px 12px; */
	padding: 4px 5px 7px 0px;
	display: block;
	text-decoration: none;
	color: #fff;
	font-size: 9px;
}
ul#topnav .sub ul li a:hover, ul#topnav .sub2 ul li a:hover{
	color: #ccc;
	background-position: 5px 12px;
}


.topLevel{
}



/* ---- classes for individual positioning of menu items ------- */

.topNav1{
	padding-left: 60px;
	padding-right: 50px;
}
.topNav2{
	padding-left: 65px;
	padding-right: 50px;
}
.topNav3{
	padding-left: 55px;
	padding-right: 50px;
}
.topNav4{
	padding-left: 60px;
	padding-right: 50px;
}
.topNav5{
	padding-left: 65px;
	padding-right: 50px;
}
.topNav6{
	padding-left: 35px;
}
	

/* --- for images added to the li ------------------------ */

ul#topnav .sub ul li img, ul#topnav .sub2 ul li img {
	margin: 6px 6px 6px 0;
}

ul#topnav .sub ul li a img, ul#topnav .sub2 ul li a img {
	border: 2px solid #333;
}

ul#topnav .sub ul li a:hover img, ul#topnav .sub2 ul li a:hover img {
	border: 2px solid #FFF;
}




/* -----------------------------------------------------
-------------------------------------- */




/* -----  for home page slider -------------- 
---------------------------------- */


#homeSlider{
	font: lighter 16px/80% stonebridge, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	float: left;
	position: relative;
	width: 974px;
	background-color: #EEE;
	height: 364px;
	margin: 0;
	letter-spacing: 1px;
}

ul#portfolio{
}

ul#portfolio a{
	color: #3b393c;
}
ul#portfolio a:hover{
	color: #1f5189;
}

ul#portfolio li img{
	position: relative;
	float: right;
}

.slideText{
	vertical-align: top;
	font-size: 16px;
	padding: 20px 20px 20px 15px;
	width: 289px;
	height: 324px;
	position: relative;
	float: left;
	display: block;
	margin-right: 10px;
	text-transform: uppercase;
}

.slideTitle{
	font-size: 30px;
	line-height: 100%;
}

.slideEmphasis{
	color: #1f5189;
}


/* -----------------------------------------------------
-------------------------------------- */






/* ------- Main Content Area ----------- 
---------------------------------------*/

#mainContent {
	/* height: 400px; /* testing only */
}



/* --- HOME PAGE - 'SIGN-UP' panel --------------- */
#signUpPanel{
	width: 959px;
	height: 210px;
	background-color: #1f5189;
	float: left;
	position: relative;
	padding: 15px 0 15px 15px;
	color: #fff;
}

#signUpPanel h2 {
	margin-bottom: 30px;
	font: lighter 24px/80% stonebridge, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #fff;
	letter-spacing: 1.5px;
}

#signUpPanelC1 {
	width: 316px;
	height: 220px;
	float: left;
	position: relative;
}
#signUpPanelC1 p {
	font-size: 11px;
	line-height: 150%;
	padding-right: 80px;
}


/* --- 4 quick link panels ----- */
#signUpPanelC2 {
	width: 639px;
	height: 220px;
	float: right;
	position: relative;
}

.qLink{
	text-align: center;
}
.qLink a{
	width: 306px;
	height: 220px;
	float: left;
	position: relative;
	margin-right: 12px;
	display: block;
	color: #fff;
}
.qLink a:hover{
	color: #dc2930;
}

.qLink img{
	margin-top: 11px;
}

.qLinkTitle, .qLinkTitle1st{
	font: lighter 17px/80% stonebridge, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
.qLinkTitle1st{  /* odd bug - will need to be tweaked if the text changes */
	padding-left: 5px;
}




/* --- FULL ROW OF BODY CONTENT ----- */

.fullRowText {
	width: 959px;
	float: left;
	position: relative;
	padding: 30px 0 30px 15px;
	border-bottom: 1px solid #ccc;
	clear: both;
}

.C1 {
	width: 316px;
	float: left;
	position: relative;
}

.C1 h2 {
	font: lighter 24px/80% stonebridge, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #1f5189;
	letter-spacing: 1.5px;
	line-height: 120%;
	margin-bottom: 25px;
}

.C1 h3 {
	font: lighter 18px/80% stonebridge, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #1f5189;
	letter-spacing: 1.5px;
	line-height: 120%;
	margin-bottom: 14px;
	margin-top: 28px;
}

body.contact-us .C1 h3 {
	margin-top: 0;
}

.C1 p {
	font-size: 11px;
	line-height: 150%;
	padding: 0 80px 20px 0;
}

.C1 img {
	display: inline;
	padding: 0 7px 0 0;
	float: left;
	position: relative;
}

.C2 {
	width: 639px;
	float: right;
	position: relative;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}

body.news .C2{
	min-height: 400px;
}

.C2 h2 {
	font: lighter 22px/80% stonebridge, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #0092ce;
	line-height: 120%;
	letter-spacing: 1.5px;
	margin-bottom: 24px;
}

.C2 h3 {
	font: lighter 22px/80% stonebridge, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #0092ce;
	line-height: 120%;
	letter-spacing: 1.5px;
	margin-bottom: 24px;
	margin-top: 28px;
}
.C2 h3.sectors {
	margin-bottom: 0;
	margin-top: 20px;
}
.topAnchor{
	float:right;
}

.C2 h4 {
	font: lighter 22px/80% stonebridge, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #0092ce;
	line-height: 120%;
	letter-spacing: 1.5px;
	margin-bottom: 7px;}

.C2 p {
	line-height: 170%;
	margin-top: -7px;
	color: #333;
	padding: 0 14px 28px 0;
}

.C2 img { 
	margin: 14px 10px 0 0;
}

.C2Sub1 { 
	width: 306px;
	float: left;
	position: relative;
	margin: 0 14px 14px 0;
}

.C2Sub2 { 
	width: 300px;
	float: right;
	position: relative;
	margin: 10px 14px 0 0;
}

.fullRowText ul {
	list-style:circle;
	/* list-style-position:outside; */
	line-height: 170%;
	margin-top: -7px;
	color: #666;
	padding: 0 0 28px;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	margin-left: 20px;
}

body.about-esca .fullRowText ul{
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}


.fullRowText small {
	color: #999;
	font-size: 10px;
}



/* ----------------- CASE STUDIES --------------- */

.caseStudy {
	border-bottom: 1px solid #CCC;
}

.caseStudy img {
	margin: 28px 0 20px 0;
}


/* ----------------- NEWS panel --------------- */

#newsPanel {
	width: 959px;
	height: 172px;
	float: left;
	position: relative;
	padding: 30px 0 30px 15px;
}

#newsPanelC1 {
	width: 316px;
	height: 172px;
	float: left;
	position: relative;
}
#newsPanelC1 h2 {
	font: lighter 24px/80% stonebridge, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #1f5189;
	letter-spacing: 1.5px;
}
#newsPanelC1 p {
	font-size: 11px;
	line-height: 150%;
	padding-right: 80px;
}
.newsSummary {
	margin-top: 30px;
}

#newsPanelC2 {
	width: 639px;
	height: 172px;
	float: right;
	position: relative;
}

#newsPanelC2a {
	width: 307px;
	height: 172px;
	float: left;
	position: relative;
}

#newsPanelC2b {
	width: 307px;
	height: 172px;
	float: right;
	position: relative;
}






/* ------ Thumbnail gallery----- */

#catGallery {
	width: 640px;
	/* clear: both; */
	position: relative;
	float: right;
	margin: 0 0 50px;
}

.catSummary, .catSummaryEnd {
	float:left;
	margin: 2px 12px 14px 0;
	width: 150px;
	height: 185px;
}

.catSummaryEnd {
	margin-right: 0;
}

.catSummary a, .catSummaryEnd a {
	text-decoration: none !important;
	color: #666;
}

.catSummary a:hover, .catSummaryEnd a:hover {
	color: #009AB0;
}

.catSummary a:hover img, .catSummaryEnd a:hover img {
	border: 1px solid #009AB0 !important;
}

.catSummary img, .catSummaryEnd img {
	border: 1px solid #ccc;
}




/* ----- CONTACT FORM TABLE ----------------------------------- */

/* ---- Note: 'reset' table value of border-spacing:4px;  --- */

table.contactTable{
	width:100%;
	font-size: 11px;
	margin-bottom: 14px;
	border-spacing: 5px;
	color: #666;
	background-color: #EEE;
}

.formtitle{
	font-size: 14px;
	color: #fff;
	background-color: #1f5189;
	text-align: left;
	padding-left: 10px;
	padding-right: 6px; 
	padding-top: 8px;
	padding-bottom: 8px;
	font-weight: bold;
}

.formlabel{
	font-size: 11px;
	text-decoration: none;
	color: #666;
	background-color: #EEE;
	text-align: right;
	padding-left: 6px;
	padding-right: 6px;
	line-height: 120%;
	padding-top: 4px;
	padding-bottom: 4px;
	vertical-align: top;
}


/* ----- ESCA 3000 RANGE TABLES ----------------------------------- */

table.esca3000{
	width:100%;
	font-size: 12px;
	text-align: center;
	margin: 0 0 28px 0;
}

table.esca3000 tbody tr{
	background-color: #e7eef8;
	height: 30px;
	color: #666;
}

table.esca3000 tbody td.title{
	background-color: #0092ce;
	color: #FFF;
}

table.esca3000 tbody td{
	padding: 10px;
	line-height: 150%;
}








/* ------- MISCELLANEOUS ----------- */

.pdfLink a, .wordLink a{
	background: url(../img/pdf.gif) no-repeat 2px 50%;
	color: #fff;
	text-decoration: none !important;
	margin: 15px;
}

.wordLink a{
	background: url(../img/word_icon.png) no-repeat 2px 50%;
	padding-left: 40px;
}

.pdfLink a:hover, .wordLink a:hover{
	color: #009AB0;
}

.note{
	color: #999;
	font-size: 11px;
	line-height: 120%;
	padding: 28px 28px 14px 14px;
}

.highlight{
	color: #0092ce;
}
.highlight a{
	color: #0092ce !important;
}
.highlight a:hover{
	color: #666 !important;
}

#video {
	padding-bottom: 28px;
}

/* -------------------------------- */








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

#footer{
	/* width: 974px; */
	width: 970px;  /* --- FF PC - needed 4px taken off this width --- */
	margin: 0 auto;
	color: #fff;
	clear: both;
	padding: 20px 0 0 26px;
	font-size: 10px;
}
#footer a{
	color: #999;
}
#footer a:hover{
	color: #666;
}

#footer h4{
	color: #0092ce;
	margin-bottom: 5px;
	font-size: 11px;
	font-weight: bold;
}

#footer p{
	margin-bottom: 8px;
}

#footer ul{
	margin-bottom: 7px;
}

.bottom-nav, .bottom-nav-start, .bottom-nav-end{
	float:left;
	border-right: 1px solid #666;
	padding: 5px 40px;
	line-height: 1.4em;
	height: 190px;
}
.bottom-nav-start{
	border-right: 1px solid #666;
	padding: 5px 50px 5px 0;
}
.bottom-nav p, .bottom-nav-start, .bottom-nav-end p{
	margin-bottom: 6px;
}

.bottom-nav-end{   /* --- where the 'AddThis' code lives ----- */
	border-right: none;
	padding-left: 40px;
	padding-right: 0;
	padding-top: 10px;
}