/*==============================================
/* The Basic Stylesheet for citybuilderspdx.com;
/* This can get hacked up into multiple
/* style sheets later, but for now I prefer
/* to have everything in one. Also, I've
/* chosen to use spaces in each element to
/* help with readability. ~b
==============================================*/

/*===================================
/* Reseting all basic styles, so that
/* there are a lot less cross-browser
/* display issues.
===================================*/

* { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, form, body, html, p, input, ul, ol, li { margin: 0; padding: 0;}
ul, ol { list-style: none; }
a img, :visited img, :link img { border: none; }
:link, :visited { text-decoration: none; }
.clear { clear: both; }

/*===================================
/* Amazing big props to Angus Turnbull
/* for this simple fix to the IE PNG
/* conundrum. You are a scholar and
/* a saint, sirrah.
===================================*/

img, div, a { behavior: url(iepngfix.htc); }

/*===================================
/* Global Styles
===================================*/

a {
  color: rgb(146,96,15);
}

a:hover, a:active { color: rgb(106,46,0);}

body { 
  background-color: rgb(148,149,124);
  margin: 60px 0 0 90px;
  color: rgb(20,20,20);
  font-family: Garamond, Georgia, serif;
}

#container {
  background-color: rgb(217,220,155);
  border: 10px solid white;
  width: 720px;
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:700px;
  /*950px*/
}

.splash { 
  height: 160px;
  width: 700px;
  /*203px*/
  background-color: rgb(228,234,184);
  background-repeat: no-repeat;
  border-top: 10px solid white;
  border-bottom: 10px solid white;
}

#content {
  padding: 2em; 
}

#header {
  height: 150px;
}

.clear { clear: both; }

/*===================================
/* Typographic Styles
===================================*/

h1 { margin-bottom: .3em; font-variant: small-caps; }
p { margin-bottom: 1.2em; }

/*===================================
/* Image Splash Styles
===================================*/

#mainSplash { background-image: url(/img/splash01.jpg); }
#projectsSplash { background-image: url(/img/splash02.jpg); }
#employeesSplash { background-image: url(/img/splash09.jpg); }
#linksSplash { background-image: url(/img/splash07.jpg); }
#contactSplash { background-image: url(/img/splash05.jpg); }
#pardeeSplash { background-image: url(/img/pardeeSplash.jpg); }
#docsSplash { background-image: url(/img/splash06.jpg); }

/*===================================
/* Menu Styles
===================================*/

#menu { 
  width: 547px; 
  height: 37px;
  background-image: url(menuBar.png);
  margin: 0 0 0 0;
  padding: 0;
  position: relative;  
  top: 112px;
  left: 25px;
  float: left; 
}

#menu li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
}

#menu li, #menu a {
  height: 38px;
  display: block;
  outline: none;
}

#logo { float: left; margin: 10px 0 0 10px; }

#menu li a span { visibility: hidden; }

#home { left: 2px; width: 91px; }
#projects { left: 92px; width: 98px; }
#team { left: 189px; width: 82px; }
#sustainability { left: 270px; width: 147px; }
#contact { left: 415px; width: 104px; }

#home a:hover { background: transparent url(menuBar.png) -2px -38px no-repeat; }
#projects a:hover { background: transparent url(menuBar.png) -92px -38px no-repeat; }
#team a:hover { background: transparent url(menuBar.png) -189px -38px no-repeat; }
#sustainability a:hover { background: transparent url(menuBar.png) -270px -38px no-repeat; }
#contact a:hover { background: transparent url(menuBar.png) -415px -38px no-repeat; }

#homeSelected { background: transparent url(menuBar.png) -2px -38px no-repeat; }
#projectsSelected { background: transparent url(menuBar.png) -92px -38px no-repeat; }
#teamSelected { background: transparent url(menuBar.png) -189px -38px no-repeat; }
#sustainabilitySelected { background: transparent url(menuBar.png) -270px -38px no-repeat; }
#contactSelected { background: transparent url(menuBar.png) -415px -38px no-repeat; }

/*===================================
/* Header Styles
===================================*/

/*
#header {
  background-image: url(logo.png);
  background-repeat: no-repeat;
  background-position: 10px 10px;
  height: 150px;  
  /*223px*/
/*}
*/

/*===================================
/* Footer Styles
===================================*/

#footer { 
  margin: 40px 0 0 0;
  font-size: 120%;
  width: 700px;
  padding: 0 20px 35px 20px;
  letter-spacing: .1em; 
}

#footerWrapper { text-align: center; margin: 0 auto 0 auto;}

#footer p { margin: 0; }

/*===================================
/* Projects Page Layout
===================================*/


h2 { margin: 1em 0 1em 0 ;}
#kingpark { display: none; }

/*===================================
/* Employee Page Layout
===================================*/

.employeeBox { }

.employeeBox img { 
  border: 4px solid black; 
  width: 115px; 
  height: 130px; 
  float: left;
  margin: 0 1em 2em 0;
}

.employeeBox h1 { }

.employeeBox p { text-align: justify; }

/*===================================
/* Contact Form Layout
===================================*/

form li { margin-bottom: 1em; }

li label {
  position: absolute;
  display: block;
  width: 7em;
  margin: 0 .1em 0 0;
  border: 0px solid rgb(229,220,138);
  padding: 0px;
     font: normal 1em/1.3em georgia, serif;
  text-align: right;
  }
label span {
  color: rgb(146,96,15);
  }
  
input, select, textarea {
     font: normal 1em/1.3em Garamond, Georgia, serif;
  border: 0;
    border: 1px solid rgb(225,202,160);
    background: rgb(223,223,178);
  color: rgb(146,96,15);
  padding: 2px 4px;
  margin: 0 0 0 7.1em;
  }
  
p.submit {
  margin: 12px 0 10px 7.1em;
  padding: 0;
  }
  
p.submit input {
  background-color: rgb(185,185,151);
     font: normal 1em/1.3em arial, helvetica, sans-serif;
    border: 3px solid rgb(175,175,151);
  color: rgb(54,53,48);
  padding: 1px 5px;
  margin: 0;
  }
  
  
/*===================================
/* Pardee Commons Layout
===================================*/

.pardeeHighlights li { margin: 0 0 1em 2em; }
.priorityContact p { margin: 0 0 0 0; }
.priorityContact h3 { margin: 0 0 0 0; font-size: 100%; }
.priorityContact { margin: 0 0 2em 2em; }
h1.pardeeHead { margin: 0; }
h2.pardeeHead { margin: 0 0 1em 0; }

.updateBlock { width: 600px; }
.update { margin: 0 0 20px 0; }
.infoBlock { float: left; width: 200px; padding: 0 0 0 50px; text-align: right; }
.imageBlock { float: right; width: 310px; }
.imageBlock img { margin-bottom: 10px; border: 4px solid white; }

/*===================================
/* Lightbox
===================================*/

#lightbox{  position: absolute;  left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%  ; }

#imageData{  padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }  
#imageData #caption{ font-weight: bold;  }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;  }      
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}     

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }