/* Lynnscape: a homepage like it's 2004. Plain CSS, no tricks. */

body {
  margin: 0;
  padding: 12px;
  background: #1a0b2e url(img/stars.gif);
  color: #2b1030;
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.4;
}

a { color: #ff1493; font-weight: bold; }
a:visited { color: #6a0dad; }
a:hover { background: yellow; color: #6a0dad; }

img { border: 0; vertical-align: middle; }

/* The page itself: one pink box in the middle of the night sky. */
#page {
  max-width: 760px;
  margin: 0 auto;
  background: #fff0f5;
  border: 6px ridge #f4c2c2;
}

#banner {
  text-align: center;
  background: #f4c2c2;
  padding: 12px 8px 6px;
}
h1 {
  margin: 0;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-size: 46px;
  color: #ff1493;
  text-shadow: 3px 3px 0 #fff;
}
#tagline {
  margin: 2px 0 0;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  color: #6a0dad;
}

marquee {
  display: block;
  background: #000;
  color: #7fff00;
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  font-weight: bold;
  padding: 3px 0;
  border-top: 3px ridge #f4c2c2;
  border-bottom: 3px ridge #f4c2c2;
}

/* Navigation: chunky buttons that press in. */
#nav {
  text-align: center;
  background: #ffe4ec;
  padding: 8px 4px;
  border-bottom: 4px ridge #f4c2c2;
}
#nav a {
  display: inline-block;
  margin: 3px;
  padding: 4px 14px;
  background: #f4c2c2;
  border: 3px outset #fff;
  color: #6a0dad;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
}
#nav a:hover { background: yellow; }
#nav a:active, #nav a.here { border-style: inset; background: #fff; }

#content { padding: 10px 22px 18px; }

h2 {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-size: 26px;
  color: #ff1493;
  margin: 14px 0 6px;
}
h3 {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-size: 22px;
  margin: 0 0 6px;
}

.divider { display: block; width: 100%; height: 6px; margin: 18px 0; }
.center { text-align: center; }
.small { font-size: 14px; }
.purple { color: #6a0dad; }

/* "What's new" and the project boxes: real tables, like we used to. */
table.news {
  width: 100%;
  border: 3px outset #f4c2c2;
  background: #fff;
}
table.news th {
  background: #6a0dad;
  color: #fff;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  text-align: left;
  padding: 3px 8px;
}
table.news td {
  background: #ffe4ec;
  padding: 4px 8px;
  vertical-align: top;
}
table.news td.date {
  white-space: nowrap;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  color: #6a0dad;
}

table.project {
  width: 100%;
  background: #fff;
  border: 3px dashed #ff1493;
  margin-bottom: 12px;
}
table.project td { padding: 8px; vertical-align: top; }
table.project td.pic { width: 130px; text-align: center; }
table.project p { margin: 0 0 8px; }

/* Phones: picture above the text instead of beside it. */
@media (max-width: 520px) {
  #content { padding: 8px 12px 14px; }
  table.project td { display: block; }
  table.project td.pic { width: auto; }
}

ul.stars { padding-left: 4px; list-style: none; }
ul.stars li { margin-bottom: 6px; }
ul.stars li:before { content: "\2605  "; color: #ff1493; }

/* Under the page, on the night sky. */
#footer {
  max-width: 760px;
  margin: 12px auto 0;
  text-align: center;
  color: #f4c2c2;
  font-size: 14px;
}
#footer a { color: #fff; }
#footer a:hover { color: #6a0dad; }
#footer .buttons a:hover { background: none; }
#footer .buttons img { margin: 2px; }