/**
 *        Name: style.css
 *        Date: 02/04/2005
 *    Modified: 09/24/2006
 *      Author: Tyrel McQueen
 * Description: Styles used by the entire Cava lab website.  See individual
 *              sections for details.  Tested with the following browsers:
 *              Firefox 0.9.3 (OSX)**
 *              Firefox 1.0 Final (Win/OSX)**
 *              Firefox 1.0+ Nightly 02032005 (Win)**
 *              Firefox 1.5 (Win/OSX)
 *              Mozilla 1.4 Final (OSX)**
 *              Mozilla 1.7.5 Final (Win/OSX)**
 *              Mozilla 1.8 alpha 3 (OSX)**
 *              Safari 1.2.4 (OSX)
 *              Internet Explorer 6 (Win)
 *              Internet Explorer 6 SP1 (Win)
 *              Internet Explorer 7 Beta 2/3 (Win)
 *              Netscape 7.2 (Win/OSX)**
 *              Netscape 6.2 (Win)**
 *              Opera 8 (OSX)
 *              Opera 9 (Win)
 *
 *              Opera 7.54 (Win/OSX)
 *                  - improperly centers content when less than menu height,
 *                    but this is an acceptable visual artifact as fixing
 *                    it breaks compatibility with IE 5 on the Mac.
 *                  - would be fixed by adding this line to "content":
 *                      display:           table-cell;
 *
 *              Opera 6.03 (OSX)
 *                  - does not support CSS, so site does not format properly.
 *                  - links do work, but formatting all messed up.
 *                  - Summary: functional, but butt ugly.
 *
 *              Internet Explorer 5.2.3 (OSX)
 *              Internet Explorer 5.1.7 (OS9)
 *                  - have visual artifact if content is longer than menu:
 *                    rather than a continuous orange stripe down the LHS,
 *                    see a cutoff followed by white.  Cannot fix this
 *                    without breaking one or more of the new, modern
 *                    browsers.  As it is only a minor visual problem,
 *                    this is acceptable.
 * 
 *              Netscape Navigator 4.77 (OS9)
 *              Netscape Navigator 4.80 (OS9)
 *                  - Has trouble rendering background colors (does not
 *                    support those CSS properties correctly - only applies
 *                    background to elements within div, not entire div box).
 *                  - Also has minor text alignment issues with LHS.
 *                  - Really nothing can be done to fix these items, as
 *                    CSS support in NN is severely broken.
 *                  - Summary: functional, but butt ugly.
 *
 *              Other browsers untested.
 *              ** These not tested with the 06292006 change.
 *******************************************************************************
 * REVISION HISTORY
 *******************************************************************************
 * 02042005   TMM   Initial version, tested as stated above.
 * 06102006   TMM   Minor revisions: changed table.list to be left justified
 *                  rather than centered (but keep table.list td.heading
 *                  centered). Corrected (table.groupmember tr, img.mug, a.mug,
 *                  div.thumbnail, div.thumbnail img) border to only have one
 *                  value to pass CSS validation. Also, to fix warnings:
 *                    Corrected (div.container, div.title, div.subcontainer, 
 *                      div.nav, div.contentcontainer, div.content, div.footer, 
 *                      div.validated, table.groupmember, div.thumbnail, 
 *                      table.alumni, table.alumni td.heading, table.list, 
 *                      table.list td.heading, table.borderlist, 
 *                      table.borderlist td.heading) to have foreground 
 *                      color of black.
 *                    Corrected (div.titletext, div.subtitletext, div.footer a)
 *                      to have background color of black.
 *                    Corrected (div.menuitem, div.menuitem a, 
 *                      div.selectedmenuitem, div.submenutitle, 
 *                      div.submenutitle a, div.selectedsubmenutitle, 
 *                      div.submenuitem, div.submenuitem a, 
 *                      div.selectedsubmenuitem) to have background color of 
 *                      orange.
 *                    Corrected (div.newmenuitem a) to have background color 
 *                      of yellow.
 *                    Corrected (div.validated a, div.validated a:hover, a.mug, 
 *                      div.thumbnail a, div.thumbnail a:hover) to have 
 *                      background color of white.
 *                    Removed all "table.borderlist" entries, as they are
 *                      now unused by the site.
 *                    Removed "table.list span.subheading" entry, as it is 
 *                      now unused by the site.
 *                    Removed all "table.alumni" entries, as they are now
 *                      unused by the site.
 *                    Added "a.pub" for publications list.
 *                    Added "a.public" and "a.private" for tutorials/references.
 *                  So the validator should only return 7 warnings (these are by design):
 *                    Same colors for background-color and color : div.title
 *                    Same colors for background-color and color : div.footer
 *                    Same colors for background-color and color : div.footer a
 *                    Same colors for background-color and color : div.validated a
 *                    Same colors for background-color and color : a.mug
 *                    Same colors for background-color and color : div.thumbnail a
 *                    Same colors for background-color and color : div.thumbnail a:hover
 *                  Which means the CSS is finally compliant (yay).  
 * 06102006   TMM   Added "unavailpub" link type for pubs not available online.
 * 06232006   TMM   Added "imgmap" image type for front image map to not have a border
 * 06292006   TMM   Changed content container to use min/max height for IE 7
 *                  compatibility. Didn't seem to break anything =).
 * 09012006   TMM   Added code to not change link colors when viewed (default links only)
 * 09022006   TMM   Added newmenuitemdate division type. Added "text-decoration: none"
 *                  to a:hover where appropriate. Also added a:visited to make things
 *                  look right in IE 7. Note that a:hover must come AFTER a:visited 
 *                  to work properly on links that have been visited.
 * 09072006   TMM   Added contentcontainerlong with a different height. Also modified
 *                  contentcontainer/contentcontainerlong to use both min-height
 *                  and height in a clever way so that display: table is no longer
 *                  necessary.
 * 09242006   TMM   Added copyright span type.
 */

/**
 * Generic body settings for all pages. In reality, these settings should
 * not show up, except for the text color as we place div's on top of
 * it. Margin and padding = 0 are required for proper text alignment in
 * some browsers.
 */
html {
  height:           100%;
}
body {
  background-color: white;
  color:            black;
  margin:           0;
  padding:          0;
  height:           100%;
}

/**
 * The container also "contains" the entire document.
 * It's only purpose is to provide the color for the 
 * margin on the right-hand-side.
 */
div.container {
  background-color: white; /* blue; */
  color:            black;
  width:            100%;
  margin:           0;
  padding:          0;
}

/**
 * The title of the document is the black bar at the
 * top of the screen.  It sits in the upper left, and
 * is relative so it stays part of the normal flow.
 * It has a z-index of 3 so that it sits on the top
 * of the menu bar.
 */
div.title {
  position:         relative;
  top:              0;
  left:             0;
  z-index:          3;
  background-color: black;
  color:            black;
  text-align:       left;
  width:            95%;
  margin-left:      0;
  margin-right:     auto;
  margin-top:       0;
  margin-bottom:    0;
}

/**
 * Orange and white text on black for the title bar.
 */
div.titletext {
  text-indent:      20px;
  font-weight:      bold;
  font-size:        20pt;
  font-family:      serif;
  color:            #ff6000;
  background-color: black;
  padding-top:      5px;
  padding-bottom:   5px;
}
div.subtitletext {
  text-indent:      20px;
  font-weight:      normal;
  font-size:        18pt;
  font-family:      serif;
  color:            white;
  background-color: black;
  padding-bottom:   5px;
}

/**
 * The subcontainer holds the content information.  It
 * is necessary to provide an additional background if
 * the content does not cover the entire area.  
 */
div.subcontainer {
  background-color: white; /* green; */
  color:            black;
  width:            95%;
  margin-left:      0;
  margin-right:     auto;
  margin-top:       0;
  margin-bottom:    0;
}

/**
 * The nav, or menu bar, sits in the upper left of 
 * the page, under the title and on top of the 
 * contentcontainer (so z-index = 2). Absolutely
 * positioned as we know exactly where it needs to be,
 * and it removes it from the normal flow so that the
 * content container can sit behind it and extend
 * the orange downward as necessary. The width should
 * be sufficient to contain the menu items one per line
 * AND needs to match the border width of contentcontainer.
 */
div.nav {
  position:         absolute;
  top:              0;
  left:             0;
  width:            140pt;
  background-color: #ff6000;
  color:            black;
  margin-left:      0;
  margin-right:     0;
  margin-top:       0;
  margin-bottom:    0;
  overflow:         hidden;
  z-index:          2;
}

/*
 * Menu choices are black on orange, but
 * invert (white on black) when hovered
 * over.  Use a font contained on most
 * systems to make the width manageable.
 */
div.menuitem {
  text-indent:      2px;
  background-color: #ff6000;
  color:            black;
  font-family:      arial, sans-serif;
  font-weight:      bold;
  font-size:        11pt;
  padding:          2px 0px 2px 0px;
}
div.menuitem a {
  background-color: #ff6000;
  color:           black;
  text-decoration: none;
}
div.menuitem a:visited {
  background-color: #ff6000;
  color:           black;
  text-decoration: none;
}
div.menuitem a:hover {
  color:            white;
  background-color: black;
  text-decoration: none;
}
div.selectedmenuitem {
  text-indent:      2px;
  background-color: #ff6000;
  color:            white;
  font-family:      arial, sans-serif;
  font-weight:      bold;
  font-size:        11pt;
  padding:          2px 0px 2px 0px;

}
div.submenutitle {
  text-indent:      7px;
  background-color: #ff6000;
  color:            black;
  font-family:      arial, sans-serif;
  font-weight:      bold;
  font-size:        10pt;
  padding:          1px 0px 1px 0px; 
}
div.submenutitle a {
  background-color: #ff6000;
  color:           black;
  text-decoration: none;
}
div.submenutitle a:visited {
  background-color: #ff6000;
  color:           black;
  text-decoration: none;
}
div.submenutitle a:hover {
  color:            white;
  background-color: black;
  text-decoration: none;
}
div.selectedsubmenutitle {
  text-indent:      7px;
  background-color: #ff6000;
  color:            white;
  font-family:      arial, sans-serif;
  font-weight:      bold;
  font-size:        10pt;
  padding:          1px 0px 1px 0px; 
}
div.submenuitem {
  text-indent:      12px;
  background-color: #ff6000;
  color:            black;
  font-family:      arial, sans-serif;
  font-weight:      normal;
  font-size:        10pt;
  padding:          0px 0px 0px 0px; 
}
div.submenuitem a {
  background-color: #ff6000;
  color:           black;
  text-decoration: none;
}
div.submenuitem a:visited {
  background-color: #ff6000;
  color:           black;
  text-decoration: none;
}
div.submenuitem a:hover {
  color:            white;
  background-color: black;
  text-decoration: none;
}
div.selectedsubmenuitem {
  text-indent:      12px;
  background-color: #ff6000;
  color:            white;
  font-family:      arial, sans-serif;
  font-weight:      normal;
  font-size:        10pt;
  padding:          0px 0px 0px 0px; 
}
div.newmenuitemtitle {
  text-indent:      2px;
  color:            black;
  background-color: #ffffcc;
  font-family:      arial, sans-serif;
  font-weight:      bold;
  font-style:       italic;
  font-size:        11pt;
  margin-top:       8px;
  padding:          2px 0px 2px 0px;
}
div.newmenuitem {
  text-indent:      7px;
  color:            black;
  background-color: #ffffcc;
  font-family:      arial, sans-serif;
  font-weight:      bold;
  font-size:        10pt;
  padding:          2px 0px 0px 0px;
}
div.newmenuitem a {
  color:           black;
  background-color: #ffffcc;
  text-decoration: none;
}
div.newmenuitem a:visited {
  color:           black;
  background-color: #ffffcc;
  text-decoration: none;
}
div.newmenuitem a:hover {
  color:            #ffffcc;
  background-color: black;
  text-decoration: none;
}
div.newmenuitemdate {
  text-indent:      28px;
  color:            #0000DD;
  background-color: #ffffcc;
  font-family:      arial, sans-serif;
  font-style:       italic;
  font-size:        8pt;
  padding:          0px 0px 2px 0px;
}

/**
 * The content container is used to contain the
 * content div and to provide an orange border on
 * the left-hand-side, to make the menu appear
 * to be a bar down the entire LHS, not just the
 * length of the menu items.  It is also displayed
 * as a table, so all browsers treat height as a
 * minimum height rather than a fixed one.  The
 * height should be sufficient for the entire menu
 * to show! The lhs border width must match the 
 * width of the menu bar (see above).
 * TMM: Changed to use min/max height. Still seems
 * to work across browsers, and now in IE7 Beta 3.
 * TMM: Contentcontainerlong added because of min-height
 * precedence issues across browsers.
 */
div.contentcontainer {
  position:         relative;
  top:              0;
  left:             0;
  background-color: white;
  color:            black;
  margin-left:      0;
  margin-right:     0;
  margin-top:       0;
  margin-bottom:    0;
  border-width:     0 0 0 140pt;
  border-style:     solid;
  border-color:     #ff6000;
/*  display:          table; */
  min-height:       280px;
  max-height:       none;
  height:           auto !important;
  height:           280px;
  z-index:          0;
  padding:          5px 5px 5px 5px;
}
div.contentcontainerlong {
  position:         relative;
  top:              0;
  left:             0;
  background-color: white;
  color:            black;
  margin-left:      0;
  margin-right:     0;
  margin-top:       0;
  margin-bottom:    0;
  border-width:     0 0 0 140pt;
  border-style:     solid;
  border-color:     #ff6000;
/*  display:          table; */
  min-height:       600px;
  max-height:       none;
  height:           auto !important;
  height:           600px;
  z-index:          0;
  padding:          5px 5px 5px 5px;
}

/**
 * The content is contained in its own div
 * where the text is aligned at the top (to
 * undo the vertical text-centering effect of 
 * the content-container in some browsers).
 */
div.content {
  background-color:  white;
  color:             black;
  margin:            0 0 0 0;
  vertical-align:    top;
}

/**
 * The footer contains the links to Princeton,
 * the Chemistry Department, and PRISM. Black
 * to match the title bar.
 */
div.footer {
  background-color: black;
  color:            black;
  text-align:       left;
  width:            95%;
  margin-left:      0;
  margin-right:     auto;
  margin-top:       0;
  margin-bottom:    0;
}

/**
 * The footer graphics are actually links.
 * Make their color black and images have no
 * border so they are transparent (like an
 * image map).
 */
div.footer a {
  color:            black;
  background-color: black;
}
div.footer a:visited {
  color:            black;
  background-color: black;
}
div.footer a:hover {
  color:            black;
  background-color: black;
}
div.footer img {
  border:           0;
}

/**
 * The HTML/CSS validated logos sit at
 * the very bottom of the page, after
 * the footer.  There is also a graphic
 * "Problems viewing this site?" which,
 * when clicked, takes the user to a page
 * explaining what browsers are supported.
 * Want the images to have borders and
 * have them change from white to black
 * when the cursor moves over them.
 */
div.validated {
  background-color: white;
  color:            black;
  text-align:       center;
}
div.validated a {
  color:            white;
  background-color: white;
}
div.validated a:visited {
  color:            white;
  background-color: white;
}
div.validated a:hover {
  color:            black;
  background-color: white;
}
div.validated img {
  border-color:     white;
}

/**
 * There is a dedicated page for each group
 * member. It contains a photograph as well
 * as contact information and accessory
 * links.  These are the table formatting options.
 */
table.groupmember {
  border:           0px;
  background-color: white;
  color:            black;
  border-collapse:  collapse;
  width:            100%;
}
table.groupmember tr {
  border:           2px;
  padding:          2px 2px 2px 2px;
}
table.groupmember td {
  vertical-align:   top;
}
/* You need to set rowspan=2 in HTML. Not supported here. */
table.groupmember td.mug {
  vertical-align:   top;
  width:            170px;
  border-style:     dotted;
  border-width:     0px 1px 0px 0px;
}
img.mug {
  border:     0px;
}
a.mug {
  border:     0px;
  color:      white;
  background-color: white;
}
a.mug:visited {
  border:     0px;
  color:      white;
  background-color: white;
}
a.mug:hover {
  border:     0px;
  color:      white;
  background-color: white;
}

/**
 * These styles are used for "gallery-style" display
 * of images and captions - for the tour.
 */
div.thumbnail {
  float: left;
  border: 0px;
  padding: 6px 6px 6px 6px;
  text-align: center;
  background-color: white;
  color:            black;
}
div.thumbnail pre {
  text-align: center;
  font-family:      arial, sans-serif;
  font-weight:      normal;
  font-size:        10pt;
}
div.thumbnail img {
  border:    0px;
}
div.thumbnail a {
  background-color: white;
  color: white;
}
div.thumbnail a:visited {
  background-color: white;
  color: white;
}
div.thumbnail a:hover {
  background-color: white;
  color: white;
}
div.cleared {
  clear: both;
}

/**
 * These styles are used for generic lists
 * (e.g. list of papers in Tutorials)
 */
table.list {
  border-style:     none;
  background-color: white;
  color:            black;
  border-collapse:  collapse;
  width:            100%;
  text-align:       left;
}
table.list tr {
  border-top:       1px solid black;
  border-bottom:    1px solid black;
  border-left:      1px solid black;
  border-right:     1px solid black;
  padding:          2px 2px 2px 2px;
}
table.list td {
  border-top:       1px solid black;
  border-bottom:    1px solid black;
  border-left:      1px solid black;
  border-right:     1px solid black;
  padding:          2px 2px 2px 2px;
}
/* You might need a colspan */
table.list td.heading {
  background-color: #ffffcc;
  color:            black;
  font-family:      arial, sans-serif;
  font-weight:      bold;
  font-size:        12pt;
  text-align:       center;
}
table.list td.subheading {
  background-color: #ffe3ff;
  color:            black;
  font-family:      arial, sans-serif;
  font-weight:      bold;
  font-size:        10pt; 
  text-align:       center;
}

table.list ul {
}

/* For publications that we have available internally. */
a.pub {
  color:      #0000DD;
  background-color: white;
  font-weight:      bold;
  text-decoration: none;
}
a.pub:visited {
  color:      #0000DD;
  background-color: white;
  font-weight:      bold;
  text-decoration: none;
}
a.pub:hover {
  color:      #0000DD;
  background-color: white;
  font-weight:      bold;
  text-decoration:  underline;
}
/* For publications that we will have available internally. */
a.unavailpub {
  color:      #DD0000;
  background-color: white;
  font-weight:      bold;
  text-decoration: none;
}
a.unavailpub:visited {
  color:      #DD0000;
  background-color: white;
  font-weight:      bold;
  text-decoration: none;
}
a.unavailpub:hover {
  color:      #DD0000;
  background-color: white;
  font-weight:      bold;
  text-decoration:  underline;
}

/* For tutorials/references that we have available internally. */
a.private {
  color:      #0000DD;
  background-color: white;
  font-weight:      bold;
  text-decoration: none;
}
a.private:visited {
  color:      #0000DD;
  background-color: white;
  font-weight:      bold;
  text-decoration: none;
}
a.private:hover {
  color:      #0000DD;
  background-color: white;
  font-weight:      bold;
  text-decoration:  underline;
}

/* For tutorials/references that are available externally. */
a.public {
  color:      #00A617;
  background-color: white;
  font-weight:      bold;
  text-decoration: none;
}
a.public:visited {
  color:      #00A617;
  background-color: white;
  font-weight:      bold;
  text-decoration: none;
}
a.public:hover {
  color:      #00A617;
  background-color: white;
  font-weight:      bold;
  text-decoration:  underline;
}

/* Default hyperlinks */
a {
  color:      #0000DD;
  background-color: white;
  text-decoration: none;
}
a:visited {
  color:      #0000DD;
  background-color: white;
  text-decoration: none;
}
a:hover {
  color:      #0000DD;
  background-color: white;
  text-decoration:  underline;
}

img.imgmap {
  border: 0px;
}

/* for copyrights */
span.copyright {
  font-size:        8pt;
  font-family:      arial, sans-serif;
  color:            #CFCFCF;
}