/* Echo out a label for the example */
.bs-docs-example:after {
  content: "Example";
  position: absolute;
  top: -1px;
  left: -1px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

/* Base class */
.bs-docs-example {
  position: relative;
  margin: 15px 0;
  padding: 39px 19px 14px;
  *padding-top: 19px;
  background-color: #fff;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.ucMessage{
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    
    margin: 15px 0;
  /* padding: 39px 19px 14px; */
  *padding-top: 19px;
  background-color: #fff;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.messageType{
    line-height: 34px;
    vertical-align: bottom;
    height: 30px;
    width: 30px;
    text-align: center;
   padding: 5px 7px;
  font-size: 28px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-top: none;
  border-left: none;
  color: #9da0a4;
  -webkit-border-radius: 3px 0 0 3px;
     -moz-border-radius: 3px 0 0 3px;
          border-radius: 3px 0 0 3px;
          color: #666;
    text-shadow: 0 1px 0 #fff;
}


.messageTarget{
  padding: 3px 7px;
  font-size: 12px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-top: none;
  border-left: none;
  color: #9da0a4;
  color: #666;
  -webkit-border-radius: 0 0 4px 0;
     -moz-border-radius: 0 0 4px 0;
          border-radius: 0 0 4px 0;   
}

.messageTarget a{
    cursor: pointer;
    font-weight: bold;
}

.messageActions{
    height: 30px;
    padding: 5px 9px 5px 2px;
    font-size: 14px;
    line-height: 14px;
    vertical-align: bottom;
    background-color: #f5f5f5;
    border-left: 1px solid #ddd;
/*
  border-top: none;
  border-right: none;
*/
  
  color: #9da0a4;

  -webkit-border-radius: 0 3px 3px 0;
     -moz-border-radius: 0 3px 3px 0;
          border-radius: 0 3px 3px 0;

}

.messageActions > div{
    /* padding-top: 4px; */
    text-align: right;
}

.messageActions a{
    padding: 0 3px;
    color: #555;
}
.messageActions a:hover{
    text-decoration: none;
    color: #222;
}

.messageSummary{
    height: 41px;
/*     background: red; */
    margin-bottom: 10px;
    
}

.messageBody{
    padding: 0 20px;
}




.direction{
    position: absolute;
    font-size: 12px;
    line-height: 12px;
    /* color: red; */
    vertical-align: top;
    padding-left: 18px;
    text-shadow: 0 -1px #fff, 1px 0 #fff, 0 1px #fff, -1px 0 #fff;
}


.ucMessage.missedMsg .messageType{
    color: #da4138;
}

.ucMessage.successMsg .messageType{
    color: #51A351;
}



.ucMessage.activeMsg{
/*
      -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
*/
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 5px rgba(0,68,204,.01);
     -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 5px rgba(0,68,204,.01);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 5px rgba(0,68,204,.01);
  -webkit-animation-name: activeMsgAnimation;
     -moz-animation-name: activeMsgAnimation;
  -webkit-animation-duration: 1.5s;
     -moz-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
  -webkit-transition: none;
     -moz-transition: none;
          transition: none;
          
    border-color: #8eceee;
    background: #f7fbfd;
}

.ucMessage.activeMsg .messageTarget, .ucMessage.activeMsg .messageType, .ucMessage.activeMsg .messageActions{
    border-color: #8eceee;
    background: #D9EDF7;    
    color: #3A87AD;
}

.ucMessage.activeMsg .messageTarget a{
    text-decoration: underline;
}

/* Download button */
@-webkit-keyframes activeMsgAnimation {
  from { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 5px rgba(0,68,204,.5); }
  50% {  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 15px rgba(0,68,204,.9); }
  to {   box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 5px rgba(0,68,204,.5); }
}
@-moz-keyframes activeMsgAnimation {
  from { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 5px rgba(0,68,204,.5); }
  50% {  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 15px rgba(0,68,204,.9); }
  to {   box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 5px rgba(0,68,204,.5); }
}



/* Rating */

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.ucItemRating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.ucItemRating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:13px;
    line-height:1.2;
    color:#ddd;
/*     text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5); */
}

.ucItemRating:not(:checked) > label:before {
    font-family: FontAwesome;
    content: "\f005";
    /* content: '★ '; */
}

.ucItemRating > input:checked ~ label {
    color: #08c;
}

.ucItemRating:not(:checked) > label:hover,
.ucItemRating:not(:checked) > label:hover ~ label {
    color: #fc0;
}

.ucItemRating > input:checked + label:hover,
.ucItemRating > input:checked + label:hover ~ label,
.ucItemRating > input:checked ~ label:hover,
.ucItemRating > input:checked ~ label:hover ~ label,
.ucItemRating > label:hover ~ input:checked ~ label {
    color: #fc0;
}