diff annotator_files/css/annotator.css @ 3:6356e78ccf5c

new version contains Annotator JS files to be used with FilesystemSite.
author casties
date Thu, 05 Apr 2012 19:37:27 +0200
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/annotator_files/css/annotator.css	Thu Apr 05 19:37:27 2012 +0200
@@ -0,0 +1,878 @@
+/* Base Reset
+-------------------------------------------------------------------- */
+
+.annotator-notice,
+.annotator-filter *,
+.annotator-widget * {
+	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-weight: normal;
+	text-align: left;
+	margin: 0;
+	padding: 0;
+	background: none;
+	-webkit-transition: none;
+	-moz-transition: none;
+	-o-transition: none;
+	transition: none;
+	-moz-box-shadow: none;
+	-webkit-box-shadow: none;
+	-o-box-shadow: none;
+	box-shadow: none;
+	color: rgb(144, 144, 144);
+}
+
+/* Images
+-------------------------------------------------------------------- */
+
+.annotator-adder {
+	background-image: url(../img/annotator-icon-sprite.png);
+	background-repeat: no-repeat;
+}
+
+.annotator-resize,
+.annotator-widget::after,
+.annotator-editor a::after,
+.annotator-viewer .annotator-controls button,
+.annotator-viewer .annotator-controls a,
+.annotator-filter .annotator-filter-navigation button::after,
+.annotator-filter .annotator-filter-property .annotator-filter-clear {
+	background-image: url(../img/annotator-glyph-sprite.png);
+	background-repeat: no-repeat;
+}
+
+/* Annotator Highlight
+-------------------------------------------------------------------- */
+
+.annotator-hl {
+	background: rgba(255, 255, 10, 0.3);
+}
+
+/* Annotator Wrapper
+-------------------------------------------------------------------- */
+
+.annotator-wrapper {
+	position: relative;
+}
+
+.annotator-adder,
+.annotator-outer,
+.annotator-notice {
+	z-index: 9999;
+}
+
+.annotator-adder,
+.annotator-outer,
+.annotator-widget,
+.annotator-notice {
+	position: absolute;
+	font-size: 10px;
+	line-height: 1;
+}
+
+.annotator-hide {
+	display: none;
+	visibility: hidden;
+}
+
+/* Annotator Adder
+-------------------------------------------------------------------- */
+
+.annotator-adder {
+	margin-top: -48px;
+	margin-left: -24px;
+	width: 48px;
+	height: 48px;
+	background-position: left top;
+}
+
+.annotator-adder:hover {
+	background-position: center top;
+}
+
+.annotator-adder:active {
+	background-position: center right;
+}
+
+.annotator-adder button {
+	display: block;
+	width: 36px;
+	height: 41px;
+	margin: 0 auto;
+	border: none;
+	background: none;
+	text-indent: -999em;
+	cursor: pointer;
+}
+
+/* Annotator Widget
+   
+   This applies to both the Viewer and the Editor
+-------------------------------------------------------------------- */
+
+.annotator-outer {
+	width: 0;
+	height: 0;
+}
+
+.annotator-widget {
+	margin: 0;
+	padding: 0;
+	bottom: 15px;
+	left: -18px;
+	min-width: 265px;
+	background-color: rgba(251, 251, 251, 0.98);
+	border: 1px solid rgba(122, 122, 122, 0.6);
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+	-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+	-moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+	-o-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.annotator-invert-x .annotator-widget {
+	left: auto;
+	right: -18px;
+}
+
+.annotator-invert-y .annotator-widget {
+	bottom: auto;
+	top: 8px;
+}
+
+.annotator-widget strong {
+	font-weight: bold;
+}
+
+.annotator-widget .annotator-listing,
+.annotator-widget .annotator-item {
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+
+.annotator-widget::after {
+	content: "";
+	display: block;
+	width: 18px;
+	height: 10px;
+	background-position: 0 0;
+	position: absolute;
+	bottom: -10px;
+	left: 8px;
+}
+
+.annotator-invert-x .annotator-widget::after {
+	left: auto;
+	right: 8px;
+}
+
+.annotator-invert-y .annotator-widget::after {
+	background-position: 0 -15px;
+	bottom: auto;
+	top: -9px;
+}
+
+.annotator-widget .annotator-item,
+.annotator-editor .annotator-item input,
+.annotator-editor .annotator-item textarea {
+	position: relative;
+	font-size: 12px;
+}
+
+.annotator-viewer .annotator-item {
+	border-top: 2px solid rgba(122, 122, 122, 0.2);
+}
+
+.annotator-widget .annotator-item:first-child {
+	border-top: none;
+}
+
+.annotator-editor .annotator-item,
+.annotator-viewer div {
+	border-top: 1px solid rgba(133, 133, 133, 0.11);
+}
+
+/* Annotator Viewer
+-------------------------------------------------------------------- */
+
+.annotator-viewer div {
+	padding: 6px 6px;
+}
+
+.annotator-viewer .annotator-item ol,
+.annotator-viewer .annotator-item ul {
+	padding: 4px 16px;
+}
+
+.annotator-viewer .annotator-item li {
+}
+
+.annotator-viewer div:first-of-type,
+.annotator-editor .annotator-item:first-child textarea {
+	padding-top: 12px;
+	padding-bottom: 12px;
+	color: rgb(60, 60, 60);
+	font-size: 13px;
+	font-style: italic;
+	line-height: 1.3;
+	border-top: none;
+}
+
+.annotator-viewer .annotator-controls {
+	position: relative;
+	top: 5px;
+	right: 5px;
+	padding-left: 5px;
+	opacity: 0;
+	-webkit-transition: opacity 0.2s ease-in;
+	-moz-transition: opacity 0.2s ease-in;
+	-o-transition: opacity 0.2s ease-in;
+	transition: opacity 0.2s ease-in;
+	float: right;
+}
+
+.annotator-viewer li:hover .annotator-controls,
+.annotator-viewer li .annotator-controls.annotator-visible {
+	opacity: 1;
+}
+
+.annotator-viewer .annotator-controls button,
+.annotator-viewer .annotator-controls a {
+	cursor: pointer;
+	display: inline-block;
+	width: 13px;
+	height: 13px;
+	margin-left: 2px;
+	border: none;
+	opacity: 0.2;
+	text-indent: -900em;
+	background-color: transparent;
+	outline: none;
+}
+
+.annotator-viewer .annotator-controls button:hover,
+.annotator-viewer .annotator-controls button:focus,
+.annotator-viewer .annotator-controls a:hover,
+.annotator-viewer .annotator-controls a:focus {
+	opacity: 0.9;
+}
+
+.annotator-viewer .annotator-controls button:active,
+.annotator-viewer .annotator-controls a:active {
+	opacity: 1;
+}
+
+.annotator-viewer .annotator-controls button[disabled] {
+	display: none;
+}
+
+.annotator-viewer .annotator-controls .annotator-edit {
+	background-position: 0 -60px;
+}
+
+.annotator-viewer .annotator-controls .annotator-delete {
+	background-position: 0 -75px;
+}
+
+.annotator-viewer .annotator-controls .annotator-link {
+	background-position: 0 -270px;
+}
+
+/* Annotator Editor
+-------------------------------------------------------------------- */
+
+.annotator-editor .annotator-item {
+	position: relative;
+}
+
+.annotator-editor .annotator-item label {
+	top: 0;
+	display: inline;
+	cursor: pointer;
+	font-size: 12px;
+}
+
+.annotator-editor .annotator-item input,
+.annotator-editor .annotator-item textarea {
+	display: block;
+	min-width: 100%;
+	padding: 10px 8px;
+	border: none;
+	margin: 0;
+	color: rgb(60, 60, 60);
+	background: none;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-o-box-sizing: border-box;
+	box-sizing: border-box;
+	resize: none;
+}
+
+.annotator-editor .annotator-item textarea::-webkit-scrollbar {
+	height: 8px;
+	width: 8px;
+}
+
+.annotator-editor .annotator-item textarea::-webkit-scrollbar-track-piece {
+	margin: 13px 0 3px;
+	background-color: #e5e5e5;
+	-webkit-border-radius: 4px;
+}
+
+.annotator-editor .annotator-item textarea::-webkit-scrollbar-thumb:vertical {
+	height: 25px;
+	background-color: #ccc;
+	-webkit-border-radius: 4px;
+	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.annotator-editor .annotator-item textarea::-webkit-scrollbar-thumb:horizontal {
+	width: 25px;
+	background-color: #ccc;
+	-webkit-border-radius: 4px;
+}
+
+.annotator-editor .annotator-item:first-child textarea {
+	min-height: 5.5em;
+	-webkit-border-radius: 5px 5px 0 0;
+	-moz-border-radius: 5px 5px 0 0;
+	-o-border-radius: 5px 5px 0 0;
+	border-radius: 5px 5px 0 0;
+}
+
+.annotator-editor .annotator-item input:focus,
+.annotator-editor .annotator-item textarea:focus{
+	background-color: rgb(243, 243, 243);
+	outline: none;
+}
+
+.annotator-editor .annotator-item input[type=radio],
+.annotator-editor .annotator-item input[type=checkbox] {
+	width: auto;
+	min-width: 0;
+	padding: 0;
+	display: inline;
+	margin: 0 4px 0 0;
+	cursor: pointer;
+}
+
+.annotator-editor .annotator-checkbox {
+	padding: 8px 6px;
+}
+
+.annotator-filter,
+.annotator-filter .annotator-filter-navigation button,
+.annotator-editor .annotator-controls {
+	text-align: right;
+	padding: 3px;
+	border-top: 1px solid rgb(212,212,212);
+	background-color: rgb(212, 212, 212);
+	background-image: -webkit-gradient(
+		linear, left top, left bottom,
+		from(rgb(245, 245, 245)),
+		color-stop(0.6, rgb(220, 220, 220)),
+		to(rgb(210, 210, 210))
+	);
+	background-image: -moz-linear-gradient(
+	    -90deg,
+	    rgb(245, 245, 245),
+	    rgb(220, 220, 220) 60%,
+	    rgb(210, 210, 210)
+	);
+	background-image: -webkit-linear-gradient(
+	    -90deg,
+	    rgb(245, 245, 245),
+	    rgb(220, 220, 220) 60%,
+	    rgb(210, 210, 210)
+	);
+	background-image: linear-gradient(
+	    -90deg,
+	    rgb(245, 245, 245),
+	    rgb(220, 220, 220) 60%,
+	    rgb(210, 210, 210)
+	);
+	-webkit-box-shadow: 
+		inset 1px   0   0 rgba(255, 255, 255, 0.7),
+		inset -1px  0   0 rgba(255, 255, 255, 0.7),
+		inset 0     1px 0 rgba(255, 255, 255, 0.7);
+	-moz-box-shadow: 
+		inset 1px   0   0 rgba(255, 255, 255, 0.7),
+		inset -1px  0   0 rgba(255, 255, 255, 0.7),
+		inset 0     1px 0 rgba(255, 255, 255, 0.7);
+	-o-box-shadow: 
+		inset 1px   0   0 rgba(255, 255, 255, 0.7),
+		inset -1px  0   0 rgba(255, 255, 255, 0.7),
+		inset 0     1px 0 rgba(255, 255, 255, 0.7);
+	box-shadow: 
+		inset 1px   0   0 rgba(255, 255, 255, 0.7),
+		inset -1px  0   0 rgba(255, 255, 255, 0.7),
+		inset 0     1px 0 rgba(255, 255, 255, 0.7);
+	-webkit-border-radius: 0 0 5px 5px;
+	-moz-border-radius: 0 0 5px 5px;
+	-o-border-radius: 0 0 5px 5px;
+	border-radius: 0 0 5px 5px;
+}
+
+.annotator-invert-y .annotator-controls {
+	border-top: none;
+	border-bottom: 1px solid rgb(180, 180, 180);
+	-webkit-border-radius: 5px 5px 0 0;
+	-moz-border-radius: 5px 5px 0 0;
+	-o-border-radius: 5px 5px 0 0;
+	border-radius: 5px 5px 0 0;
+}
+
+.annotator-editor a,
+.annotator-filter .annotator-filter-property label {
+	position: relative;
+	display: inline-block;
+	padding: 0 6px 0 22px;
+	color: rgb(54, 54, 54);
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
+	text-decoration: none;
+	line-height: 24px;
+	font-size: 12px;
+	font-weight: bold;
+	border: 1px solid rgb(162, 162, 162);
+	background-color: rgb(212, 212, 212);
+	background-image: -webkit-gradient(
+		linear, left top, left bottom,
+		from(rgb(245, 245, 245)),
+		color-stop(0.5, rgb(210, 210, 210)),
+		color-stop(0.5, rgb(190, 190, 190)),
+		to(rgb(210, 210, 210))
+	);
+	background-image: -moz-linear-gradient(
+	    -90deg,
+	    rgb(245, 245, 245),
+	    rgb(210, 210, 210) 50%,
+	    rgb(190, 190, 190) 50%,
+	    rgb(210, 210, 210)
+	);
+	background-image: -webkit-linear-gradient(
+	    -90deg,
+	    rgb(245, 245, 245),
+	    rgb(210, 210, 210) 50%,
+	    rgb(190, 190, 190) 50%,
+	    rgb(210, 210, 210)
+	);
+	background-image: linear-gradient(
+	    -90deg,
+	    rgb(245, 245, 245),
+	    rgb(210, 210, 210) 50%,
+	    rgb(190, 190, 190) 50%,
+	    rgb(210, 210, 210)
+	);
+	-webkit-box-shadow: 
+		inset 0 0 5px rgba(255, 255, 255, 0.2),
+		inset 0 0 1px rgba(255, 255, 255, 0.8);
+	-moz-box-shadow:
+		inset 0 0 5px rgba(255, 255, 255, 0.2),
+		inset 0 0 1px rgba(255, 255, 255, 0.8);
+	-o-box-shadow:
+		inset 0 0 5px rgba(255, 255, 255, 0.2),
+		inset 0 0 1px rgba(255, 255, 255, 0.8);
+	box-shadow:
+		inset 0 0 5px rgba(255, 255, 255, 0.2),
+		inset 0 0 1px rgba(255, 255, 255, 0.8);
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	-o-border-radius: 5px;
+	border-radius: 5px;
+}
+
+.annotator-editor a::after {
+	position: absolute;
+	top: 50%;
+	left: 5px;
+	display: block;
+	content: "";
+	width: 15px;
+	height: 15px;
+	margin-top: -7px;
+	background-position: 0 -90px;
+}
+
+.annotator-editor a:hover,
+.annotator-editor a:focus,
+.annotator-editor a.annotator-focus,
+.annotator-filter .annotator-filter-active label,
+.annotator-filter .annotator-filter-navigation button:hover {
+	outline: none;
+	border-color: rgb(67, 90, 160);
+	background-color: rgb(56, 101, 249);
+	background-image: -webkit-gradient(
+		linear, left top, left bottom,
+		from(rgb(118, 145, 251)),
+		color-stop(0.5, rgb(80, 117, 251)),
+		color-stop(0.5, rgb(56, 101, 249)),
+		to(rgb(54, 101, 250))
+	);
+	background-image: -moz-linear-gradient(
+	    -90deg,
+	    rgb(118, 145, 251),
+	    rgb(80, 117, 251) 50%,
+	    rgb(56, 101, 249) 50%,
+	    rgb(54, 101, 250)
+	);
+	background-image: -webkit-linear-gradient(
+	    -90deg,
+	    rgb(118, 145, 251),
+	    rgb(80, 117, 251) 50%,
+	    rgb(56, 101, 249) 50%,
+	    rgb(54, 101, 250)
+	);
+	background-image: linear-gradient(
+	    -90deg,
+	    rgb(118, 145, 251),
+	    rgb(80, 117, 251) 50%,
+	    rgb(56, 101, 249) 50%,
+	    rgb(54, 101, 250)
+	);
+	color: rgb(255, 255, 255);
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.42);
+}
+
+.annotator-editor a:hover::after,
+.annotator-editor a:focus::after {
+	margin-top: -8px;
+	background-position: 0 -105px;
+}
+
+.annotator-editor a:active,
+.annotator-filter .annotator-filter-navigation button:active {
+	border-color: rgb(112, 12, 73);
+	background-color: rgb(209, 46, 142);
+	background-image: -webkit-gradient(
+		linear, left top, left bottom,
+		from(rgb(252, 124, 202)),
+		color-stop(0.5, rgb(232, 93, 178)),
+		color-stop(0.5, rgb(209, 46, 142)),
+		to(rgb(255, 0, 156))
+	);
+	background-image: -moz-linear-gradient(
+	    -90deg,
+	    rgb(252, 124, 202),
+	    rgb(232, 93, 178) 50%,
+	    rgb(209, 46, 142) 50%,
+	    rgb(255, 0, 156)
+	);
+	background-image: -webkit-linear-gradient(
+	    -90deg,
+	    rgb(252, 124, 202),
+	    rgb(232, 93, 178) 50%,
+	    rgb(209, 46, 142) 50%,
+	    rgb(255, 0, 156)
+	);
+	background-image: linear-gradient(
+	    -90deg,
+	    rgb(252, 124, 202),
+	    rgb(232, 93, 178) 50%,
+	    rgb(209, 46, 142) 50%,
+	    rgb(255, 0, 156)
+	);
+}
+
+.annotator-editor a.annotator-save::after {
+	background-position: 0 -120px;
+}
+
+.annotator-editor a.annotator-save:hover::after,
+.annotator-editor a.annotator-save:focus::after,
+.annotator-editor a.annotator-save.annotator-focus::after {
+	margin-top: -8px;
+	background-position: 0 -135px;
+}
+
+.annotator-editor .annotator-widget::after {
+	background-position: 0 -30px;
+}
+
+.annotator-editor.annotator-invert-y .annotator-widget .annotator-controls {
+	background-color: #f2f2f2;
+}
+
+.annotator-editor.annotator-invert-y .annotator-widget::after {
+	background-position: 0 -45px;
+	height: 11px;
+}
+
+.annotator-resize {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 12px;
+	height: 12px;
+	background-position: 2px -150px;
+}
+
+.annotator-invert-x .annotator-resize {
+	right: auto;
+	left: 0;
+	background-position: 0 -195px;
+}
+
+.annotator-invert-y .annotator-resize {
+	top: auto;
+	bottom: 0;
+	background-position: 2px -165px;
+}
+
+.annotator-invert-y.annotator-invert-x .annotator-resize {
+	background-position: 0 -180px;
+}
+
+/* Annotator Notification
+-------------------------------------------------------------------- */
+
+.annotator-notice {
+	color: #fff;
+	position: absolute;
+	position: fixed;
+	top: -54px;
+	left: 0;
+	width: 100%;
+	font-size: 14px;
+	line-height: 50px;
+	text-align: center;
+	background: black;
+	background: rgba(0, 0, 0, 0.9);
+	border-bottom: 4px solid #d4d4d4;
+	-webkit-transition: top 0.4s ease-out;
+	-moz-transition: top 0.4s ease-out;
+	-o-transition: top 0.4s ease-out;
+	transition: top 0.4s ease-out;
+}
+
+.ie6 .annotator-notice {
+	position: absolute;
+}
+
+.annotator-notice-success {
+	border-color: #3665f9;
+}
+
+.annotator-notice-error {
+	border-color: #ff7e00;
+}
+
+.annotator-notice p {
+	margin: 0;
+}
+
+.annotator-notice a {
+	color: #fff;
+}
+
+.annotator-notice-show {
+	top: 0;
+}
+
+/* Annotator Tags Plugin
+-------------------------------------------------------------------- */
+
+.annotator-tags {
+	margin-bottom: -2px;
+}
+
+.annotator-tags .annotator-tag {
+	display: inline-block;
+	padding: 0 8px;
+	margin-bottom: 2px;
+	line-height: 1.6;
+	font-weight: bold;
+	background-color: rgb(230, 230, 230);
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	-o-border-radius: 8px;
+	border-radius: 8px;
+}
+
+/* Annotator Filter Plugin
+-------------------------------------------------------------------- */
+
+.annotator-filter {
+	z-index: 9998; /* notifications/popups at 9999; filter bar should be lower */
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	text-align: left;
+	line-height: 0;
+	border: none;
+	border-bottom: 1px solid #878787;
+	padding-left: 10px;
+	padding-right: 10px;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+	-o-border-radius: 0;
+	border-radius: 0;
+	-webkit-box-shadow: 
+		inset 0 -1px 0 rgba(255, 255, 255, 0.3);
+	-moz-box-shadow: 
+		inset 0 -1px 0 rgba(255, 255, 255, 0.3);
+	-o-box-shadow: 
+		inset 0 -1px 0 rgba(255, 255, 255, 0.3);
+	box-shadow: 
+		inset 0 -1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.annotator-filter strong {
+	font-size: 12px;
+	font-weight: bold;
+	color: #3c3c3c;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+	position: relative;
+	top: -9px;
+}
+
+
+.annotator-filter .annotator-filter-property,
+.annotator-filter .annotator-filter-navigation {
+	position: relative;
+	display: inline-block;
+	overflow: hidden;
+	line-height: 10px;
+	padding: 2px 0;
+	margin-right: 8px;
+}
+
+.annotator-filter .annotator-filter-property label,
+.annotator-filter .annotator-filter-navigation button {
+	text-align: left;
+	display: block;
+	float: left;
+	line-height: 20px;
+	-webkit-border-radius: 10px 0 0 10px;
+	-moz-border-radius: 10px 0 0 10px;
+	-o-border-radius: 10px 0 0 10px;
+	border-radius:  10px 0 0 10px;
+}
+
+.annotator-filter .annotator-filter-property label {
+	padding-left: 8px;
+}
+
+.annotator-filter .annotator-filter-property input {
+	display: block;
+	float: right;
+	-webkit-appearance: none;
+	background-color: #fff;
+	border: 1px solid #878787;
+	border-left: none;
+	padding: 2px 4px;
+	line-height: 16px;
+	min-height: 16px;
+	font-size: 12px;
+	width: 150px;
+	color: #333;
+	background-color: #f8f8f8;
+	-webkit-border-radius: 0 10px 10px 0;
+	-moz-border-radius: 0 10px 10px 0;
+	-o-border-radius: 0 10px 10px 0;
+	border-radius:  0 10px 10px 0;
+	-webkit-box-shadow: 
+		inset 0 1px 1px rgba(0, 0, 0, 0.2);
+	-moz-box-shadow: 
+		inset 0 1px 1px rgba(0, 0, 0, 0.2);
+	-o-box-shadow: 
+		inset 0 1px 1px rgba(0, 0, 0, 0.2);
+	box-shadow: 
+		inset 0 1px 1px rgba(0, 0, 0, 0.2);
+	
+}
+
+.annotator-filter .annotator-filter-property input:focus {
+	outline: none;
+	background-color: #fff;
+}
+
+.annotator-filter .annotator-filter-clear {
+	position: absolute;
+	right: 3px;
+	top: 6px;
+	border: none;
+	text-indent: -900em;
+	width: 15px;
+	height: 15px;
+	background-position: 0 -90px;
+	opacity: 0.4;
+}
+
+.annotator-filter .annotator-filter-clear:hover,
+.annotator-filter .annotator-filter-clear:focus {
+	opacity: 0.8;
+}
+
+.annotator-filter .annotator-filter-clear:active {
+	opacity: 1;
+}
+
+.annotator-filter .annotator-filter-navigation button {
+	border: 1px solid rgb(162, 162, 162);
+	padding: 0;
+	text-indent: -900px;
+	width: 20px;
+	min-height: 22px;
+	-webkit-box-shadow: 
+		inset 0 0 5px rgba(255, 255, 255, 0.2),
+		inset 0 0 1px rgba(255, 255, 255, 0.8);
+	-moz-box-shadow:
+		inset 0 0 5px rgba(255, 255, 255, 0.2),
+		inset 0 0 1px rgba(255, 255, 255, 0.8);
+	-o-box-shadow:
+		inset 0 0 5px rgba(255, 255, 255, 0.2),
+		inset 0 0 1px rgba(255, 255, 255, 0.8);
+	box-shadow:
+		inset 0 0 5px rgba(255, 255, 255, 0.2),
+		inset 0 0 1px rgba(255, 255, 255, 0.8);
+}
+
+.annotator-filter .annotator-filter-navigation button,
+.annotator-filter .annotator-filter-navigation button:hover,
+.annotator-filter .annotator-filter-navigation button:focus {
+	color: transparent;
+}
+
+.annotator-filter .annotator-filter-navigation button::after {
+	position: absolute;
+	top: 8px;
+	left: 8px;
+	content: "";
+	display: block;
+	width: 9px;
+	height: 9px;
+	background-position: 0 -210px;
+}
+
+.annotator-filter .annotator-filter-navigation button:hover::after {
+	background-position: 0 -225px;
+}
+
+.annotator-filter .annotator-filter-navigation .annotator-filter-next {
+	-webkit-border-radius: 0 10px 10px 0;
+	-moz-border-radius: 0 10px 10px 0;
+	-o-border-radius: 0 10px 10px 0;
+	border-radius:  0 10px 10px 0;
+	border-left: none;
+}
+
+.annotator-filter .annotator-filter-navigation .annotator-filter-next::after {
+	left: auto;
+	right: 7px;
+	background-position: 0 -240px;
+}
+
+.annotator-filter .annotator-filter-navigation .annotator-filter-next:hover::after {
+	background-position: 0 -255px;
+}
+
+.annotator-hl-active {
+	background: rgba(255, 255, 10, 0.8);
+}
+
+.annotator-hl-filtered {
+	background-color: transparent;
+}