/* netproject website style sheet */
/* Written 2003-09 by cpbs */

/*
Browser test list:

At netproject offices:
Galeon 1.2.7 on Red Hat 9
IE 5.0 on Windows 98

At Charles's house:
IE 6.0 on Windows XP
Mozilla 1.0 on Debian 3.0
Konqueror 2.2.2 on Debian 3.0
Lynx 2.8.4.1b on Debian 3.0

On Knoppix 3.1:
Konqueror 3.0.4
*/

/*
Overall page structure
======================

BODY with overall page-style classes
  DIV.bodytext  (contains the page's "live" content)
    H1
      IMG of netproject logo
      SPAN.url (containing "www.netproject.com")
    P.hide "This page uses style sheets"

on splash page:
    BLOCKQUOTE.slogan  (for short one-sentence slogan)
    P.nextpagelink A  (for link to main page)

on main pages:
    DIV.introtext  (to hold introductory text)

  DIV.deco1     (empty, for layout)
  DIV.deco2     (empty, for layout)
  DIV.deco3     (empty, for layout)
  DIV.deco4     (empty, for layout)
  DIV.deco5     (empty, for layout)

  DIV.navigation  (for navigation bar)
    DIV.site-links   (currently should be empty)
    DIV.hot-links  (for "hot links" section)
      H2 "Hot Links"
      UL
        LI A  (for each link)
      P   (empty, for layout purposes)
    HR
    DIV.site-nav
      H2.hide "Navigation"
      UL
        LI A  (for each top-level link)
        LI.current  (for current top-level section)
          UL
            LI A  (for each subsection)
            LI.current  (for current subsection, if any)

  DIV.footer  (for authorship, modification, copyright etc.)
    HR.hide
    ADDRESS
      "Last updated"
      SPAN.date  ISO format date
      "by"
      SPAN.maintainer  editor name
*/

/* Ordinary HTMLish styley stuff */

A:link { color: #00f; }
A:visited { color: #963; }
A:hover { color: #f00; text-decoration: underline; }
A:active { color: #800; }

/* Mentions of "netproject" should be marked up with a SPAN of class "np" */

/* .np nosuchelement { color: #3471cb; font-weight: bold; } */
.np {
  color: #0063ad;
  font-weight: bold;
  text-transform: lowercase;
}
A:hover .np { color: #f00; }

DT, TD.tabhead { font-weight: bold; white-space: nowrap; }
TD { vertical-align: baseline; padding-right: 1em; padding-left: 0; }

.alert { display: block; padding: 1em; margin: 2em; border: double black thick; background: #ec8; }

IMG.floatleft  { float: left; margin: 4px 8px 4px 0; }
IMG.floatright { float: right; margin: 4px 0 4px 8px; }

/* Stuff for CSS-less browsers only */

.hide { display: none; }

/* For testing... */

/*
* { border: solid 3px #000; }
* * { border: solid 3px #f88; }
* * * { border: solid 3px #8f8; }
* * * * { border: solid 3px #88f; }
* * * * * { border: solid 3px #000; }
* * * * * * { border: solid 3px #f88; }
* * * * * * * { border: solid 3px #8f8; }
* * * * * * * * { border: solid 3px #88f; }
* * * * * * * * * { border: solid 3px #000; }
* * * * * * * * * * { border: solid 3px #f88; }
* * * * * * * * * * * { border: solid 3px #8f8; }
* * * * * * * * * * * * { border: solid 3px #88f; }
*/

/* Main page elements */

HTML, BODY { margin: 0; padding: 0; }
BODY { background: white; color: black; }

.bodytext { margin: 75px 15px 5px 160px; padding: 5px; text-align: justify; font-family: times, serif; }

H2, H3, H4, H5, H6 { text-align: left; }

H1 { text-align: center; color: #009c42; font-weight: bold; margin: 0 0 1em 0; padding-top: 1em; }
H1:firstline { color: #000000; font-weight: normal; }
H1 .url { font-size: medium; color: #009C42; font-weight: bold; }

.introtext { margin: 40pt 40pt 1pt; }

.footer { clear: both; }

ADDRESS {
  margin: 3px 0;
  padding: 2px 2em;
  text-align: right;
  border-top: black thin solid;
  background: #ec8;
  border-bottom: black thin solid;
}

/* Gradient page decoration, including logo */

/* top border */
.deco1 {
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 5px;
  border-top: solid #0063ad 5px;
}

/* left border */
.deco2 {
  position: absolute; top: 0; left: 0;
  width: 5px;
  height: 75px;
  border-left: solid #0063ad 5px;
}

/* top gradient */
.deco3 {
  position: absolute; top: 5px; left: 0;
  width: 100%; height: 70px;
  margin: 0; padding: 0;
  background: url(h-grad.jpg) repeat-y #0063ad 255px 0;
}

/* logo in top left corner */
.deco4 {
  position: absolute; top: 5px; left: 5px;
  width: 250px; height: 70px;
  padding: 0;
  background: url(../logos/netlogot.gif) 50% 50% no-repeat white;
}

/* Navigation bar on left of page */

.navigation {
  position: absolute; top: 75px; left: 0;
  width: 135px; bottom: auto;
  margin: 0; padding: 5px;
  border-left: solid #0063ad 5px;
  background: url(v-grad.jpg) repeat-x #0063ad;
}

.navigation UL { margin: 0; padding: 0; }
.navigation UL UL { margin-left: 10px; font-size: small; }

.navigation UL LI {
  display: block;
  list-style: none; /* for IE */
  margin: 3px 0;
  border: 1px solid #8ce;
  padding: 0;
}

.navigation UL LI A { display: block; margin: 0; padding: 0; background: #8ce; }
.navigation UL LI A:hover { background: #c3e5f6; }
.navigation .hot-links A { background: transparent; }
.navigation LI.current { background: transparent; border: solid 1px #bef; }
.navigation LI.current > A { background: #4497cd; }
.navigation LI.current > A:link { color: #88f; }
.navigation LI.current > A:visited { color: #fa5; }
.navigation .hot-links UL LI { border: none; padding: 2px; }
.navigation .hot-links UL LI.current { color: red; border: solid 1px red; padding: 1px; }
.navigation LI.current { color: white; }
.navigation LI.current .np { color: #bef; }
.navigation LI.current LI .np { color: #0063ad; }
.navigation LI.subheading { background: transparent; color: lightgreen; border: none; }
.navigation LI.subheading .np { color: #bef; }
x .navigation UL LI:hover { background: #ec8; }
x .navigation UL UL LI:hover { background: #ca6; }

.navigation HR {
  border: none;
  height: 2px;
  width: 66%; margin-left: auto; margin-right: auto;
  background: blue;
}

.navigation .hot-links H2 { color: red; font-weight: bold; }
.navigation .hot-links H2 { border: solid thin red; border-bottom: none; margin: 15px 0 8px; }
.navigation H2 { color: blue; font-family: helvetica, sans-serif; font-size: medium; text-align: center; }
.navigation .hot-links P { border: solid thin red; border-top: none; height: 10px; margin: 8px 0 4px; }

/* Welcome page */

/* no logo in top left corner */
x .welcomepage .deco4 {
  background: white;
  background-image: none; /* konq 2.2.2 doesn't reset image otherwise */
}
.welcomepage .deco1,
.welcomepage .deco2,
.welcomepage .deco3,
.welcomepage .deco4,
.welcomepage .deco5,
.welcomepage .footer
  { display: none; }

/* welcome page pop-up menu */

x .welcomepage .navigation { background: none; border: none; position: static; }
x .welcomepage .navigation > * { display: none; }
x .welcomepage .navigation .hot-links { display: block; position: absolute; top: 0; left: 0; margin: 0; padding: 0; background: white; }
x .welcomepage .navigation .hot-links > H2 { display: block; width: 100%; }
x .welcomepage .navigation .hot-links { width: 50%; }
x .welcomepage .navigation .hot-links:hover > * { display: block; }
x .welcomepage .navigation .hot-links > * { display: none; }
x .welcomepage .navigation { border-top: solid thin black; display: block; width: auto; margin: 30px -30px -30px -30px; padding: 0; }
x .welcomepage .navigation:hover { border: solid thin black; }
.welcomepage .navigation .hot-links A:hover { background: yellow; }

.welcomepage { margin: 50px auto 0; padding: 0; border: solid #0063ad 5px;
width: 90%; max-width: 1000px;
}
.welcomepage .box {
background: white url(welcome-bg.jpg) no-repeat 50% 70%;
}
.welcomepage .bodytext { margin: 0; padding: 30px;
}
.welcomepage .navigation { display: block; width: 25%; position: static; background: transparent; border: none; margin: 0; padding: 0; }
.welcomepage .navigation .site-links,
.welcomepage .navigation .site-nav,
.welcomepage .navigation HR { display: none; }
.welcomepage .navigation .hot-links { display: block; border-top: solid #0063ad 3px; border-right: solid #0063ad 3px; margin: 0; padding: 0; width: 100%; background: white; }
.welcomepage.hbar .navigation .hot-links { width: 100%; }

.welcomepage .box > .navigation { margin-top: -50px; }

.welcomepage .navigation .hot-links H2,
.welcomepage .navigation .hot-links LI
{ display: block; float: none; width: 100%; margin: 0; border: none; padding: 0; }

.welcomepage .navigation .hot-links H2 { font-size: medium; font-weight: bold; }

.welcomepage .navigation .hot-links LI { border-top: solid #0063ad 1px; font-size: small; }

.welcomepage .navigation .hot-links LI A { padding: 2px 5px; margin: 0; }

.welcomepage .navigation .hot-links P { clear: both; border: none; height: auto; margin: 0; }

.welcomepage.hbar .navigation .hot-links H2,
.welcomepage.hbar .navigation .hot-links LI
{ float: left; width: 25%; text-align: center; }

/* push nav-bar background into logo's space */
x .welcomepage .navigation { top: 40px; }
/* push nav-bar content back again */
x .welcomepage .hot-links { margin-top: 40px; }
/* spread out content of nav-bar */
x .welcomepage .navigation UL LI { margin: 5px 0; }
x .welcomepage .navigation UL LI A { padding: 5px 1px; }
x .welcomepage .navigation HR { margin-top: 10px; margin-bottom: 10px; }
.welcomepage H1 IMG { max-width: 80%; }
.welcomepage H1 .url { display: none; font-size: large; }

.slogan { text-align: center; margin: 30pt 25% 30pt; font-family: times, serif; font-size: large; }

.nextpagelink {
  text-align: right;
  margin: 40px 10% 0;
  font-family: times, serif;
  font-size: medium;
}

/*
 * This rule cleanly fails to apply in IE5.  It's broken in konq 2.2.2;
 * it borders only direct descendants and doesn't border nested elements
 * - for a clean look, therefore, use <span>...</span> around entire
 * content of A element.
 */
.nextpagelink A {
  padding: 3px 10px;
  border: solid 1px #009c42;
  background: white;
}

/* for konq 2.2.2, to get around background highlighting aspect of
 * abovementioned problem */
.nextpagelink A * { background: inherit; }

/*
 * alternative to above two rules:
.nextpagelink .nextpagelink-left { padding-left: 10px; padding-right: 0; background: inherit; border-left: solid 1px #009c42; }
.nextpagelink .nextpagelink-right { padding-left: 0; padding-right: 10px; background: inherit; border-right: solid 1px #009c42; }
.nextpagelink A * { padding-top: 3px; padding-bottom: 3px; border-top: solid 1px #009c42; border-bottom: solid 1px #009c42; background: inherit; }
*/

.nextpagelink A,
.nextpagelink A:link, /* IE5 seems to need these to override plain A:link etc above */
.nextpagelink A:visited { color: #009c42; text-decoration: underline; }
.nextpagelink A:hover { color: #f00; background: yellow; }

/* "fixed" variant, no longer maintained due to lack of support in IE */

.fixed .deco4, .fixed .deco3, .fixed .navigation { position: fixed; }
.fixed .navigation, .fixed .border { border-bottom: solid #0063ad 5px; bottom: 0; }
.fixed .border { position: fixed; top: 75px; left: 135px; right: 0; bottom: 0; border-right: solid #0063ad 5px; background: transparent; }