/*
 * Stylesheet definitions for black-background normal browsing.
 */

body { 
  background: url(../img/tausta.jpg) no-repeat 491px 54px;
  background-color: black;
  color: white;
  margin: 0;
}

body.photopage { 
  background-image: none; 
  margin-top: 20px;
}

.styleswitcher .styledefault, .styleswitcher .print { display: none; }
.styleswitcher .stylepaper   { padding: 16px; }

.styleswitcher { 
  background: url(../img/printer2.png) no-repeat;
  width: 32px;
  height: 32px;
}

a { color: lightblue; }

a:hover { color: yellow; }

table.master { 
  width: 850px;
  margin: auto;
  border-collapse: collapse; }

table.master td.menu { width: 20em; }

/* *
   *  menu
   */

div.menu { 
  font-size: 18px;
  margin: 0;
  text-align: center;
}

div.menu h1 { 
  font-size: 32px;
  font-weight: normal;
  line-height: 50px;
  color: yellow; }

  
div.menu h1.menu {
  margin: 90px 0 49px 0;
  position: relative;
  line-height: 35px;
  white-space: nowrap;
  color: yellow; }

div.menu h1.frontpage { 
  margin: 75px 0 45px 0;
  position: relative;
  line-height: 54px;
  font-size: 50px;
  color: yellow;
  white-space: nowrap;
}

div.menu .items { 
  margin: 0;
  line-height: 41px; }

/***
   *  content
   */

div.content { 
  width: 400px;
  height: 650px;
  /* overflow: hidden; */
}

div.content h1 { 
  color: yellow;
}

div#index a.indexentry { 
  display: block;
  font-size: 18px;
  text-align: left;
  margin-top: 0.2em;
}

div#index p.indexsubentries {
  margin-top: 0;
  /* white-space: wrap; */
  font-size: 11px;  /* remember! spaces between <a> tags */
  line-height: 100%; /* ditto */
  margin-left: 1em;
  text-align: left;
}

div#index p.indexsubentries a.indexentry { 
  font-size: 11px;
  white-space: nowrap;
  display: inline;
  text-align: left;
  line-height: 100%;
  margin-right: 1em;
}

div#story h1 {
  display: none;
}

div.content .cddescription {
  margin-left: 170px;
  width: 150px;
  font-size: 9px;
  line-height: 1.5em;
}

div.content .cddescription .prizewinner {
  font-size: 150%;
  line-height: 150%; }

div.content .hidden, div#index a.hidden {
  display: none;
}

div#index a.folded {
  background: url(../img/rightarrow2.png) no-repeat;
}

div#index a.folded h1 {
  font-size: 18px;
  margin-left: 8px;
}

div.images { 
  margin-top: 70px;
  width: auto; 
  clip : auto;
  /* clip: rect(0 660 650 0); */
}

.scrollable { 
  overflow: auto;
}

#story { 
  margin-top: 2em;
  padding-right: 17px; }

#story h1 { font-size: 14px; margin: 0; }

#story h2, #story h3 { font-size: 14px; }

#story h2 { 
  margin-top: 3em;
  text-transform: none; }

#story h3 { font-weight: normal; }

/***
   *  scroll bar
   */

.scrollcover { 
  position: relative;
  background-color: black;
  width: 17px; /* firefox: 15, IE6 17 */
}

.scrollbar { 
  /* contains .up, .down, .indicator */
  position: relative;
  background-color: black; /* was #101020, but Luoma wants black */
  width: 20px;
  text-align: center;
}

.scrollbar .up, .scrollbar .down 
{ 
  width: 20px;
  height: 50px;
  display: block;

  /* Disable text selection for these elements in mozilla, konqueror,
     safari. For IE it's done in scroll.js/createCustomScrollBar(). */
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

.scrollbar .up { 
  background: url(../img/uparrow4.png) no-repeat top center; }

.scrollbar .up:hover { 
  background: url(../img/uparrow-yellow.png); }

.scrollbar .down { 
  position: relative;
  top: 2px; 
  background: url(../img/downarrow4.png) no-repeat bottom center; }

.scrollbar .down:hover { 
  background: url(../img/downarrow-yellow.png); }

.scrollbar .indicator { color: lightblue; font-size: 20pt; }

/* TODO: .scrollbar .indicator:active { color: yellow; } */