/** Global item styles **/

.annotorious-opacity-fade {
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.5s;
  -moz-transition-delay: 0s;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-delay: 0s;
  -o-transition-property: opacity;
  -o-transition-duration: 0.5s;
  -o-transition-delay: 0s;
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
}

.annotorious-item-focus {
  opacity:1.0;
}

.annotorious-item-unfocus {
  opacity:0.4;
}

/** Hint/help popup **/

.annotorious-hint-msg {
  background-color:rgba(0,0,0,0.5);
  margin:4px;
  padding:8px 15px 8px 30px;
  font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
  line-height: normal;
  font-size:12px;
  color:#fff;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  -khtml-border-radius:4px;
}

.annotorious-hint-icon {
  position:absolute;
  top:6px;
  left: 5px;
  background:url('feather_icon.png');
  background-repeat:no-repeat;
  width:19px;
  height:22px;
  margin:2px 4px 0px 6px;
}

/** Popup **/

.annotorious-popup {
  line-height:135%;
  font-family:Arial, Verdana, Sans;
  font-size:12px;
  color:#000;
  background-color:#fff;
  border:1px solid #ccc;
  padding:9px 8px;
  word-wrap:break-word;
  width:180px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  -moz-box-shadow:0px 5px 15px #111;  
  -webkit-box-shadow:0px 5px 15px #111;  
  box-shadow:0px 5px 15px #111;  

  -moz-transition-property: opacity;
  -moz-transition-duration: 0.5s;
  -moz-transition-delay: 0s;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-delay: 0s;
  -o-transition-property: opacity;
  -o-transition-duration: 0.5s;
  -o-transition-delay: 0s;
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
}

.annotorious-popup-empty {
  color:#999;
  font-style:italic;
}

.annotorious-popup-buttons {
  float:right;
  margin:0px 0px 1px 10px;
  height:16px;
  
  -moz-transition-property: opacity;
  -moz-transition-duration: 1s;
  -moz-transition-delay: 0s;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 1s;
  -webkit-transition-delay: 0s;
  -o-transition-property: opacity;
  -o-transition-duration: 1s;
  -o-transition-delay: 0s;
  transition-property: opacity;
  transition-duration: 1s;
  transition-delay: 0s; 
}

.annotorious-popup-button {
  font-size:10px;
  text-decoration:none;
  display:inline-block;
  color:#000;
  font-weight:bold;
  margin-left:5px;
  opacity:0.4;
  
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.5s;
  -moz-transition-delay: 0s;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-delay: 0s;
  -o-transition-property: opacity;
  -o-transition-duration: 0.5s;
  -o-transition-delay: 0s;
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-delay: 0s; 
}

.annotorious-popup-button:hover {
  background-color:transparent;
}

.annotorious-popup-button-active {
  opacity:0.9;
}

.annotorious-popup-button-edit {
  background:url(pencil.png);
  width:16px;
  height:16px;
  text-indent:100px;
  overflow:hidden;
}

.annotorious-popup-button-delete {
  background:url(delete.png);
  width:16px;
  height:16px;
  text-indent:100px;
  overflow:hidden;
  float:right;
}

.annotorious-popup-field {
  border-top:1px solid #ccc;
  margin:6px 0px 0px 0px;
  padding-top:2px;
}

/** Editor **/

.annotorious-editor {
  line-height: normal;
  padding:0px 0px 2px 0px;
  background-color:#f2f2f2;
  color:#000;
  opacity:0.97;
  border:1px solid #ccc;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  -moz-box-shadow:0px 5px 15px #111;  
  -webkit-box-shadow:0px 5px 15px #111;  
  box-shadow:0px 5px 15px #111;  
}

.annotorious-editor-text {
  border-width:0px 0px 1px 0px;
  border-style:solid;
  border-color:#ccc;
  line-height: normal;
  background-color:#fff;
  width:240px;
  height:50px;
  outline:none;
  font-family:Verdana, Arial;
  font-size:11px;
  padding:4px;
  margin:0px;  
  color:#000;
  text-shadow:none;
  overflow-y:auto;
  display:block;
}

.annotorious-editor-button-container {
  padding-top:2px;
}

.annotorious-editor-button {
  float:right;
  line-height: normal;
  display:inline-block;
  text-align:center;
  text-decoration:none;
  font-family:Verdana, Arial;
  font-size:10px;	
  border:1px solid #777;
  color:#ddd;
  padding:3px 8px;
  margin:1px 2px 0px 1px;
  cursor:pointer;
  cursor:hand;
  background:-webkit-gradient(linear, left top, left bottom, from(#888), to(#555));
  background:-moz-linear-gradient(top,  #888,  #555);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#555555');
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  -khtml-border-radius:2px;
  border-radius:2px;
}

.annotorious-editor-button:hover {
  background:#999;
}

.annotorious-editor-field {
  border-bottom:1px solid #ccc;
  margin:0px;
  background-color:#fff;
  padding:3px;
  font-family:Verdana, Arial;
  font-size:12px;	
}

/** OpenLayers module **/
.annotorious-ol-boxmarker-outer {
  border:1px solid #000;
}

.annotorious-ol-boxmarker-inner {
  border:1px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.annotorious-ol-hint {
  line-height: normal;
  font-family:Arial, Verdana, Sans;
  font-size:16px;
  color:#000;
  background-color:#fff;
  margin:0px;
  padding:9px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}

.annotorious-ol-hint-secondary {
  background-color:#fff000;
}

canvas {
  z-index: 2;
}

canvas.hidden {
  z-index: -1;
  visibility: hidden;
}
  
html.hasTouch .annotator-viewer li .annotator-controls, 
html.hasTouch .annotator-viewer li .annotator-controls {
  opacity: 1;
}