@import url(actions.css);
@import url(messages.css);
@import url(dialogs.css);
@import url(viewer.css);
@import url(player.css);
@import url(jquery-autocompletion.css);

@font-face {
  font-family: 'ComfortaaLight';
  src: url('comfortaa-light-webfont.eot');
  src: url('comfortaa-light-webfont.eot?#iefix') format('eot'),
       url('comfortaa-light-webfont.woff') format('woff'),
       url('comfortaa-light-webfont.ttf') format('truetype'),
       url('comfortaa-light-webfont.svg#webfontudUCMbaR') format('svg');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
}

noscript {
  border: 0.1em dotted #900;
  color: #900;
  font-size: 1.5em;
  margin: 0 1em;
  padding: 1em;
}

html, body {
  color: #2e3436;
  font: 0.9em sans-serif;
  height: 100%;
}

body {
  background: #2e3436;
  background: -moz-linear-gradient(#2e3436, #555753);
  background: -webkit-gradient(linear, left top, left bottom, from(#2e3436), to(#555753));
  filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr=#2e3436, EndColorStr=#555753);
  background: linear-gradient(#2e3436, #555753);
  padding: 0 1em;
}

header, nav, section {
  display: block;
}

header {
  background: #eeeeec;
  background: -moz-linear-gradient(#eeeeec, #d3d7cf);
  background: -webkit-gradient(linear, left top, left bottom, from(#eeeeec), to(#d3d7cf));
  filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr=#eeeeec, EndColorStr=#d3d7cf);
  background: linear-gradient(#eeeeec, #d3d7cf);
  border: 1px solid #fff;
  border-bottom: none;
  border-right: none;
  margin-bottom: 2em;
  padding: 0.5em 1em;
  position: relative;
  outline: 1px solid #babdb6;
  overflow: hidden;
}

header > h1 {
  display: inline-block;
  font: bold 1.7em ComfortaaLight, sans-serif;
  -moz-text-shadow: 0.05em 0.05em 0 #fff;
  text-shadow: 0.05em 0.05em 0 #fff;
  text-transform: uppercase;
}

header .action.settings {
  bottom: 0;
  position: absolute;
  right: 0;
  top: 0;
}

img.loading {
  background: url(../../images/throbber.gif) no-repeat center;
}

#content {
  background: #eeeeec;
  background: -moz-linear-gradient(#eeeeec, #d3d7cf);
  background: -webkit-gradient(linear, left top, left bottom, from(#eeeeec), to(#d3d7cf));
  filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr=#eeeeec, EndColorStr=#d3d7cf);
  background: linear-gradient(#eeeeec, #d3d7cf);
  border: 1px solid #fff;
  border-bottom: none;
  border-right: none;
  height: 80%;
  padding: 1em;
  outline: 1px solid #babdb6;
  overflow: hidden;
}

.dragover {
  background: rgba(78, 154, 6, 0.5) !important;
}

.added {
  background: #4e9a06 !important;
  color: #eeeeec !important;
}

.removed {
  background: #a40000 !important;
  color: #eeeeec !important;
}

.overlay {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  display: table;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.overlay.hidden {
  display: none;
}

input[type=text],
input[type=password],
input[type=url] {
  background: #fff;
  border: 1px solid #babdb6;
  -moz-box-shadow: inset 0 0.2em 0.2em #999;
  -webkit-box-shadow: inset 0 0.2em 0.2em #999;
  box-shadow: inset 0 0.2em 0.2em #999;
  display: block;
  font-size: 1em;
  padding: 0.5em;
}

/* Sources */

#sources {
  float: left;
  width: 30%;
}

#addsource {
  position: relative;
  width: 100%;
}

#addsource input {
  width: 90%;
}

#addsource .action.add {
  bottom: 0;
  height: 2.2em;
  margin-top: 1px;
  min-width: 0;
  overflow: hidden;
  position: absolute;
  right: 1em;
  top: 0;
  width: 2.5em;
}

/* Sources list */
#sourcelist {
  margin-top: 1em;
}

#sourcelist li {
  list-style: none;
}

#sourcelist .source {
  border: 1px solid transparent;
  cursor: default;
  margin-right: -1px;
  padding: 1em;
  position: relative;
}

#sourcelist .source:hover {
  background: #888a85;
  background: -moz-linear-gradient(#888a85, #555753);
  background: -webkit-gradient(linear, left top, left bottom, from(#888a85), to(#555753));
  filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr=#888a85, EndColorStr=#555753);
  background: linear-gradient(#888a85, #555753);
  border-color: #555753;
  color: #eeeeec;
}

#sourcelist .source.selected {
  background: rgba(255, 255, 255, 0.5);
  border-color: #babdb6;
  border-right-color: transparent;
  color: #2e3436;
}

#sourcelist .title,
#sourcelist .source.selected:hover .title {
  font-size: 1.3em;
  -moz-text-shadow: 0.05em 0.05em 0 #fff;
  text-shadow: 0.05em 0.05em 0 #fff;
}

#sourcelist .source:hover .title {
  -moz-text-shadow: 0.05em 0.05em 0 #2e3436;
  text-shadow: 0.05em 0.05em 0 #2e3436;
}

#sourcelist .data {
  font-size: 0.8em !important;
}

#sourcelist .url {
  visibility: hidden;
}

#sourcelist .source:hover .url {
  visibility: visible;
}

#sourcelist .count .number {
  background: #babdb6;
  -moz-border-radius: 1em;
  border-radius: 1em;
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
  padding: 0.1em 0.45em;
  -moz-text-shadow: 0.05em 0.05em 0 #fff;
  text-shadow: 0.05em 0.05em 0 #fff;
  -moz-transition-property: all;
  -moz-transition-duration: 1000ms;
  -o-transition-property: all;
  -o-transition-duration: 1000ms;
  -webkit-transition-property: all;
  -webkit-transition-duration: 1000ms;
  transition-property: all;
  transition-duration: 1000ms;
}

#sourcelist .source:hover .count .number {
  color: #2e3436;
}

#sourcelist .count .number.changed {
  -moz-text-shadow: 0.05em 0.05em 0 #2e3436;
  text-shadow: 0.05em 0.05em 0 #2e3436;
}

#sources .action.close {
  position: absolute;
  right: 1em;
  top: 1em;
  visibility: hidden;
  width: 16px;
}

#sources .source:hover .action.close {
  visibility: visible;
}

#sources .restrictions {
  bottom: 1em;
  position: absolute;
  right: 1em;
}

#sources .restrictions .type {
  display: inline-block;
  height: 16px;
  margin-left: 0.5em;
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;
  -webkit-opacity: 0.5;
  opacity: 0.5;
  overflow: hidden;
  width: 16px;
}

#sources .source:hover .restrictions .type {
  -khtml-opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
}

#sources .restrictions .type.list:before {
  content: url(../../images/unlock-list.png);
}

#sources .restrictions .type.add:before {
  content: url(../../images/unlock-add.png);
}

#sources .restrictions .type.remove:before {
  content: url(../../images/unlock-remove.png);
}

/*#sources .restricted.areas {
  background: url(../../images/unlock.png) no-repeat left bottom;
  color: #666;
  min-height: 16px;
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;
  -webkit-opacity: 0.5;
  opacity: 0.5;
  position: absolute;
  right: 3em;
  top: 30%;
  min-width: 16px;
}

#sources li:hover .restricted.areas {
  -khtml-opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
}

#sources .restricted.areas li {
  background: #fff url(../../images/unlock.png) no-repeat 0.2em center;
  border: 1px solid #bbddff;
  -moz-border-radius: 0;
  border-radius: 0;
  -moz-box-shadow: 0.15em 0.15em 0.1em #999;
  -webkit-box-shadow: 0.15em 0.15em 0.1em #999;
  box-shadow: 0.15em 0.15em 0.1em #999;
  display: none;
  line-height: 1em;
  -khtml-opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
  padding: 0.4em 0.5em;
  padding-left: 25px;
  right: 8px;
  top: 8px;
  z-index: 2;
}

#sources .restricted.areas li:first-child {
  border-bottom: none;
  -moz-border-radius-topleft: 0.5em;
  border-top-left-radius: 0.5em;
}

#sources .restricted.areas li:last-child {
  border-top: none;
  -moz-border-radius-bottomleft: 0.5em;
  border-bottom-left-radius: 0.5em;
  -moz-border-radius-bottomright: 0.5em;
  border-bottom-right-radius: 0.5em;
}

#sources .restricted.areas li:only-child {
  border: 1px solid #bbddff;
}

#sources .restricted.areas:hover li {
  display: block;
}*/

/* Resources */

/* Required for Safari support */
#resourcelist {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #babdb6;
  height: 100%;
  margin-left: 30%;
  min-height: 3.1em;
  overflow: auto;
  width: 69.5%;
}

#resourcelist *[draggable=true] {
  -khtml-user-drag: element;
  -webkit-user-drag: element;
  -moz-user-select: -moz-none;
}

#resourcelist li {
  background: #eeeeec;
  background: -moz-linear-gradient(#eeeeec, #d3d7cf);
  background: -webkit-gradient(linear, left top, left bottom, from(#eeeeec), to(#d3d7cf));
  filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr=#eeeeec, EndColorStr=#d3d7cf);
  background: linear-gradient(#eeeeec, #d3d7cf);
  border: 1px solid #eeeeec;
  border-bottom: none;
  border-right: none;
  list-style: none;
  float: left;
  margin: 1em;
  outline: 1px solid #babdb6;
  -moz-transition-property: all;
  -moz-transition-duration: 1000ms;
  -o-transition-property: all;
  -o-transition-duration: 1000ms;
  -webkit-transition-property: all;
  -webkit-transition-duration: 1000ms;
  transition-property: all;
  transition-duration: 1000ms;
}

#resourcelist li.added {
  background: #73d216 !important;
  background: -moz-linear-gradient(#73d216, #4e9a06) !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#73d216), to(#4e9a06)) !important;
  filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr=#73d216, EndColorStr=#4e9a06) !important;
  background: linear-gradient(#73d216, #4e9a06) !important;
  border-color: #8ae234;
  outline: 1px solid #73d216;
}

#resourcelist li.selected {
  background: #555753;
  background: -moz-linear-gradient(#555753, #2e3436);
  background: -webkit-gradient(linear, left top, left bottom, from(#555753), to(#2e3436));
  filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr=#555753, EndColorStr=#2e3436);
  background: linear-gradient(#555753, #2e3436);
  border-color: #888a85;
  color: #eeeeec;
  outline-color: #2e3436;
}

#resourcelist li:hover {
  background: #888a85;
  background: -moz-linear-gradient(#888a85, #555753);
  background: -webkit-gradient(linear, left top, left bottom, from(#888a85), to(#555753));
  filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr=#888a85, EndColorStr=#555753);
  background: linear-gradient(#888a85, #555753);
  border-color: #babdb6;
  color: #eeeeec;
  outline-color: #2e3436;
}

#resourcelist figure {
  display: block;
  font-size: 0.8em;
  margin: 0.5em;
  padding: 0.5em;
  text-align: center;
}

#resourcelist figure img {
  display: block;
}

#resourcelist figcaption {
  margin-top: 0.5em;
}

#resourcelist figcaption > * {
  cursor: default;
  display: block;
  max-width: 100px;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.selection {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  outline: 1em dotted red;
}