body {
    font: smaller "News Gothic MT", "Trebuchet MS", "Lucida Grande", "Verdana", sans-serif;
    background: #235;
    color: #000;
    margin: 0;
    padding: 0;
    text-rendering: optimizelegibility;
}
a {
    text-decoration: none;
    border-bottom: 1px solid #358;
    color: #358;
}
a.imagelink {
    border: none;
}
a:visited {
    color: #89a;
}
a:hover {
    color: #235;
}
ul {
    list-style-type: none;
}
#nav {
	color: #0cf;
	background: #235;
        float: left;
        width: 100%;
        border-bottom: 0.6em solid #468;
}
#nav ul { 
	font-size: 85%;
        list-style-type: none;
        margin: 0;
        padding: 0;
        padding-left: 2em;
}
#nav li { 
        float: left;
        margin-right: 1em;
}
#nav a {
        display: block;
	text-transform: lowercase;
	text-decoration: none;
	font-weight: normal;
	padding: 5px 8px;
	color: #cef;
        border-top: 1px solid #358;
	border-right: 1px solid #358;
	border-left: 1px solid #358;
        border-bottom: none;
}

#nav a:hover {
	background: #457;
        color: #cce;
        border-top-color: #568;
        border-left-color: #345;
        border-right-color: #345;
}
#nav .selected a {
	background: #468;
        border-top-color: #579;
        border-left-color: #357;
        border-right-color: #357;

	color: #fff;
}

#header { 
  background: #235;
}
#header h1 { 
  padding: 0.5em 0.8em;
  color: #eef;
  margin: 0;
  font-size: 200%;
}

#header img {
	/* Hmm, padding has no effect at all on IE5. */
	/* So I use margin instead. */
	margin: 5px 5px 10px 3px;
}

#wrap {
	position: relative;
	clear:both;
        background: #fff;
/*        z-index: -1; */
}
#colM {
	width:70%;
	margin:0;
	font-size:100%;
	padding:1.0em 0em 2.5em 1.7em;
        float: left;
	text-align: justify;
        background: #fff;
}

#colR {
        float: right;
	width:25%;
        border-left:1px solid #468;
/* NB.  To get equal-height columns under CSS2 you must resort to fakery.
   a) Use the same background color for both - then it won't be obvious where
      the shorter column ends.  In case of different colors: b) If one column 
      is always shorter, set the container's background color to that column's color.
      If one column is not always shorter: c) Use a fixed-width subcolumn and
      "repeat-y right" a background image in the entire container that -looks- 
      like a column.  If you don't like fixed width, there's no d).
   My current solution is to place a 1px border on the bottom of
      the subcolumn; when it's shorter this sets it off from the page, and
      when it's longer it will have a 1px extra line at
      the bottom (adjacent to the footer).  We then move the footer up by 1px
*/
        border-bottom: 1px solid #468;
	font-size:85%;
	padding:0;
        padding-top: 0.7em;
        background: #eef;
}

#colM p {
	line-height: 1.3em;
	margin-top: 1em;
	/* Setting margin bottom for IE. */
	margin-bottom: 0;
}

#colM hr {
	width: 50%; height: 1px;
	border: none; 
	margin: auto; margin-top: 6em; padding: 0; 
	text-align: center; 
/*	color: #cdf; background-color: #cdf; */
	color: #ddd; background-color: #ddd;
}

#colR h4 {
	background: #468;
	/* Oddly, I have to set margin-top explicitly here for IE5.  Otherwise, it is zero.
	   Perhaps this and the font-size inherit problem are related. */
	margin-top: 1.5em;
	margin-bottom: 1.3em;
	color: #fff;
	padding: 0.4em 0.4em 0.4em 0.9em;
	font-size:100%;
	font-weight: bold;
	/* margin: 0; */
}
#colR a {       /* cholera? */
  color: #235;
}


#colR ul {
	margin: 0;
	padding: 0 0 0 1em;
	line-height: 1.5em;
	list-style: none;
}

#colR li {
	margin: 0;
	padding: 0;
}

#colM ul {
	padding: 0 0 0 1.5em;
	margin: 0;
}
#colM li {
	margin: 1em 0 0 0;
}

#footer { 
        background: #235;
        border-top: 0.6em solid #468;
        clear: both;
        min-height: 2em;
        /* Move footer up by 1px to cover possible extraneous 1px bottom border on the subcolumn.
           Element must be located outside of the columns container div (#wrap); otherwise, a 1px
           gap would be left at the bottom of #wrap. */
        position: relative;
        top: -1px;
}

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

acronym {
/* borders on inlined are ignored in IE5.0 unless layout is absolute (e.g. height param is set.)
   Fixed in IE5.5 (but bottom is dashed). */
	border-bottom: 1px dotted #55d;
	font-style: normal;
	cursor: help;
}

/* This does work, but the effect is funny on links. */
/*
[title] {
	border-bottom: 1px dotted #f00;
}
*/

/* Override font settings in simple.css.  Does not appear to work in IE.  */
th, tr, td { font: inherit; }

table.projects {
	font-size: 85%;
	margin: 2em 2em 0em;
	border-collapse: collapse;
	border: 1px solid #9be;
	text-align: left;
}

table.projects th {
	/* Apparently, IE 5.0 doesn't want to honor 'hidden', and has
	   other table border bugs.  The header border should not
	   be there. */
	border: hidden;  
	border-bottom: 1px solid #9be;
	text-align: left;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.2em;
	font-weight: bold;
}
table.projects td {
	margin: 0;
	padding: 0.5em;
}

table.projects tr.one td {
	background: #def;
	border-right: 1px solid #9be;
}

table.projects tr.two td {
	border-right: 1px solid #9be;
}

table.projhdr, table.contact {
	font-size: 85%;
	border-collapse: collapse;
	border: 1px solid #468;
        font-weight: normal;
	margin-top: 1em;
	margin-bottom: 1em;
	text-align: left;
	width: 100%;
}

table.contact {
	font-size: 100%;
	margin-top: 2em;
	margin-bottom: 2em;
        padding: 0;
        /* Block display required for uniform margin display across browsers.
           Firefox's default "display: table" differs.  */
        display: block;
}

table.projhdr th, table.contact th {
	padding: 0.5em;       /* Padding difference betw. Safari and Firefox */
	padding-right: 1em;
	vertical-align: top;
	background: #eef;
	border-right: 1px solid #468;
        text-align: right;
        width: 6em;
        margin: 0;
}

table.projhdr td, table.contact td {
	padding: 0.5em;
        vertical-align: top;
        margin: 0;
        line-height: 1.3em;
}

table.projhdr td.company {
	color: #039;
	font-weight: bold;
}

/* These need to be changed to div float eventually. */
body.project p.next {
	text-align: right;
	font-size: 85%;
}
body.project p.prev {
	text-align: left;
	font-size: 85%;
}
span.direction {
	color: #6ad;
	font-weight: bold;
}

p.copyright {
	margin-top: 3em;
	margin-bottom: 2.3em;
	font-size: 85%;
	color: #9aa;
	padding: 0.2em;
        padding-left: 1.2em;
	border-top: 1px solid #abb;
	border-bottom: 1px solid #abb;
}

/*
table.projects a {
	text-decoration: none;
	color: #000;
}

table.projects a:hover {
	text-decoration: underline;
	color: #fff;
}

table.projects tr:hover {
	background: #015 !important;
	color: #fff;
}
*/

div.ietablebug {
	/* This is a stupid hack, but IE screws up table width when it's
	   100%.  Fixed by wrapping table in a div.  May not work on IE 5.5. */
	width: 100%;
}

h3.service {
	margin: 1em 0;
	padding: 0;
	font-size: 112%;
	border-bottom: 1px solid #9ab;
	font-weight: bold;
}

/* Safari, note, does not support 'border-collapse: collapse' yet.
   IE has limited support, so the tables look okay. */
table.services {
	margin-top: 2em;
	margin-bottom: 1em;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #468;
	font-size: 100%;
	width: 100%;
}

table.services th {
        margin: 0; 
        padding: 0;
	vertical-align: top;
	background: #eef;
	width: 11em;
	border-right: 1px solid #468;
	text-align: right;
        font-weight: bold;
}

table.services td {
	padding: 0.5em;
        vertical-align: top;
}

table.services span.next {
	color: #78a;
	font-weight: bold;
}

table.services a { 
        margin: 0; padding: 0;
        text-decoration: none;
        border-bottom: none;
        display: block;
        padding: 0.5em;
}
table.services a:hover {
	color: #579;
        text-decoration: underline;
}

/* Cannot get A to expand to entire height of table cell when other cells
   in same row are taller.  Thus, we cannot safely use A:hover to change A background.
   Instead we th:hover, change th background, and allow IE < 7 to degrade to a
   simple decorated link.  Only drawback: entire cell may not be clickable.
*/
table.services th:hover { 
        background-color: #468;
}
table.services th:hover a { 
        color: #fff;
        text-decoration: none;                            
}


/* --- */

div.subnav {
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: 85%;
}
div.subnav .separator {
	display: none;
}
div.subnav .prevpage {
	float: left;
}
div.subnav .nextpage {
	float: right;
}
div.subnav a {
        border: none;
}
div.subnav a:hover {
        border-bottom: 1px solid;
}
	
/***** IE 5/6 specific hacks.  The ones below do not hurt real browsers and
       can be kept in the base stylesheet. */

#wrap {
        /* Unhide the contained divs by moving this back */
        z-index: 0;
        /* Get IE to render the wrap at full height by adding the 
           haslayout property:
           http://www.satzansatz.de/cssd/onhavinglayout.html */
        height: 1%;      /* 0 or 1px will hurt non-IE browsers; but use 0 for safety */
}
img {
        border: none;   /* Remove link border in IE. */
}
/* This is here for IE, to override the font settings in simple.css.  Using 'inherit'
   doesn't work. */
th, td {
	font-size: 100%;
        font-family: "News Gothic MT", "Trebuchet MS", "Lucida Grande", "Verdana", sans-serif;
}

/***** IE 5/6 hacks toxic to other browsers */

#footer {
       _height: 2em;      /* IE < 7 doesn't understand min-height */
}
#nav a {
       /* Remove extraneous 2px all-around padding */
       _padding: 3px 7px;
}
div.subnav .prevpage, div.subnav .nextpage {
       /* Otherwise, any link bottom border is chopped off */
       _height: 1.5em;
}
#colM {
        _padding-top: 2em;  /* Extra padding as IE merges margin and padding */
}

/***** IE 5 hacks only ******/

/*
a {
       border-bottom: none;
       text-decoration: underline;
}
*/