div.notifications {
  position:relative;
  float:right;
  height:2.5em;
  line-height:2.5em;
  padding:0.5em;
  font-size:90%;
}

div.notifications > a,
div.notifications > .wrapped > a {
  display:block;
  text-align:center;
  overflow:hidden;
  height:2.5em;
  line-height:2.5em;
  min-width:2.6em;
  border-radius:1.25em;
  text-decoration:none;
  font-weight:bold;
  color:#000;
  background:#ccc; /* old browsers */
  background:-moz-linear-gradient(top, #ddd 0%, #ccc 100%); /* firefox */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddd), color-stop(100%,#ccc)); /* webkit */
  background: -o-linear-gradient(top, #ddd 0%, #ccc 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #ddd 0%, #ccc 100%); /* IE10+ */
}

div.notifications > .wrapped {
  position:relative;
  z-index:1;
  padding:0.5em;
  margin:-0.5em;
  cursor:pointer;
}

div.notifications > a.unread,
div.notifications > .wrapped > a.unread {
  color:#fff;
  background:#a77; /* old browsers */
  background:-moz-linear-gradient(top, #b88 0%, #966 100%); /* firefox */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#b88), color-stop(100%,#966)); /* webkit */
  background: -o-linear-gradient(top, #b88 0%, #966 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #b88 0%, #966 100%); /* IE10+ */
}

div.notifications.shown .wrapped {
  background:#fff;
}

div.notifications .detail {
  position:absolute;
  right:0;
  top:3.5em;
  width:40em;
  padding:0 1em;
  box-shadow:0 0 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);
  background:#fff;
}

div.notifications .loading {
  height:50px;
  background-image:url("../../horae.layout/loader-large.gif");
  background-position:center center;
  background-repeat:no-repeat;
}

ul.notifications {
  border-top:1px solid #ccc;
}

ul.notifications.loading {
  padding-bottom:50px;
  background:url("../../horae.layout/loader-large.gif") transparent no-repeat bottom center;
}

ul.notifications > li {
  position:relative;
  overflow:hidden;
  line-height:1.5em;
  opacity:0.6;
  -moz-opacity:0.6;
  -webkit-opacity:0.6;
}

ul.notifications > li .title {
  display:block;
  padding:0.3em 1em 0.2em 1em;
  border-bottom:1px solid #fff;
}

ul.notifications > li .title > span {
  display:block;
  overflow:hidden;
}

ul.notifications > li .title:hover {
  background-color:#f5f5f5;
  border-bottom:1px solid #f5f5f5;
}

ul.notifications > li.unread {
  opacity:1;
  -moz-opacity:1;
  -webkit-opacity:1;
}

ul.notifications > li > a.button,
ul.notifications > li > .user,
ul.notifications > li > time {
  display:block;
  float:left;
  text-transform:none;
  line-height:2em;
  position:relative;
  margin:0 1em 0 0;
  padding:0 1em;
  border-width:1px 1px 1px 0;
  border-style:solid;
  border-color:#fff;
}

ul.notifications > li.warning > time:before {
  display:block;
  float:left;
  line-height:2em;
  position:relative;
  margin:0 1em 0 -1em;
  width:2em;
  text-align:center;
  content:"!";
  border-right:1px solid #fff;
  font-weight:bold;
  color:#fff;
  background:#a77; /* old browsers */
  background:-moz-linear-gradient(top, #b88 0%, #966 100%); /* firefox */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#b88), color-stop(100%,#966)); /* webkit */
  background: -o-linear-gradient(top, #b88 0%, #966 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #b88 0%, #966 100%); /* IE10+ */
}

ul.notifications > li > .user,
ul.notifications > li > a.button {
  margin-left:1em;
  margin-right:0;
  float:right;
  font-size:100%;
  height:auto;
  border-width:1px 0 1px 1px;
}

#content ul.notifications > li > .user {
  margin-right:-1em;
}

ul.notifications > li > .information {
  display:block;
  float:right;
  line-height:3em;
  margin:0 0 0 1em;
  height:2em;
  font-size:80%;
}

ul.notifications > li > .information.loading {
  padding-left:20px;
  background:url("../../horae.layout/loader-small.gif") transparent no-repeat left center;
}

ul.notifications > li > .user,
ul.notifications > li > time {
  background:#ccc; /* old browsers */
  background:-moz-linear-gradient(top, #ddd 0%, #ccc 100%); /* firefox */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddd), color-stop(100%,#ccc)); /* webkit */
  background: -o-linear-gradient(top, #ddd 0%, #ccc 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #ddd 0%, #ccc 100%); /* IE10+ */
}

ul.notifications > li > .user {
  text-decoration:none;
  font-weight:bold;
  color:#555;
}

ul.notifications > li > .body {
  clear:both;
  border-top:1px solid #ccc;
  line-height:1.3em;
  padding:1em;
  background-color:#f5f5f5;
}
