/* 
  -- Even more rounded corners with CSS: Base stylesheet --
*/

.dialog {
  position: relative;
  min-width: 100px;
  max-width: 780px; /* based on image dimensions yet */
  z-index:1;
  margin-left:20px; /* default, width of left corner */
  margin-bottom: 1em; /* spacing under dialog */
}
.dialog .content, .dialog .t, .dialog .b, .dialog .b div {
  background: url("/images/dialog_grey_frame.png") no-repeat top right;
}
.dialog .content {
  position:relative;
  zoom:1;
  _overflow-y:hidden;
  padding:0px 20px 0px 0px;
}
.dialog .t {
  /* top+left vertical slice */
  position:absolute;
  left:0px;
  top:0px;
  width:20px; /* top slice width */
  margin-left:-20px;
  height:100%;
  _height:1600px; /* arbitrary long height, IE 6 */
  background-position:top left;
}
.dialog .b {
  /* bottom */
  position:relative;
  width:100%;
}
.dialog .b,
.dialog .b div {
  height: 20px; /* height of bottom cap/shade */
  font-size:1px;
}
.dialog .b {
  background-position:bottom right;
}
.dialog .b div {
  position:relative;
  width:20px; /* bottom corner width */
  margin-left:-20px;
  background-position:bottom left;
}
.dialog .hd,
.dialog .bd,
.dialog .ft {
  position:relative;
}
.dialog .wrapper {
  /* extra content protector - preventing vertical overflow (past background) */
  position:static;
  max-height:1000px;
  overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}
.dialog p {
  margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
  padding:0.5em 0px 0.5em 0px;
}
.dialog p.last {
  padding-bottom: 0px;
}
.dialog h3 {
  margin: 0px;
  color: #666666;
  font-size: 105%;
  padding-top: 3px;
  padding-bottom: 8px;
}

/****** BLUE HELP & RED QUESTION FRAME DIALOG ******/
.dialogBlueHelp, .dialogRedQuestion {
  position: relative;
  min-width: 100px;
  max-width: 720px; /* based on image dimensions, image width - padding */
  z-index:1;
  margin-left:80px; /* default, width of left corner */
  margin-bottom: 1em; /* spacing under dialog */
}
.dialogBlueHelp .content, .dialogBlueHelp .t, .dialogBlueHelp .b, .dialogBlueHelp .b div {
  background: url("/images/dialog_blue_help.png") no-repeat top right;
}
.dialogRedQuestion .content, .dialogRedQuestion .t, .dialogRedQuestion .b, .dialogRedQuestion .b div {
  background: url("/images/dialog_red_question.png") no-repeat top right;
}
.dialogBlueHelp .content, .dialogRedQuestion .content {
  position:relative;
  zoom:1;
  _overflow-y:hidden;
  padding:0px 30px 0px 0px;
}
.dialogBlueHelp .t, .dialogRedQuestion .t {
  /* top+left vertical slice */
  position:absolute;
  left:0px;
  top:0px;
  width:80px; /* top slice width */
  margin-left:-80px;
  height:100%;
  _height:1600px; /* arbitrary long height, IE 6 */
  background-position:top left;
  /* for the hide links */
  text-align: center;
  font-size: 85%;
  font-weight: bold;
}
.dialogBlueHelp .t P, .dialogRedQuestion .t P {
  padding-top: 80px;
}
.dialogBlueHelp .t P A, .dialogRedQuestion .t P A {
  color: white;
}

.dialogBlueHelp .b, .dialogRedQuestion .b {
  /* bottom */
  position:relative;
  width:100%;
}
.dialogBlueHelp .b, .dialogBlueHelp .b div,
.dialogRedQuestion .b, .dialogRedQuestion .b div {
  height:30px; /* height of bottom cap/shade */
  font-size:1px;
}
.dialogBlueHelp .b, .dialogRedQuestion .b {
  background-position:bottom right;
}
.dialogBlueHelp .b div, .dialogRedQuestion .b div {
  position:relative;
  width:80px; /* bottom corner width */
  margin-left:-80px;
  background-position:bottom left;
}
.dialogBlueHelp .hd,
.dialogBlueHelp .bd,
.dialogBlueHelp .ft,
.dialogRedQuestion .hd,
.dialogRedQuestion .bd,
.dialogRedQuestion .ft {
  position:relative;
}
.dialogBlueHelp .wrapper,
.dialogRedQuestion .wrapper {
  /* extra content protector - preventing vertical overflow (past background) */
  position:static;
  max-height:1000px;
  overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}
.dialogBlueHelp .content {
  color: white;
}
.dialogRedQuestion .content {
  color: white;
  font-weight: bold;
}
.dialogBlueHelp p, .dialogRedQuestion p {
  line-height: 1.4;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}
.dialogBlueHelp p.last, .dialogRedQuestion p.last {
  margin-bottom: 0px;
}
.dialogBlueHelp h3, .dialogRedQuestion h3 {
  margin:0px;
  font-size: 150%;
  padding-top: 4px;
  padding-bottom: 6px;
}