body {
  margin: 0;
  font-family: Tahoma, Arial;
  background-color: #333;
}

/* HEADER AND SUB-HEADER */
#header {
  width: 95%;
  height: 40px;
  border: 1px solid #333;
  border-bottom: 0;
  background-color: #5F5D5C;
  margin: 0 auto 0 auto;
}
#header img {
  margin: 7px 0 0 10px;
  border: 0;
  float: left;
}
#header span {
  margin-right: 20px;
  color: #908A88;
  font-family: Verdana, Arial;
  font-size: 18px;
  line-height: 200%;
  letter-spacing: 11px;
  float: right;
}
#sub-header {
  width: 95%;
  margin: 0 auto 0 auto;
  border: 1px solid #333;
  background-color: #ddd;
}
#sub-header-help {
  float: right;
  margin: 10px 10px 0 0;
}
#collection {
  /* This contains the thumbnails and is contained by sub-header */
  /* hack to make sure the subheader draws with at least some height up front */
  height: 86px;
  float: left;
}


/* THUMBNAILS */
.thumb {
  margin: 6px;
  cursor: pointer;
  float: left;
  border: 1px solid #777;
}
.thumb-disabled {
  margin: 6px;
  float: left;
  border: 1px solid #bbb;
  cursor: pointer;
}
.thumb-disabled img {
	opacity: .4;
	filter: alpha(opacity=40);
}



/* LIGHT TABLE */
#box {
  width: 95%;
  height: 550px;
  border-top: 0;
  margin: 0 auto 0 auto;
  background-color: #fff;
  background-image: url('../images/box-bg.gif');
  background-repeat: repeat-x repeat-y;
}



/* PHOTO RELATED */
.photo {
  width: 230px;
  position: absolute;
  border: 1px solid transparent;
  cursor: move;
}
.photo-selected {
  border: 1px solid #000;
}
.photo:hover {
  border: 1px solid #333;
}
.photo img {
  position: relative;
  float: left;
  width: 100%;
}
.handle {
  position: relative;
  top: 70px;
  left: 118px;
  width: 22px;
  height: 22px;
  background-color: transparent;
  background-image: url('../images/handle.png');
  background-repeat: no-repeat;
  cursor: se-resize;
}
.close {
  position: absolute;
  top: 1px;
  left: 170px;
  width: 25px;
  height: 25px;
  background-color: transparent;
  background-image: url('../images/close.png');
  background-repeat: no-repeat;
	opacity: .5;
	filter: alpha(opacity=50);
  cursor: pointer;
}
.info {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 25px;
  height: 25px;
  background-color: transparent;
  background-image: url('../images/info.png');
  background-repeat: no-repeat;
	opacity: .5;
	filter: alpha(opacity=50);
  cursor: pointer;
}



/* DETAILS */
#details-c {
  width: 180px;
  margin-top: 30px;
  padding: 10px;
  border: 0;
  color: #eee;
  opacity: .85;
  position: relative;
  z-index: 900;
  float: right;
}
.details-c {
  border: 2px solid #555;
  background-color: #777;
  color: #eee;
}
.details-c-edit {
  border: 2px solid #494B61;
  background-color: #67688A;
  color: #eee;
}

.details-edit-toggle {
  margin: -10px;
  margin-top: 20px;
  padding: 2px 0 2px 0;
  background-color: #000;
  text-align: center;
}
.details-edit-toggle a {
  color: #eee;
  text-decoration: none;
  font-size: 10pt;
}
.details-edit-toggle a:hover {
  text-decoration: underline;
}
.details-form {
  margin: 0;
  padding: 0;
}
.details-form input {
  width: 100%;
}
.details-form textarea {
  width: 100%;
  height: 120px;
}
.details-close {
  width: 25px;
  height: 25px;
  margin: -5px -5px 0 0;
  background-color: transparent;
  background-image: url('../images/close.png');
  background-repeat: no-repeat;
	opacity: .8;
	filter: alpha(opacity=80);
  cursor: pointer;
  float: right;
}



/* HEADINGS */
h2 {
  margin-top: 2px;
  font-size: 13pt;
  color: #fff;
}
h3 {
  font-size: 11pt;
  margin-bottom: 2px;
}
h4 {
  margin-top: 0;
  font-size: 10pt;
  font-weight: normal;
  color: #ccc;
}



/* NOT USED IN PROTOTYPE */
.stars {
  margin: 10px 0 10px 52px;
  width: 78px;
  height: 13px;
}

/* MISC */
.browser-error {
  position: relative;
  margin: 26px;
  float: left;
  font-size: 14pt;
  font-weight: bold;
  color: #aaa;
}