/*	==================================================
	Global Settings
	--------------------------------------------------	*/

* { margin: 0; padding: 0 }

strong, h1, h2, h3, h4, h5, h6, h7 { font-weight: normal }

em, cite { font-style: normal }

li { list-style: none }

img, a img { border: 0 }

a img { text-decoration: none }

table {
	border-collapse: collapse;
	border: none;
	}

.left {
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
	}

.right {
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
	}

.print, #upfront .print { display: none }

/*	==================================================
	Firefox link fix
	--------------------------------------------------	*/

a:focus { -moz-outline-style: none /* fix for Firefox outlining link */ }

/*	==================================================
	Layout
	--------------------------------------------------	*/

html {
	height: 100%;
	width: 100%;
	}

body {
	margin: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	background: url(/i/ui/graydots.gif) 50% 96px;
	}

#outer1 {
	/* JLC: height may not work in IE */
	height: 100%;
	width: 100%;
	background: url(/i/ui/darkdots2.gif) repeat-x 50% 96px;
	}

#outer2 {
	left: 0;
	top: 0;
	position: absolute;
	width: 100%;
	height: 96px;
	background: url(/i/ui/twill.gif);
	}

#page {
	position: relative;
	top: 96px;
	width: 800px;
	margin: 0 auto;
	background: #fff url(/i/ui/left-band.gif) repeat-y left 96px;
	text-align: left; /* counteract centering for layout */
	}

#header {
	position: relative;
	z-index: 2;
	top: -96px;
	width: 786px;
	height: 96px;
	margin-left: 14px;
	background: url(/i/ui/bluestripe.gif);
	}

#logo {
	display: block;
	width: 222px;
	height: 96px;
	background: url(/i/ui/civilarts.gif) no-repeat left top;
	}

#phone {
	position: absolute;
	z-index: 1;
	right: 0;
	top: 73px;
	width: 366px;
	height: 34px;
	background: url(/i/copy/phone.gif) no-repeat right top;
	}

#content {
	margin: -96px 0 0 105px;
	}

.maincontent {
	padding-top: 70px;
	margin-left: 182px;
	width: 280px;
	float: left;
	}

.sidebar {
	margin-left: 494px;
	padding-top: 38px;
	}

#footer {
	clear: both;
	height: 112px;
	background: url(/i/copy/ca-footer.gif) no-repeat 145px 55px;
	}

#footer #tagline {
	margin: 55px 0 0 145px;
	width: 384px;
	height: 16px;
	}

/*	==================================================
	Creating a minimum height for pages - 
	kudos to Dave Shea who is the man:
	http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/
	See that address for notes
	--------------------------------------------------	*/

*>#content {padding-top: 415px; min-height: 1px;}
*>#content .maincontent, *>#content .sidebar, *>#content #upfront {margin-top: -415px;}
* html #content {
	/* IE5Mac filter \*/
	height: 415px;
	/* end filter */
}

/* The additional div (#upfront) on the home page complicates things slightly. */
*>.home #content .maincontent { margin-top: -196px }
*>.home #content .sidebar { margin-top: 0 }

/*	==================================================
	Navigation
	--------------------------------------------------	*/

.nav {
	position: absolute;
	top: 0;
	left: 0;
	padding-top: 82px;
	background: url(/i/ui/nav-corner.gif) no-repeat left top;
	width: 105px;
	}

.nav li {
	margin-bottom: 6px;
	}

.nav a, .nav strong {
	display: block;
	height: 62px;
	border-left: 12px solid #008fd4;
	}

.nav ul a, .nav ul strong { border: none }

/* Images for main nav */
#home { background-image: url(/i/nav/home.png) }
#about { background-image: url(/i/nav/overview.png) }
#services { background-image: url(/i/nav/services.png) }
#clients { background-image: url(/i/nav/clients.png) }
#careers { background-image: url(/i/nav/careers.png) }
#contact { background-image: url(/i/nav/contact.png) }

/* Darker gray on hover, and if you're in the relevant section */
.nav a:hover, html .nav strong, .services #services, .about #about { background-position: -92px 0 }

/* Heights for subnavs */
.nav ul a, .nav ul strong { height: 26px }
#about-background, #services-staking, #services-sustainable, #services-residential { height: 39px }

/* Images for subnavs */
#about-background { background-image: url(/i/nav/background.gif) }
#about-staff { background-image: url(/i/nav/staff.gif) }
#services-engineering { background-image: url(/i/nav/engineering.gif) }
#services-planning { background-image: url(/i/nav/planning.gif) }
#services-surveying { background-image: url(/i/nav/surveying.gif) }
#services-staking { background-image: url(/i/nav/staking.gif) }
#services-sustainable { background-image: url(/i/nav/sustainable.gif) }
#services-residential { background-image: url(/i/nav/residential.gif) }
#services-oilgas { background-image: url(/i/nav/oil-and-gas.gif) }

/* Background positioning for subnavs */
.nav ul a { background-position: -139px 0 }
.nav ul a:hover, .nav ul strong, .engineering #services-engineering,
.planning #services-planning, .surveying #services-surveying, .sustainable #services-sustainable { background-position: 0 0 }

.nav div {
/* Extra div thrown in to get that other corner */
	position: absolute;
	top: 82px;
	left: 106px;
	width: 138px;
	background: #e5f4fb url(/i/nav/subnav_ur.gif) no-repeat right top;
	}
.nav div ul {
	padding: 28px 0;
	background: url(/i/nav/subnav_dr.gif) no-repeat right bottom;
	}

.nav ul li, .nav ul li:hover { background: none; margin: 0 }

/* -- Special Styles for Home Link in Nav --

.home #li-home { display: none }

#li-home {
	position: absolute;
	top: 0;
	left: 14px;
	width: 91px;
	}

#home { border-left: none }

#home:hover { background-position: -91px 0 } */

/*	==================================================
	home page styles
	--------------------------------------------------	*/

.home #page { background-image: url(/i/ui/two-bands.gif) }

#upfront {
	padding-top: 66px;
	background: #fff url(/i/ui/left-band.gif) repeat-y -105px;
	margin-bottom: 24px;
	}

#upfront img {
	margin-bottom: -4px; /* JLC: An odd fix. Seems good for FF. We'll see ... */
	padding-left: 1px;
	display: block;
	background: url(/i/pix/front-range-big1.gif) no-repeat;
	}

.home .maincontent {
	margin-left: 46px;
	width: 383px;
	}

.home .sidebar {
	margin-left: 516px;
	margin-right: 35px;
	padding-top: 7px;
	}

#flash { position: absolute; right: 0 }

#flash-header {
	width: 204px;
	height: 196px;
	background: url(/i/pix/engineering-planning-surveying.gif);
	}

/*	==================================================
	Interior pages
	--------------------------------------------------	*/

.candy {
	background: url(/i/pix/imageback.gif);
	padding: 25px 0 0 15px;
	}

/*	-- Staff Page --	*/

.staff-bio { margin: 2em 0 30px }

img.portrait { float: left;
	width: 88px;
	height: 110px;
	}

.staff-bio h2 {
	padding: 27px 0 0 107px;
	font-size: 1.083em;
	line-height: 1.167;
	color: #000;
	}

.staff-bio .email { padding-left: 107px }

p.bio {
	clear: both;
	padding-top: 1.5em;
	}

.staff .callout { margin-top: 60px }

/*	-- Clients Page --	*/

.clients .sidebar .get-pdf { 
	position: absolute;
	top: 132px;
	right: 45px;
	margin: 0;
	}

.clients .maincontent {
	margin-left: 0;
	width: auto;
	float: none;
	}

.clients .heading, .clients .lead {
	margin-left: 182px;
	width: 283px;
	}

.column {
	width: 182px;
	float: left;
	margin-left: 39px;
	}

.maincontent .column li {
	text-indent: 0;
	padding-left: 0;
	line-height: 1.2;
	margin-bottom: 4px;
	font-size: 91.7%;
	}

.column ul, .clients .lead { margin-bottom: 1em }

.clients h2 { color: #008fd4 }

/*	-- Careers Page --	*/

.post { padding-top: 1em }

.careers hr { display: none }

#jobs {
	margin-top: 1.25em;
	border-top: 1px solid #ddd;
	padding-top: .75em;
	}

/*	-- Contact Us Page --	*/

#telephone, #fax, #write, #email, #map {
	display: block;
	position: relative;
	left: -46px;
	margin-top: -2px;
	width: 32px;
	height: 19px;
	margin-bottom: -19px;
	background-repeat: no-repeat;
	}
	
#telephone { background-image: url(/i/ui/telephone.gif) }
#fax { background-image: url(/i/ui/fax.gif) }
#write { background-image: url(/i/ui/write.gif) }
#email { background-image: url(/i/ui/email.gif) }
#map { background-image: url(/i/ui/map.gif) }

.contact .lead { margin-bottom: 2em }

.contact .p { margin-top: 1.5em }

/*	==================================================
	Popup / Project Example pages
	--------------------------------------------------	*/

.example .maincontent h1 {
	padding-left: 33px;
	background: url(/i/ui/4dots.gif) no-repeat;
	}

/* Resize images if showing in normal window */
.example img.detail {
	width: 480px;
	height: 365px;
	}

/* Images should not be resized in popup */
.popup .example img.detail {
	width: 559px;
	height: 425px;
	position: relative;
	top: -30px;
	margin-bottom: -10px;
	}

.popup #outer1 { margin-bottom: 16px; background: none }

.popup #header {
	width: auto;
	margin-left: 0;
	height: 88px;
	top: -88px;
	}

.popup #logo { height: 88px; background-position: 0 -8px }

.popup #page { width: auto; background: #fff; top: 88px }

.popup #content { margin: -88px 0 0 30px }

.popup .nav, .popup .engineering #phone, 
.popup .planning #phone, .popup .surveying #phone { display: none }

.popup .maincontent {
	margin-left: 0;
	width: auto;
	}

.popup .example .maincontent h1, .popup .example .maincontent p {
	float: left;
	clear: left;
	margin-right: 20px;
	}

.popup .example .maincontent p { width: 170px }
.popup .example .maincontent h1 { width: 137px } /* =170px-33px, the left padding - JLC: box model? */

.popup #footer { height: 1px; background: none }

/* Longer width heading for full-width page - this is based on the only one so far: Sustainable Design Defined */
.popup .defined .heading { width: 566px }

.popup .defined .maincontent { padding-left: 80px; padding-right: 60px }

.popup .defined { background: #fff }

#close {
	z-index: 4; /* Makes IE6 happy, and why not? */
	display: block;
	position: absolute;
	top: -88px;
	right: 0;
	width: 86px;
	height: 43px;
	background: url(/i/ui/close-window.gif) no-repeat left top;
	}

/*	==================================================
	Typography
	--------------------------------------------------	*/

body {
	/* Aiming for Arial 12pt/18pt, 8pt between paragraphs */
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 75%;
	line-height: 1.5;
	color: #555;
	}

.sidebar, a { color: #777 }
a:visited { color: #2ad }
a:hover { color: #444 }

.sidebar { font-size: 91.7% }

h2, h3 {
	font-size: 1.083em;
	color: #000;
	}

h3 { font-style: italic }

strong { color: #000 }

p, .maincontent ul {
	margin-bottom: .66em;
	}

.maincontent li, .sidebar li {
	margin-bottom: 0;
	padding-left: 6px;
	text-indent: -.7em;
	}

.maincontent li h2 { text-indent: -.5em }
.maincontent li p, .maincontent li li { text-indent: 0; padding-left: 2px }

li.green, h2.green {
	margin-right: 15px;
	padding-right: 25px;
	background: url(/i/ui/sustainable.gif) no-repeat right bottom;
	}

.greenie {
	position: relative;
	top: 5px;
	margin-top: -10px;
	line-height: 0;
	}

.lead, .example .maincontent h1 {
	font-size: 1.167em;
	margin-top: 2px;
	margin-bottom: .75em;
	line-height: 1.28;
	color: #000;
	font-family: Arial;
	}

.home .lead {
	text-indent: -.2em;
	padding-right: 25px;
	}

.lead strong {
	font-size: 1.5em;
	color: #008fd4;
	}

/*	==================================================


	Images Replacing Type


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

.image, .heading, .nav a, .nav strong, .get-pdf, .callout {
	text-indent: -5000px;
	background-repeat: no-repeat;
	background-position: left top;
	}

a.image { display: block }

.get-pdf {
	display: block;
	width: 156px;
	height: 35px;
	background: url(/i/copy/get-pdf.gif);
	}

.sidebar .get-pdf {	margin: 17px 0 0 28px }

.home .sidebar .get-pdf { margin-left: 0 }

#committed-to-green {
	display: block;
	margin-top: 20px;
	width: 123px;
	height: 99px; /* actually it's 82px high, but we need more spacing for the next element */
	background: url(/i/copy/committed-to-green.gif) no-repeat;
	}

.callout {
	width: 194px;
	height: 197px;
	}

.about .callout { background-image: url(/i/copy/our-focus.gif) }
.background .callout { background-image: url(/i/copy/civilarts-staff.gif) }
.services .callout { background-image: url(/i/copy/services-overview.gif) }
.staking .callout { background-image: url(/i/copy/construction-staking.gif) }
.sustainable .callout { background-image: url(/i/copy/pioneer-in-lid.gif) }
.residential .callout { background-image: url(/i/copy/reliable-solutions.gif) }
.oilgas .callout { background-image: url(/i/copy/coexistence.gif) }
.careers .callout { background-image: url(/i/copy/civilarts-offers2.gif) }

.staff .callout {
	height: 259px;
	background-image: url(/i/copy/while-tapping.gif);
	}

/*	==================================================
	Page Headings & Lead Paragraphs
	--------------------------------------------------	*/

.heading { 
	width: 283px;
	height: 49px;
	margin-bottom: 9px;
	}

img.lead, .heading { position: relative; left: -1px }

.about-overview { background: url(/i/copy/overview.gif) }
.about-background { background: url(/i/copy/background.gif) }
.about-staff { background: url(/i/copy/principal-staff.gif) }
.services-overview { background-image: url(/i/copy/services.gif) }
.services-engineering { background-image: url(/i/copy/civil-engineering.gif) }
.services-planning { background-image: url(/i/copy/planning.gif) }
.services-surveying { background-image: url(/i/copy/surveying.gif) }
.services-staking { background-image: url(/i/copy/staking.gif) }
.services-sustainable { background-image: url(/i/copy/sustainable.gif) }
.services-residential { background-image: url(/i/copy/residential.gif) }
.services-oilgas { background-image: url(/i/copy/oil-and-gas.gif) }
.clients-page { background: url(/i/copy/clients.gif) }
.careers-page { background: url(/i/copy/careers.gif) }
.contact-page { background: url(/i/copy/contact.gif) }
.map-page { background: url(/i/copy/map.gif) }
.sustainable-defined { background: url(/i/copy/sustainable-defined-alt.gif); width: 325px }
.popup .sustainable-defined { background: url(/i/copy/sustainable-defined.gif) }

#ca-services {
	position: relative;
	left: -7px;
	background: url(/i/copy/ca-services.gif) no-repeat;
	}

/*	==================================================
	Callout Blocks
	--------------------------------------------------	*/

.callout {
	margin: 18px 0 0 7px;
	}

.get-example {
	margin: 18px 0 0 7px;
	padding: 13px 0 41px 9px;
	width: 185px; /* JLC: Box model? */
	background: url(/i/pix/enlargeframe.gif) no-repeat;
	}

#engineering-example, #planning-example, #surveying-example {
	display: block;
	width: 185px;
	height: 168px;
	}

#engineering-example { background: url(/i/pix/inset-engineering.gif) no-repeat }
#planning-example { background: url(/i/pix/inset-planning.gif) no-repeat }
#surveying-example { background: url(/i/pix/inset-surveying.gif) no-repeat }

/*	==================================================
	DEVELOPMENT ONLY
	--------------------------------------------------	

html { background: url(/i/dev/overview-ghost.png) no-repeat 52% top }
body, #outer1, #outer2, #page { background: none }

*/