/* ************************************************************************************************************************** */
/* ************************************************************************************************************************** */
/* STYLESHEET - styles.css */
/* ************************************************************************************************************************** */
/* ************************************************************************************************************************** */
/* */
/* */
@import url("/css/slideshows.css");
@import url("/css/slideshowsThumbnails.css");
@import url("/css/LHT.css");
@import url("/css/jquery_ui_tabs.css");
/* */
/* */
/* */
/* ************************************************************************************************************************** */
/* _________________________________________________ REDEFINED TAGS _________________________________________________________ */
/* ************************************************************************************************************************** */
/* */
/* */
body {
  font-size: 0.8125em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  line-height: 1;
  margin: 0;
  padding: 0;
  color: #333331;
  background: #1a1a1a url("/img/bg_body_fixed.jpg") top center no-repeat fixed; /* 1381 x 924 */
}
form { display: inline; }
p {
  text-align: left;
  line-height: 1.3;
  padding: 0 0 1em 0;
  margin: 0;
}
p.last { padding-bottom: 0; }
h1,
h2,
h3,
h4 {
  letter-spacing: normal;
  margin: 0;
  padding: 0.5em 0; /* top and bottom only */
}
h1 {
  /*color: #474036;  slate (dark gray green) */
  color: #333331; /* Same as text */
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2.27em;
  line-height: 1.27;
  font-weight: normal;
  padding-top: 0;
}
h1.headline {
  margin: -1.35em 0 -.2em -.1em;
  display: block;
}
span.headlinebg {
  color: #faf9f0; /* light beige */
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 6.11em;
  line-height: 1;
  padding: 0 0 0 14px;
}
@media print {
  h1.headline { background: orange; }
  span.headlinebg { background: blue; }
}
h2 {
  color: #4f3f30; /* dark green brown */
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.8em;
  line-height: 1.44;
  font-weight: normal !important;
  word-spacing: .05em; /* wider */
}
h2 a {
  font-weight: normal !important;
}
h2.section {
  position: relative; /* Needed for IE to properly render the border */
  margin: 0 0 .5em;
  padding: 0 0 0.2em;
  border-bottom: 1px dotted #c2bf97; /* khaki gray */
}
h2 span.headline { color: #645839; /* olive */ }
h3 {
  color: #645839; /* olive */
  font-size: 1.2em;
  font-variant: small-caps;
  font-weight: bold;
  line-height: 1.1;
}
h4 {
  color: #474036; /* slate (dark gray green) */
  font-size: 1.01em;
  font-weight: bold;
  line-height: 1.15;
}
/*  Styling <hr> with CSS:  http://www.sovavsiti.cz/css/hr.html
Various CSS properties can be applied on <hr>:
    * All three browsers allow setting width and height of the <hr> element.
    * The border property can be used in IE and Mozilla. It does not work well in Opera.
    * IE uses the color property for the <hr> element.
    * Opera and Mozilla use background-color for the <hr> element.
    * All three browser allow setting a background-image of the <hr> element, however this is not very useful in IE and Opera.
*/
hr  {
  border: none;
  display: block;
  padding: 0;
  margin: 1.5em 0 1.5em 3%; /* Left margin - Attempt to center, based on 1/2 remaining width %. */
  width: 94%;
  height: 1px; /* same as BG img height */
  
  background: transparent url("/img/bg_e0d5b7.gif") repeat-x left top; /* size = 8x8 */

/*  background: transparent url("/img/bullet_diamond-dots.gif") repeat-x left top;  size = 8x8 */
}
.hr {
  display: block;
  padding: 0;
  margin: 1.5em auto; /* Left margin - Attempt to center, based on 1/2 remaining width %. */
  width: 98.6%; /* About 730 x .9 =  */
  height: 8px; /* same as BG img height */
  background: transparent url("/img/bullet_diamond-dots.gif") repeat-x left top; /* size = 8x8 */
}
/**/
blockquote { margin: 1.25em 1em; }
#spotlight blockquote { margin-left: 0; margin-right: 0; }
.quote {
  color: #645839; /* olive */
  border: 3px solid #faf9f3; /* s1 bg */
  display: block;
  padding: 10px;
  background: #fdfdf9 url("/img/quote_olive.png") 10px 10px no-repeat; /* 26x21 */  /* *** WARNING: IE PNG Fix Required *** */
}
.quote p {
  padding-left: 33px; /* pad for bg img (26) + buffer (4)  */
  padding-bottom: .5em;
  font-family: Georgia, Times, serif;
  font-style: italic;
  font-size: 1.05em;
  line-height: 1.4;
}
.quote .author {
  display: block;
  font-size: .9em;
  line-height: 1.1;
  text-align: right;
  letter-spacing: -0.1em; /* narrower */
  padding: 0;
}
/* */
/* */
/* */
/* ************************************************************************************************************************** */
/* _________________________________________________ LINKS __________________________________________________________________ */
/* ************************************************************************************************************************** */
/* */
/* */
/*  LINK SPECIFICATION ORDER:
	Lord	Vader's		Handle		Formerly	Anakin
	a:link	a:visited	a:hover		a:focus		a:active
*/
a { color: #896c26; /* bronze */ }
a:hover { color: #646451; /* graphite green */ }
a img { border: none !important; }
a:focus { outline: none; }
/* */
/* */
/* */
/* ************************************************************************************************************************** */
/* _________________________________________________ ICON LINKS _____________________________________________________________ */
/* ************************************************************************************************************************** */
/* */
/* */
.iconlink {
  margin-top: .5em;
  line-height: 1.2;
}
.iconlink a { font-weight: bold; }
.iconlink p {
  line-height: 1.1;
  padding-bottom: 0 !important;
  padding-top: 0.3em;
}
/* NOTE: For vertical positioning of the background image, the line-height must be considered. (Likely 12.4px)
Vertical position "center" or "50%" could be used, but if the line wraps, the icon will center across multiple lines instead of the first line.
Formula to center the image on the first line text height: (line-height [avg 14] - img-height) / 2 = top position px
*/
div.download {
  background: transparent url("/img/icon_download.gif") left top no-repeat; /* 13x12 */
  padding-left: 16px; /* Indent everything inside the background image (image width + 5px buffer) */
}
div.diamond {
  background: transparent url("/img/bullet_diamond-dots.gif") 0px 3px no-repeat; /* 8x8 */
  padding-left: 12px; /* Indent everything inside the background image (image width + 4px buffer) */
}
div.arrow,
div.webpage {
  background: transparent url("/img/arrow.gif") 0px 3px no-repeat;  /* 10x8 */
  padding-left: 14px; /* Indent everything inside the background image (image width + 4px buffer) */
}
div.arrow:hover,
div.webpage:hover {
  background: transparent url("/img/arrow_hover.gif") 0px 3px no-repeat;  /* 10x8 */
  padding-left: 14px; /* Indent everything inside the background image (image width + 4px buffer) */
}
div.paper {
  background: transparent url("/img/icon_paper.gif") 0px 2px no-repeat;  /* 10x10 */
  padding-left: 14px; /* Indent everything inside the background image (image width + 5px buffer) */
}

/* a.webpage - trailing image size = 8x7 */
div.webpage a,
a.webpage {
  padding-right: 11px; 
  outline: none; 
  background-position: right center;
  background-repeat: no-repeat;
  background-image: url("/img/icon_outside_link.gif"); 
}
div.webpage a:hover,
a.webpage:hover { background-image: url("/img/icon_outside_link_hover.gif"); }
/*
a.webpage:link { background-image: url("/img/icon_outside_link.gif"); }
a.webpage:visited { background-image: url("/img/icon_outside_link.gif"); }
a.webpage:active { background-image: url("/img/icon_outside_link.gif"); }
*/
/* */
/* */
/* */
/* ************************************************************************************************************************** */
/* _________________________________________________ LISTS __________________________________________________________________ */
/* ************************************************************************************************************************** */
/* */
/* */
/* 
ul, ol - Standard margin and padding assumed for 16px font:
margin: 16px 0 16px 0;  16px = 1em
padding: 0 0 0 40px;  40px = 2.5em

ul ul, ol ol
margin: (not specified)
padding: 0 0 0 40px;  40px = 2.5em

li - 
line-height: 19px;  16 x 1.1875em = 19px
*/
ul, ol, dl { 
  /* Needed to counter the IE list bug.  http://www.positioniseverything.net/explorer/ie-listbug.html */
  position: relative; 
}
ol { 
  padding-left: 1em;
  margin-left: 1.25em; 
  /* Numbered List - Indent Note: 
    - For Mozilla and IE consistency, begin w/ "no indent" equivalent as: margin-left: 1.25em; padding-left: 1.25em.
      (*For single-digit numbered lists, padding-left: 1em can be used and still display properly for IE.)
    - For an additional indent, increase the left margin only.
    - FYI: Mozilla defines the margin edge as the decimal while IE defines the margin edge just insde the decimal
  */
}
ul { 
  padding-left: .75em; 
  margin-left: .75em; 
  /* Bulleted List - Indent Note: 
    - For Mozilla and IE consistency, begin w/ "no indent" equivalent as: margin-left: .75em; padding-left: .75em.
    - For an additional indent, increase the left margin only.
  */
}
ul li ul { margin-top: .5em }
/* */
/* */
ul.lexiconList {
  margin-bottom: 0;
  padding-bottom: 1em;
}
ul.lexiconList li {
  margin-bottom: .75em;
  font-size: .95em;
  line-height: 1.4em;
}
ul.lexiconList li b { padding-right: .4em; }
ul.lexiconList li div {
  display: inline;
  padding-left: .25em;
  padding-top: .3em;
  letter-spacing: -.05em; /* closer */
  word-spacing: .04em; /* increase spacing between words */
}
/* */
/* */
/* ************************************************************************************************************************** */
/* _________________________________________________ ICON LINKS _____________________________________________________________ */
/* ************************************************************************************************************************** */
/* */
/* */
#content li {
  line-height: 1.1;
  margin-bottom: .4em;
}
#content ul li { list-style: disc outside url("/img/bullet_diamond-dots.gif"); }
#content ol li { list-style: decimal; }
#designStages ul,
.rightColumn ul,
.rightColumn ol {
  margin-bottom: 0;
  margin-top: 0;
}


#portfolio-lc ul { 
  margin-bottom: 1.25em;
  font-size: .975em;
}
#portfolio-rc ul { 
  margin-bottom: 1.5em;
  font-size: .975em;
}
#content #portfolio-rc ul li,
#content #portfolio-lc ul li { margin-bottom: .45em; }

#portfolio-lc.module div.iconlink { clear: right; }



#designStages ul,
.box ul,
.rightColumn ul { 
  /*padding-left: 1.75em; margin-left: 0;   = old code */
  padding: 0 0 0 .75em; 
  margin: 0 0 0 .75em; 
  /* Bulleted List - Indent Note: 
    - For Mozilla and IE consistency, begin w/ "no indent" equivalent as: margin-left: .75em; padding-left: .75em.
    - For an additional indent, increase the left margin only.
  */
}
.rightColumn ul li { list-style: disc outside url("/img/bullet_diamond-black.gif"); }
/* */
/* */
/* */
/* ************************************************************************************************************************** */
/* _________________________________________________ STRUCTURE AND TABULAR __________________________________________________ */
/* ************************************************************************************************************************** */
/* */
/* */
table td { vertical-align: top; }
.fixed-body {
  display: block;
  /* Auto-center on the page */
  width: 780px;
  margin: 0 auto;
  text-align: left;
}
.inner-wrap { padding: 25px; }
.leftColumn {
  position: relative; /* Position needed to counter IE bug */
  display: block;
  float: left;
  overflow: hidden; /* Needed so IE doesn't break the float if there's unbreakable content that exceeds the box width */
  width: 66%;  /* Leave 3% buffer (approx. 22px) */
}
.homepage .leftColumn {
  float: right;
  margin-left: 10px;
}
.rightColumn {
  position: relative; /* Position needed to counter IE bug */
  display: block;
  float: right;
  overflow: hidden; /* Needed so IE doesn't break the float if there's unbreakable content that exceeds the box width */
  width: 31%;
}
.leftColumnEven,
.rightColumnEven { 
  position: relative; /* Position needed to counter IE bug */
  display: block;
  float: left;
  overflow: hidden /* Needed so IE doesn't break the float if there's unbreakable content that exceeds the box width */;
  width: 48% /* Leave 4% buffer (approx. 29px) */;
}
.rightColumnEven { float: right }

.tricolumn td.col1 {
  width: 33%;
  padding-right: 15px;
}
.tricolumn td.col2 {
  width: 33%;
  padding: 0 15px;
}
.tricolumn td.col3 {
  width: 33%;
  padding-left: 15px;
}
/**/
#spotlight-pics { margin-bottom: 7px; }
#spotlight-pics.tricolumn td { padding: 0; }
#spotlight-pics.tricolumn td.col1 { text-align: left; }
#spotlight-pics.tricolumn td.col2 { text-align: center; }
#spotlight-pics.tricolumn td.col3 { text-align: right; }
#spotlight-pics td img {
  border: 1px solid #c2bf9c /* khaki gray - outer border */;
  padding: 1px /* inner border */;
}
/**/
/**/
.borderSidesDotted {
  border-width: 0 1px;
  border-style: dotted;
  border-color: #e8e5c5;
}
.borderSidesDashed {
  border-width: 0 1px;
  border-style: dashed;
  border-color: #e8e5c5;
}
/* */
/* */
/* */
/* ************************************************************************************************************************** */
/* _________________________________________________ COMMON _________________________________________________________________ */
/* ************************************************************************************************************************** */
/* */
/* */
.png-fix { behavior: url("/js/pngbehavior.htc"); }
.clear {
  display: block;
  clear: both;
 /*  margin: 0 0 -1px; Negate the 1px of height */
  height: 1px;
  width: 100%;
  font-size: 1px; /* Necessary in case there's whitespace between the tags */
}
.required {
  padding: 0 3px;
  font-size: 1em;
  color: #CC0000;
}
.left { float: left; }
.right { float: right; }
.center { text-align: center }
.smaller { font-size: .95em; }
.smaller2 { font-size: .90em; }
.normal,
html .normal,
html .normal a { font-weight: normal; font-style: normal; }
.indent { margin-left: 10px; }
.indent2 { margin-left: 20px; }
a.nodecor { text-decoration: none }
.hidden { display: none }
.smallcaps { font-variant: small-caps; }
.noitalics { font-style: normal; }
.whiteBG { background-color: white; }
/* */
/* */
/* */
/* ************************************************************************************************************************** */
/* _________________________________________________ SPECIAL TEXT FORMATTING ________________________________________________ */
/* ************************************************************************************************************************** */
/* */
/* */
.company { /* font-style: italic; */ }
.sidenote {
  font-size: .91em;
  font-style: italic;
  line-height: 1.2;
}
.module { margin-bottom: 17px; }
.rightColumn .module { margin-bottom: 20px; }
.module p.last { padding-bottom: 0 }
.nobottom { padding-bottom: 0 !important; margin-bottom: 0 !important; }

.linkExample { margin-bottom: 1px; }
#designStages .linkExample { padding: .25em 0 .75em;  }
  .linkExample a {
    font-variant: small-caps;
    line-height: 1;
    text-decoration: none;
  }
    .linkExample a span span { color: #333331; /* Same as text color */ }


.creditNRDI {
  letter-spacing: -.01em; /* closer */ 
  word-spacing: .075em; /* wider */
  text-align: right;
  color: #645839; /* olive */
  font-family: Georgia, "Palatino Linotype", Times, serif;
  font-size: 1.05em;
  font-style: italic; 
}
.creditNRDI .bracket { font-style: normal; }
.creditNRDI .begin { padding-right: .5em }
.creditNRDI .end { padding-left: .5em }

.backtotop a {
  display: block;
  background: transparent url("/img/icon_arrow_up_top.gif") top left no-repeat;
  width: 30px;
  height: 12px;
  padding-left: 15px;
  font-size: .85em;
  font-variant: small-caps;
  text-decoration: none;
}
.backtotop {
  margin: 1.25em 0 0;
  clear: both;
  vertical-align: baseline;
}
/* */
/* */
/* */
/* ************************************************************************************************************************** */
/* _________________________________________________ CONTAINERS _____________________________________________________________ */
/* ************************************************************************************************************************** */
/* */
/* */
#header.fixed-body {
  z-index: 10;
  position: relative;
  height: 55px;
}
h1#heading {
  padding: 0;
  margin: 0;
  background: pink;
}
#heading a#logo {
  display: block;
  width: 272px;
  height: 41px;
  background: url("/img/header_dfpdesign.png") left top no-repeat; /* *** WARNING: IE PNG Fix Required *** */
  text-decoration: none;
  cursor: pointer;  /* Explicitly define so we guarantee it looks like a link */
}
@media screen {
  #heading a#logo {
    position: absolute;
    top: 7px;
    left: 0px;
  }
}
#heading a#logo span { display: none; }


/* Style for the entire menu (uses jQuery LavaLamp plugin) */
#menu {
  z-index: 20;
  position: absolute;
  height: 39px; /* channel img height (13) + buffer (3) + pointer (23) */
  width: 75%;
  top: 81px;
  left: 19px;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px; /* Assign pixels for accurate and consistent list positioning */
}
/* Force the list to flow horizontally */
#menu li {
  float: left; 
  list-style: none;
  margin-right: 15px;
  padding: 0;
}
/* Styles for each menu-item. */
#menu li a {
  z-index: 10;
  position: relative;
  display: block;
  float: left;
  overflow: hidden;
  height: 13px; /* height of bg img */

  padding-bottom: 10px; /* extra buffer on hyperlink */
  outline: none; /* Avoid Mozilla dotted border */
  background-repeat: no-repeat;
  background-position: left top;
}
#menu li.first a { 
  padding-left: 0;
  margin-left: 0;
}
#menu li.last a { 
  padding-right: 0;
 /* margin-right: 40px;  extra buffer for easing */ 
}
#menu li a span,
.home a span { display: none; }
.home a#menu-portfolio,
.home a#menu-services,
.home a#menu-resources,
.home a#menu-about {
  display:block;
  height: 13px; /* height of bg img */
}

a#menu-portfolio {
  background-image: url("/img/menu-portfolio.png"); /* img is not transparent */
  width: 83px; /* width of bg img */
}
a#menu-services {
  background-image: url("/img/menu-services.png"); /* img is not transparent */
  width: 67px; /* width of bg img */
}
a#menu-resources {
  background-image: url("/img/menu-resources.png"); /* img is not transparent */
  width: 85px; /* width of bg img */
}
a#menu-about {
  background-image: url("/img/menu-about.png"); /* img is not transparent */
  width: 53px; /* width of bg img */
}

#menu li.divider {
  z-index: 7;
  position: absolute;
  left: 0px;
  width: 99%;
  margin-right: 0px;
  height: 39px; /* same as li.back */
  background: transparent url("/img/bg_e0d5b7.gif") 0px 23px repeat-x;
  font-size: 1px; /* Just in case whitespace occurs between the tags */
}

/*  Represents the background of the hovered menu-item. (HTML dynamically generated by the jQuery LavaLamp plugin)  */        
#menu li.back {
  z-index: 8;
  position: absolute;
  width: 54px; /* width of bg img */
  background: transparent url("/img/menu_pointer.png") 0px 16px no-repeat; /* img is not transparent */
}
#menu li.back,
#menu li.back .left { height: 39px; /* bg img height (23) + offset from menu items (16) */ }


#content {
  clear: both;
  font-size: .88em;
}
#content-top {
  display: block;
  background: transparent url("/img/bg_content-top.png") left top no-repeat; /* img has transparency, but no translucent pixels */
  height: 14px;
}
#content-body {
  position: relative;
  padding-top: 40px;  /* buffer between #content-body and #content-top */
  background: url("/img/bg_content-body.png") left top repeat-y; /* img is not transparent */ 
}
/* BUG FIX - IE seems to offset white bg color assigned to #content-body about 20px right of the bg image, 
  so bg color is planned to accomodate IE. For inner-wrap, change side padding to use side margin instead and then assign bg color.
  (Background color isn't required, but helps to avoid the unsightly flash of no background while the bg image loads.)
*/
#content-body .inner-wrap { 
  padding: 0px 0px 25px;
  margin: 0px 25px;
  background-color: white;
}
#content-body #framedPhoto-spacer {
  position: relative; /* Position needed to counter IE bug */
  display: block;
  float: right;
  overflow: hidden; /* Needed so IE doesn't break the float if there's unbreakable content that exceeds the box width */
  width: 396px;
  height: 152px;
  /*background: red;*/
}
p.intro, 
#content-body .intro p {
  font-size: 1.04em;
  line-height: 1.55;
}
#content-bottom {
  display: block;
  background: transparent url("/img/bg_content-bottom.png") left top no-repeat; /* img has transparency, but no translucent pixels */
  height: 25px;
}
#footer {
  display: block;
  margin-top: 30px;
  font-size: .8em;
  color: #dcd5c3; /* Light Khaki Gray */
  background: #33332D url("/img/bg_footer.gif") left top repeat-x;
  border-top: 6px solid #191919;
}
#footer a {
  text-decoration: none;
  color: #ba9438; /* rust orange */
}
#footer a:hover { color: #c2bf97; /* khaki gray */ }
#footer .inner-wrap { padding: 10px 2px 15px; }
#footer-block {
  float: left;
  overflow: hidden; /* Needed so IE doesn't break the float if there's unbreakable content that exceeds the box width */
  width: 69%; /* Leave 2% buffer (approx. 14px) */
  /*508px; *//* fixed-body(780) - inner-wrap padding(50) - contactinfo(215) - buffer(17) */
}
#footer #trademark {
  display: block;
  float: right;
  overflow: hidden; /* Needed so IE doesn't break the float if there's unbreakable content that exceeds the box width */
  width: 69px; /* img(69) */
  height: 60px; /* img(50) + buffer(10) */
  background: transparent url("/img/dp_trademark.png") left top no-repeat; /* *** WARNING: IE PNG Fix Required *** */
}
#trademark span { display: none; }
#footer-menu {
  font-size: 1.1em;
  line-height: 1.5;
  padding: .1em 0 1em;
}
#footer-menu a { padding: 0 4px; }
#footer #copyright { 
  padding: .5em 0 .2em 0; 
  color: #b3b097; /* Khaki */
}
#footer #designer { 
  font-size: .925em; 
  color: #b3b097; /* Khaki */
}
#footer .description {
  font-size: .95em;
  line-height: 1.25;
  padding: 1em 3.5em 1em 0;
}
#footer #contactinfo {
  width: 28%; /*215px;*/
  float: right;
  overflow: hidden; /* Needed so IE doesn't break the float if there's unbreakable content that exceeds the box width */
}
#footer #contactinfo div { margin-bottom: .3em; }
#footer #contactinfo h2 {
  padding-top: 0;
  color: #b3b097; /* Khaki */
}
#footer #contactinfo .address {
  margin-bottom: 1em;
  line-height: 1.3;
}
#footer #contactinfo .phone,
#footer #contactinfo .fax,
#footer #contactinfo .email { line-height: 1.3; }
#footer #contactinfo .icon { padding-right: 6px; /* Pad as buffer for icon image (10x10) and text */ }
/* */
/* */
/* */
/* ************************************************************************************************************************** */
/* _________________________________________________ ROUNDED BOX CORNERS ____________________________________________________ */
/* ************************************************************************************************************************** */
/* */
/* */
/* set millions of background images http://www.neuroticweb.com/recursos/css-rounded-box/index.php?idioma=en */
/* height and width stuff, width not really necessary. */
.rbtop div,
.rbtop,
.rbbot div,
.rbbot {
  width: 100%;
  height: 7px;
  font-size: 1px;
}
.rbcontent { margin: 0.25em 1em 0.4em 1em; }
.rbroundbox { margin: 0 auto 2em; }
.rbcontent h2 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.4em;
  color: #fefefe;
  padding: 0 0 .3em 0;
  margin: 0;
}
.rbroundbox { background: transparent url("/img/box_b3b097.gif") repeat; }
.rbtop div { background: transparent url("/img/box_b3b097_tl.gif") no-repeat top left; }
.rbtop { background: transparent url("/img/box_b3b097_tr.gif") no-repeat top right; }
.rbbot div { background: transparent url("/img/box_b3b097_bl.gif") no-repeat bottom left; }
.rbbot { background: transparent url("/img/box_b3b097_br.gif") no-repeat bottom right; }
/* */
/* */
/* */
/* ************************************************************************************************************************** */
/* _________________________________________________ BOX STYLES _____________________________________________________________ */
/* ************************************************************************************************************************** */
/* */
/* */
.box {
  position: relative; /* Position needed to counter IE bug */
  border-width: 1px;
  border-style: solid;
  padding: 3px; /* width of inner border */
  margin: 0 0 1.5em 0;
  clear: both;
}
.box div.inner {
  position: relative; /* Position needed to counter IE bug */
  margin: 0;
  padding: 10px;
}
.box div.inner p,
.box div.inner ul li {
  font-size: .93em;
  line-height: 1.15;
}
.box div.inner a { line-height: 1.2; }
.box div.inner h2,
.box div.inner h3 {
  padding-top: 0;
  margin-top: 0;
}
.s1 {
  background: white; /* inner border */
  border-color: #f0efe6; /* outer border - light beige */
}
.s1 div.inner { background-color: #faf9f3; /* box main bg */ }
.s2 {
  background: #ebebda; /* inner border */
  border-color: white;
  border-width: 4px; /* outer border */
}
.s2 div.inner { background-color: #f6f6ed; }
.s3,
.s3 a:link { color: #c2bf9c;  /* khaki gray */ }
.s3 div.inner a { font-size: .9em; }
.s3 {
  background: white;
  padding: 4px; /* inner border */
  border-color: #685B47; /*5d4e40;*/
  border-width: 2px; /* outer border */
}
.s3 div.inner { 
  background: #4f3f30 url("/img/maybes/entry_light_post_solid_225_22pct.png") right bottom no-repeat; /* *** WARNING: IE PNG Fix Required *** */ 
}
html .s3 div.inner h3 {
  color: white;
  background: #5d4e40;
  padding: .5em;
  margin-bottom: 8px;
}
.s4,
html .s4 div.inner a:link
/*, html .s4 div.inner a:visited */ { color: #b3b097; }
.s4 div.inner a { font-size: .9em; }
.s4 {
  background: white; /* inner border */
  border-color: #331; /* outer border */
}
.s4 div.inner { 
  background: #554 url("/img/maybes/entry_lantern_solid_225_22pct.png") bottom right no-repeat; /* *** WARNING: IE PNG Fix Required *** */ 
}
html .s4 div.inner h3 {
  color: white;
  background: #605b50;
  padding: .5em;
  margin-bottom: 8px;
}
.s5 {
  background: #c2bf9c; /* khaki gray */
  padding: 4px; /* inner border */
  border-color: #69643c;
  border-width: 2px; /* outer border */
}
.s5 div.inner { background: white; }
.s6 {
  background: white; /* inner border */
  border-color: #4f3f30;
  border-width: 2px; /* outer border */
}
.s6 div.inner { background: #e8e5c5; }
.s7 {
  background: white; /* inner border */
  border-color: #e0dcbb; /* outer border */
}
.s7 div.inner { background: #faf9f3; }
/* */
/* */
/* */
/* ************************************************************************************************************************** */
/* _________________________________________________ LEXICON BOX ____________________________________________________________ */
/* ************************************************************************************************************************** */
/* */
/* */
.lexicon {
  width: 225px;
  margin: 0 0 .75em 1.25em !important; 
  clear: right;
}
.description .lexicon {  margin-bottom: .75em !important; }
.lexicon .inner { 
  background: url("/img/bg_book_open.png") right bottom no-repeat; 
  padding: 8px !important;
}
.lexicon .syllables {
  font-weight: bold;
  word-spacing: .2em; /* increase spacing between words */
}
.lexicon .pronounce { padding-left: .6em; word-spacing: .2em; /* increase spacing between words */ display: none; }
.lexicon .wordClass { font-style: italic; padding-left: .6em; }
.lexicon .word { padding-bottom: .6em; }
div.lexicon div.inner p { /* Needs specificity */
  font-size: .9em;
  letter-spacing: -.05em; /* closer */
  word-spacing: .05em; /* increase spacing between words */
  line-height: 1.3;
  padding-bottom: .4em;
}
.lexicon p.last { padding-bottom: 0 !important; }
.lexicon  p.numbered {
  text-indent: -1em; 
  padding-left: 1em;
}
.lexicon ol { 
  font-size: .9em;
  padding: 0 0 0 1em;
  margin: 0 0 0 1.25em; 
  /* Numbered List - Indent Note: 
    - For Mozilla and IE consistency, begin w/ "no indent" equivalent as: margin-left: 1.25em; padding-left: 1.25em.
      (*For single-digit numbered lists, padding-left: 1em can be used and still display properly for IE.)
    - For an additional indent, increase the left margin only.
    - FYI: Mozilla defines the margin edge as the decimal while IE defines the margin edge just insde the decimal
  */
}
.lexicon ul { 
  font-size: .9em; 
  padding: 0 0 0 .75em; 
  margin: 0 0 0 .75em; 
  /* Bulleted List - Indent Note: 
    - For Mozilla and IE consistency, begin w/ "no indent" equivalent as: margin-left: .75em; padding-left: .75em.
    - For an additional indent, increase the left margin only.
  */
}
.lexicon li.last { margin-bottom: 0 !important; }
/* */
/* */
/* */
/* ************************************************************************************************************************** */
/* _________________________________________________ THUMBNAILS ____________________________________________________ */
/* ************************************************************************************************************************** */
/* */
/* */
div.thumb {
  position: relative; /* Position needed to counter IE bug */
  width: 56px;
  height: 56px;
  float: left;
  overflow: hidden; /* Needed so IE doesn't break the float if there's unbreakable content that exceeds the box width */
  display: inline;
  margin: 0 10px 3px 0;
}
.thumb div { border: 1px solid #c2bf9c; /* khaki gray */ } /* outer border */
.thumb div img,
.thumb div p { border: 2px solid white; } /* inner border */
.thumb div p { padding: 0; }
/* */
/* */