@charset "UTF-8";

body, p, ul, ol, li, dl, dt, dd, th, td, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}
body {
	background: #eff7e8;
	color: #333;
	font: 62.5% Verdana, Arial, Helvetica, sans-serif; /* 16x.625 = 10px; sets default text size to 10px (assumes user default size is 16px) */
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}
#container {
	background: #fff url(../assets/images/center-repeat.jpg) repeat-y center bottom;
	width: 790px;
	margin: 0px auto;
	text-align: left; /* this overrides the text-align: center on the body element. */
}

/* ------------ header section ------------  */

#header {
	background: #EEF7E8 url(../assets/images/masthead.jpg) no-repeat center top;
	position: relative; /* this allows absolutely-positioned elements in the header to be positioned relative to the header, not to the page */
	height: 130px;
	padding: 0px 10px 0px 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. */
}
#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. */
	padding: 10px 0px;
	text-indent: -9000px; /* positions the header text off-screen, it can be still used for search engines or for text printouts */
}
#header #logo {
	position: absolute;
	top: 55px;
	left: 35px;
}
#header #logo a img {
	border-style: none; /* eliminates the border for linked images within the header */
}
#header .vcard {
	margin-left: -9000px;
	width: 800px;
}

/* ------------ hCard styling ------------  */

.vcard {
}
.street-address {
}
.adr {
}
.locality {
}
.region {
}
.postal-code {
}
.country-name {
}
.tel {
}
.email {
}

/* ------------ main navigation ------------ */

#mainnav {
	position: absolute;
	right: 30px;
	bottom: 15px;
	font-size: 10px;
	text-align: right;
}
#mainnav ul {
	list-style: none;
	font-weight: normal;
	text-transform: uppercase;
}
#mainnav li {
	display: inline;
	margin-right: 10px;
	margin-left: 10px;
	letter-spacing: 0.125em;
}
#mainnav li a {
	text-decoration: none;
	color: #387c2c;
}
#mainnav li a:hover {
	padding-bottom: 5px;
	color: #fff;
	text-decoration: none;
	border-bottom: 3px solid #6B824D;
}
body#home #mainnav #nav-home a,
body#services #mainnav #nav-services a,
body#people #mainnav #nav-people a,
body#profile #mainnav #nav-profile a,
body#contact #mainnav #nav-contact a { /* css ID signature for page; allows the Main navigation to show "you are here" when an id is specified for the body */
	padding-bottom: 5px;
	color: #fff;
	border-bottom: 3px solid #6b824d;
}

/* ------------ sidebar styling ------------  */

body.planning #sidebar1 a.planning,
body.master #sidebar1 a.master,
body.site #sidebar1 a.site,
body.military #sidebar1 a.military,
body.environmental #sidebar1 a.environmental,
body.landuse #sidebar1 a.landuse,
body.landscape #sidebar1 a.landscape,
body.historic #sidebar1 a.historic,
body.gis #sidebar1 a.gis,
body.graphics #sidebar1 a.graphics { /* css class signature for page; allows the Side navigation to show "you are here" when a class is specified for the body */
color: #00467c
}

#sidebar1 {
	float: right; /* since this element is floated, a width must be given */
	width: 140px;
	padding-right: 30px;
	color: #7f8561;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#sidebar1 p {
	margin-bottom: 1em;
	line-height: 1.5em;
}
#sidebar1 dl {
	margin-top: 20px;
	line-height: 1.5em;
}
#sidebar1 dt {
	margin-bottom: .5em;
	font-weight: bold;
}
#sidebar1 dd {
	margin-bottom: 0.5em;
	font-weight: normal;
	margin-left: 1em;
}
#sidebar1 dt a {
	display: block;
	color: #7f8561;
	text-decoration: none;
	font-weight: bold;
}
#sidebar1 dt a:hover {
	color: #00467c;
	text-decoration: none;
}
#sidebar1 dd a {
	display: block;
	color: #7f8561;
	text-decoration: none;
	font-weight: normal;
}
#sidebar1 dd a:hover {
	color: #00467c;
	text-decoration: none;
}
#main {
	background: url(../assets/images/bkgrnd_mid.jpg) no-repeat center top; /* background image for the top of the main content section */
	padding-top: 0px;
}
#mainContent {
	overflow: auto;
	background: url(../assets/images/outline-bot.gif) no-repeat center bottom; /* background image that creates the bottom of the rounded-corner outline box */
	width: 575px;
	margin: 0px 185px 0px 30px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0px;
	color: #757561;
	line-height: 1.75em;
}
#mainContent h1, #container #mainContent h2, #container #mainContent h3, #container #mainContent h4 {
	color: #387c2c;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
}
#mainContent h1, #mainContent h2, #mainContent h3, #mainContent h4 { /* this padding keeps the headlines away from the edges of the outline box */
	padding-left: 20px;
}
#mainContent h1 { /* mainContent area MUST start with an H1 to creates the top of the rounded-corner outline box */
	background: url(../assets/images/outline-top.gif) no-repeat center top; /* background image that creates the top of the rounded-corner outline box */
	margin-bottom: 0.5em;
	padding-top: 20px;
	font-size: 180%;
}
#mainContent h2 {
	margin-bottom: 0.5em;
	font-size: 140%;
}
#mainContent h3 {
	font-size: 140%;
}
#mainContent h4 {
	font-size: 110%;
	text-transform: uppercase;
}
#mainContent p {
	margin-bottom: 1em;
	padding-right: 20px;
	padding-left: 20px;
	font-size: 110%;
}
#mainContent ul {
	font-size: 110%;
	margin: 1em 10px;
}
#mainContent  ul  li   {
	margin-bottom: 0.25em;
	margin-left: 40px;
}
#mainContent ol {
	margin: 1em 10px 1em 20px;
	padding-left: 20px;
}
#mainContent a:link, #mainContent a:visited { /* changes the color of all links in the area and eliminates the underlines */
	color: #00467c;
	text-decoration: none;
}
#mainContent a:hover {
	text-decoration: underline;
}
#mainContent .last {
	padding-bottom: 20px; /* used to keep the bottom paragraph text away from the bottom of the containing rectangle */
}

#monoSlideshow {
	margin-bottom: 10px;
	margin-left: 20px;
	border: 1px solid #999;
	width: 520px;
}

/* ------------ footer styling ------------  */

#footer {
	 /* background:#eff7e8 url(../assets/images/footer-lauae.jpg) no-repeat center top;this is the footer image */
	margin-bottom: 20px;
	padding: 0px 10px 0px 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	color: #757561;
}

body#home #footer { background:#eff7e8 url(../assets/images/footer-shoreline.jpg) no-repeat center top; }
body#people #footer { background:#eff7e8 url(../assets/images/footer-lauae.jpg) no-repeat center top; }
body#profile #footer { background:#eff7e8 url(../assets/images/footer-shoreline.jpg) no-repeat center top; }
body#services #footer { background:#eff7e8 url(../assets/images/footer-waikiki.jpg) no-repeat center top; }
body#contact #footer { background:#eff7e8 url(../assets/images/footer-lauae.jpg) no-repeat center top; }
body.planning #footer { background:#eff7e8 url(../assets/images/footer-lauae.jpg) no-repeat center top; }
body#services.master #footer { background:#eff7e8 url(../assets/images/footer-waikiki.jpg) no-repeat center top; }
body#services.site #footer { background:#eff7e8 url(../assets/images/footer-landscaping.jpg) no-repeat center top; }
body#services.military #footer { background:#eff7e8 url(../assets/images/footer-pearl.jpg) no-repeat center top; }
body#services.environmental #footer { background:#eff7e8 url(../assets/images/footer-kailua.jpg) no-repeat center top; }
body#services.landuse #footer { background:#eff7e8 url(../assets/images/footer-waikiki.jpg) no-repeat center top; }
body#services.landscape #footer { background:#eff7e8 url(../assets/images/footer-landscaping.jpg) no-repeat center top; }
body#services.historic #footer { background:#eff7e8 url(../assets/images/footer-historic.jpg) no-repeat center top; }
body#services.gis #footer { background:#eff7e8 url(../assets/images/footer-gis.jpg) no-repeat center top; }
body#services.graphics #footer  { background:#eff7e8 url(../assets/images/footer-lauae.jpg) no-repeat center top; }
body#privacy #footer  { background:#eff7e8 url(../assets/images/footer-shoreline.jpg) no-repeat center top; }
body#sitemap #footer  { background:#eff7e8 url(../assets/images/footer-shoreline.jpg) no-repeat center top; }
body#jobs #footer  { background:#eff7e8 url(../assets/images/footer-shoreline.jpg) no-repeat center top; }


#footer p {
	margin: 0px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 125px 0px 10px; /* padding on this element creates space for the bottom image, footer text appears below the padded area */
	text-align: center;
}
#footer ul {
	margin: 0px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding-top: 125px;
	list-style: none;
	text-align: center;
}
#footer li {
	display: inline;
	padding: 0px 8px;
	border-right: 1px solid #999;
}
#footer a:link, #footer a:visited, #footer a:hover {
	color: #757661;
	text-decoration: none;
}
#footer .last { /* must be used on the last footer navigation item to eliminate its rigth side vertical line */
	border-right-style: none;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0px;
}

/* ------------ utility styling ------------  */

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.fltrtbrdr { /* this class can be used to float an element right in your page and add a gray border to it */
	float: right;
	margin-bottom: 15px;
	margin-left: 15px;
	border: 1px solid #999;
}
.fltlftbrdr { /* this class can be used to float an element left in your page and add a gray border to it */
	float: left;
	margin-right: 15px;
	margin-bottom: 15px;
	border: 1px solid #999;
}
.introText { /* this class is used for styling the first paragraph of major sections */
	font-size: 14px !important; /* !important forces this text to be the specified size, regardless of the normal inheritance */
	line-height: 1.5em;
}
.mainContentImg { /* this class is used to offset main section images from the left side of the containing area */
	margin-bottom: 10px;
	margin-left: 20px;
	border: 1px solid #999;
}
#logoBasic {
	display: none;
}