/**
 * Box with rounded corners that can stretch horiztonally and vertically.
 *
 * Create a round-box with the HTML:
 *
 * <div class="round-box">
 *   <div class="top-corners">
 *      <div class="left"></div>
 *      <div class="right"></div>
 *   </div>
 *
 *   ... content ...
 *
 *   <div class="bottom-corners">
 *      <div class="left"></div>
 *      <div class="right"></div>
 *   </div>
 * </div>
 *
 * Images are similar to flushbtns. Photoshop rounded rectangle with radius
 * of 10px, stroked along the outside with a 5px border. Typically 400x400 px.
 *
 * Regular round-boxes default to the full width of their containing element,
 * and can also be given a fixed width. The message variant is only as wide as
 * necessary (owing to its float:left).
 */

.round-box {
  border:5px solid;
  position:relative;

  /* hack to get IE 6 to size this div correctly and put the origin where
     it should be for the child position:absolute elements */
  _height:1px;
}

.round-box.message {
  padding:5px 10px;
  float:left;
}

/** TODO: Remove unused centered_message styles. */
.round-box.centered_message { 
  font-weight: bold;
  font-size: small;
  line-height: 0.2em;
  margin: 2px 0;
  padding: 5px 10px;
  position: relative;
  /* Don't float in FF: width of wrap is computed incorrectly
because contents are floated */
  _float: left;
  left: -50%;
}

.round-box-wrap-centered_message {
  left: 50%;
  position: relative;
  float: left;
}

.round-box .top-corners div, .round-box .bottom-corners div {
  height:15px;
  width:15px;
  position:absolute;
}

/* We need bottom-corners to be relative in Safari, otherwise it won't move
   the bottom corners when the height of the box changes.
*/
.round-box .bottom-corners {
  position:relative;
  background:green;
  top:-10px;
  font-size:0px;
}

.round-box.message .bottom-corners,
.round-box.centered_message .bottom-corners {
  top:-5px;
  margin:0 -10px;
}

.round-box .top-corners .left {
  top:-5px;
  left:-5px;
}

.round-box .top-corners .right {
  top:-5px;
  right:-5px;
}

.round-box .bottom-corners .left {
  left:-5px;
}

.round-box .bottom-corners .right {
  right:-5px;
}

.round-box .top-corners .left {
  background-position:top left;
}

.round-box .top-corners .right {
  background-position:top right;
}

.round-box .bottom-corners .left {
  background-position:bottom left;
}

.round-box .bottom-corners .right {
  background-position:bottom right;
}

.round-box.tan-on-white .top-corners div,
.round-box.tan-on-white .bottom-corners div {
  background-image:url(round_ta.gif);
}

.round-box.tan-on-white {
  background:#f5ede3;
  border-color:#e1d4c0;
}

.round-box.white-on-white .top-corners div,
.round-box.white-on-white .bottom-corners div {
  background-image:url(http://www.blogger.com/img/round_white_white.gif);
}

.round-box.white-on-white {
  background:#fff;
  border-color:#e1d4c0;
}

.round-box.yellow-on-white .top-corners div,
.round-box.yellow-on-white .bottom-corners div { 
  background-image:url(http://www.blogger.com/img/round_yellow_white.gif)
}

.round-box.yellow-on-white { 
  background: #ffd363;
  border-color: #ffd363;
}

.round-box.round-box-hidden {
  visibility: hidden;
}

/**
 * Table-based implementation of status message. Used to generate
 * small centered bubbles just big enough for their contents, with
 * tiny rounded corners and little padding.
 */

.status-msg-wrap { 
  _padding-top: 1em; /* make up for IE #body rule */
}

.status-msg-hidden { 
  visibility: hidden;
}

table.status-msg { 
  border: 0;
  padding: 0;
}

#settings table.status-msg, table.status-msg { 
  margin: auto;
  width: auto;
}

table.status-msg td.corner { 
  border: 0;
  margin: 0;
  padding: 0;
  line-height: .5em;
}

td.status-msg-content, #settings td.status-msg-content { 
  line-height: 1.1em;
  vertical-align: middle;
  font-size: 100%;
  padding: 0.4em .5em;
  border: 0;
  font-weight: bold;
}

/* override #settings td */
#settings table.status-msg td.corner { 
  padding: 0;
  border: 0;
}

.status-msg form,
.status-msg div {
  display:inline;
 }

.status-msg a { 
  text-decoration: underline;
  padding-left: .2em;
}

.status-msg .corner { 
  width: 10px;
  height: 5px;
 }

.status-msg .top-left-corner { 
  background-position: top left;
 }

.status-msg .top-right-corner { 
  background-position: top right;
 }

.status-msg .bottom-left-corner { 
  background-position: bottom left;
 }

.status-msg .bottom-right-corner { 
  background-position: bottom right;
}

.status-msg-yellow-on-white,
.status-msg-yellow-on-white .status-msg-content { /* repeated for IE */
  background-color: #ffd363;
 }

.status-msg-yellow-on-white .corner {
  background-color: #ffffff;
}

.status-msg-yellow-on-white .corner {
  background-image: url(http://www.blogger.com/img/round_yellow_white.gif);
}

  /**
    * Fixed width box with rounded corners that can stretch vertically.

    * Used to create round boxes that have a transparent outside background
    * Create a transparent round-box by using the RoundBoxTrans.gxp
    * The inside color for the round-box, and the width have to be passed
    * in as parameters
    *
  */

.round-box-trans .top,
.round-box-trans .bottom {
  height:15px;
}

.round-box-trans-background {
  margin:0 auto;
}

.round-box-trans .dark_tan-w_600 {
  width:600px;
}

.round-box-trans .dark_tan-w_600 .top {
  background-image:url(http://www.blogger.com/img/round_top_dark_tan_trans.png);
  /* Use IE specific filter to get transparent images to work on IE */
  _background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='/img/round_top_dark_tan_trans.png',
    sizingMethod='image');
}

.round-box-trans .dark_tan-w_600 .bottom {
  background-image:url(http://www.blogger.com/img/round_bottom_dark_tan_trans.png);
 /* Use IE specific filter to get transparent images to work on IE */
  _background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='/img/round_bottom_dark_tan_trans.png',
    sizingMethod='image');
}

.round-box-trans .content {
  padding: 5px;
}

.round-box-trans .dark_tan-w_600 .content {
  width: 580px; /* width = 600 - (padding + border-width) */
  background-color:#e6dbca;
  border-left: solid 5px #927d67;
  border-right: solid 5px #927d67;
}

/** start 400 width */
.round-box-trans .dark_tan-w_400 {
  width:400px;
}

.round-box-trans .dark_tan-w_400 .top {
  background-image:url(http://www.blogger.com/img/round_top_dark_tan_trans_400.png);
  /* Use IE specific filter to get transparent images to work on IE */
  _background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='/img/round_top_dark_tan_trans_400.png',
    sizingMethod='image');
}

.round-box-trans .dark_tan-w_400 .bottom {
  background-image:url(http://www.blogger.com/img/round_bottom_dark_tan_trans_400.png);
 /* Use IE specific filter to get transparent images to work on IE */
  _background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='/img/round_bottom_dark_tan_trans_400.png',
    sizingMethod='image');
}

.round-box-trans .dark_tan-w_400 .content {
  width: 380px; /* width = 400 - (padding + border-width) */
  background-color:#e6dbca;
  border-left: solid 5px #927d67;
  border-right: solid 5px #927d67;
}