/* #Message.css

message.css is the set of styles for status message. User can remove messages with close link at the right side of it.

## Message Type

* msg-success
* msg-alert
* msg-error
* msg-info
* msg-publishing

```
<div class="msg msg-success">
  <p class="msg-text">Success: Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>

<div class="msg msg-alert">
  <p class="msg-text">Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>

<div class="msg msg-error">
  <p class="msg-text">Error: Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>

<div class="msg msg-info">
  <p class="msg-text">Info: Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>

<div class="msg msg-publishing">
  <p class="msg-text">On Publishing: Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>
```

## Close-Set
msg class defaultly has margin top and bottom. If you want to remove margins, plus .full class

```
<div class="msg msg-success full">
  <p class="msg-text">Success: Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>

<div class="msg msg-alert full">
  <p class="msg-text">Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>
```

# In-message List

```
<div class="msg msg-warning">
  <ul>
    <li><label>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </label> <button class="button">Save</button></li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </li>
  </ul>
  <span class="action-icon icon16 action-icon icon-remove clickable close-link">Close</span>
</div>
```

# Validation Error

<h3>Inline Error Message</h3>

validate-error styles strings like the following.

```
<div class="field-content">
  <input type="text" class="text med error">
  <div>
    <label class="validate-error msg-error">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </label>
  </div>
</div>
```

msg-balloon shows error message like balloon.

```
<span class="validate-error-wrapper" style="position: relative; white-space: nowrap;">
  <input type="text" name="category_label" class="text short label error">
  <label style="position: absolute; left: 171.5px; top: -21px; z-index: 200;" class="msg-error msg-balloon validate-error">Lorem ipsum dolor sit amet</label>
</span>
```

*/

.msg {
    position: relative;
    margin: 10px 0;
    padding: 0.5em 0.75em;
    border-radius: 2px;
}
.msg.full {
    margin: 0;
    border-radius: 0;
}
.msg-success {
    background-color: #d8f8cd;
}
.msg-alert,
.msg-warning {
    background-color: #f3fcaf;
}
.msg-error {
    background-color: #ffd4d1;
}
.msg-info {
    background-color: #cae5f8;
}
.msg-publishing {
    margin: 15px 0 0;
    padding: 0.8em 0 0.8em 25px;
    background: transparent url(../images/ani-rebuild.gif) left center no-repeat;
}
.msg-text {
    margin: 0;
}

.msg ul {
    padding-left: 1.618em;
}
.msg li {
    list-style-type: disc;
}
.msg li label:hover {
    cursor: pointer;
    text-decoration: underline;
}

.close-link {
    position: absolute;
    top: 50%;
    right: 8px;
    margin-top: -8px;
}

.msg .detail {
    margin: 10px 0 0;
}

p.zero-state {
    margin-bottom: 0;
}

#is-generic-website {
    margin: 0;
    padding: 0.75em 0;
    border-bottom: 1px solid #c8c2be;
    background-color: #f2f2b0;
    border-radius: 0;
}
#is-generic-website p {
    margin: 0 auto;
    padding: 0 20px;
    font-size: 95%;
}

#junk-message .junk-score {
    font-weight: bold;
    margin: 0 0 0.5em;
}

.dialog-msg-error {
    display: block;
}
.validate-error {
    display: inline-block;
    margin-top: 5px;
    background: transparent;
    color: #C53D43;
    font-size: 90%;
    font-weight: normal;
}
.msg-balloon {
    margin-top: 3px;
    padding: 0.3em 0.5em;
    background-color: #2b2b2b;
    color: #f3f3f3;
    border-radius: 2px;
    opacity: 0.8;
    -ms-filter: 'alpha(opacity=80)';
    filter: alpha(opacity=80);
}

.debug-panel {
    position: absolute;
    width: 100%;
    border-top: 1px solid #c8c2be;
    background-color: #f6bfbc;
    text-align: left;
}
.debug-panel.dialog-with-actions-bar {
    position: static;
    padding-bottom: 45px;
}
.debug-panel h3 {
    padding: 5px;
    font-size: 12px;
    margin: 0;
    background-color: #ec6d71;
    color: #f8fbf8;
    text-shadow: none;
}
.debug-panel-inner {
    padding: 5px;
    font-family: monospace;
    font-size: 10px;
    max-height: 200px;
    overflow: auto;
}
.debug-panel-inner li {
    margin: 0;
    padding: 0.2em 0.5em;
    white-space: pre;
}

.debug-panel-inner li:hover {
    background-color: #f2a0a1;
}

#notification_dashboard .widget-content {
    padding: 10px 0 0 0;
}
#notification_dashboard li {
    display: block;
    padding: 0 10px;
}
#notification_dashboard .item {
    display: block;
}
#notification_dashboard .clickable:hover {
    cursor: pointer;
    color: #507ea4;
}
#notification_dashboard .detail {
    display: block;
    border-bottom: 1px solid #c0c6c9;
    padding: 0.5em 0.5em 0.5em 14px;
    color: #7b7c7d;
}

#notification_dashboard li:last-child .detail {
    border-bottom: none;
}