/* basics */

html {
  border-top: 5px solid black;
  background-color: #ffffee;
  font-family: "Bitstream Vera Sans", Verdana, sans;
}

a { color: navy; text-decoration: none; cursor: pointer; }
a:hover { background-color: white; color: red; }
a.disabled { color: #ccc; }
a:hover.disabled { background-color: inherit; }

h1 { font-size: 22pt; font-weight: bold; line-height: 150%; }

ul {
  list-style-type: circle;
  list-style-position: inside;
  margin-left: 10px;
  padding-bottom: 0.5em; padding-top: 0.5em; 
}
ul li {
  list-style-type: inherit;
  list-style-position: inside;
}

/* main screen */
#header {
  position: absolute;
  left: 10px;
  top: 10px;
}
#header #pageTitle {
  font-size: 26pt;
  font-weigth: bold;
}

#main {
  position: absolute;
  left: 10px;
  padding-right: 5em;
  padding-bottom: 5em;
}

#imageBox img {
  margin-top: 5px;
  border: 4px solid black;
}

#image_nextprev { font-size: small; }
#imageImg { border: 0; }
#navfirst:before { content: "|< "; }
#navprev:before { content: "< "; }
#navnext:after { content: " >"; }

/* sidebar */
.sidebar { margin-top: 10px; border-top: 1px dotted #ccc; }
#clickstream a img { border: 1px solid #444; text-decoration: none; height: 80px; width: 80px; }
#clickstream a img.selected { border: 1px solid red; }
.sidebar, .sidebar p, .sidebar td { font-size: small; }
.sidebar h2 { font-size: 11pt; font-weight: bold; line-height: 200%; }

#sideBox {
  color: white;
	position: absolute;
	width: 330px;
	background: #333;
	right: 0px;
	top: 0px;
	z-index: 99;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	padding: 10px;
}
#sideBox, #sideBox td, #sideBox p { color: #ddd; }
#sideBox h1, #sideBox h2 { color: white; }
#sideBox a { color: #4bd2f4; }
#sideBox a:hover { background-color: white; color: red; }

#help a, #config, #config a, #feedback, #feedback a {
  font-size: 10pt;
  text-decoration: none;
} 
#config {
  padding-left: 0px;
  padding-top: 5px;
}
#feedback {
  text-align: right;
}

div#clickstream_navigation {
  margin-top: 5px;
}

/* generic / UI / messageboxes */

.hidden {
	display: none;
}

#overlay {
  background-image: url(overlay.png);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 110;
  width: 100%;
}

.msgbox {
	position: absolute;
	z-index: 120;
	top: 120px;
  left: 120px;
	border: 3px solid black;
	padding: 10px;
  font-size: 11pt;
  background: #ddd right bottom no-repeat;
}
.msgbox a {
  color: navy;
}
#msgboxHide {
  position: absolute;
  right: 0;
  left: auto;
  top: 0;
  border: 1px solid #777;
  background-color: #333;
  color: white;
  width: 65px;
  text-align: center;
  font-size: 7pt;
  letter-spacing: 3px;
  padding: 3px;
  cursor: default;
}
.aboutBox {
  background: #ddd right bottom no-repeat url(elephant.png);
  width: 600px;
  height: 300px;
}

button.filterEditSave {
  background-color: #CDEB8B;
  color: black;
}

button.filterEditCancel {
  background-color: white;
  color: black;
}

/* tag completion */

#tagsROBox {
  display: none;
}
#tagsEditBox {
  display: inherit;
}
input#tagsEdit {
  padding-right: 20px;
  padding-left: 2px;
  background: white;
  border: 1px solid black;
  /* need to explicitly specify font-* for sizer trick */
  font-family: "Bitstream Vera Sans", Verdana, sans;
  font-size: 8pt;
  font-weight: normal;
  width: 80%;
}
input#tagsEdit.progress {
  background: white url(tagsedit.progress.gif) right no-repeat;
}
input#tagsEdit.done {
  background: white url(tagsedit.done.png) right no-repeat;
}

#taglist {
  position: absolute;
  left: 0px;
  top: 0px;
  border: 1px solid #777;
  background: white;
  color: black;
  z-index: 150;
  padding: 2px 2px 2px 2px;
  font-family: "Bitstream Vera Sans", Verdana, sans;
  font-size: 8pt;
  font-weight: normal;
}
#taglist ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
#taglist li.selected{
  background: navy;
  color: white;
}

/* *** */