/*------------------------------------*\
	ANNOTATE
\*------------------------------------*/
/*
annotate is a CSS plugin by Harry Roberts -- github.com/csswizardry/annotate
*/
/*
Apply a class of annotated to any figure you would like, well, annotated!
*/
.annotated{
	position:relative;
	display:inline-block;
	/**display:inline;
    zoom:1;*/
}
.annotated img{ /* Set this to stop white-space appearing under the image. */
	display:block;
}
.fig-title{ /* Hide the figcaption's title. */
	position:absolute;
	left:-99999px;
}
.annotations{ /* Set up the canvas for the annotations to sit on. */
	list-style:none;
	position:absolute; 
	top:0;
	right:0;
	bottom:0;
	left:0;
}
.annotations > li{
	display:block;
	padding:0 5px;
	/* Give them a width and a line-height suitable for your kind of images. I chose 50px. */
	width:35px; /* 40px + 5px padding-right  + 5px padding-left = 50px */
	line-height:35px;
	position:absolute;
	white-space:nowrap;
	text-indent:-99999px; /* Hide the text */
	cursor:default;
	font-size:14px;
}
.annotated:hover li{ /* When we hover the figure show us where the annotations are. */
	border:1px solid #fff;
}
.annotated li:hover{ /* Show the text on hover. */
	background:#fff;
	background:rgba(255,255,255,0.55);
	z-index:2; /* Bring current annotation above others. */
	/* Remove the width and text-indent to show us our text! */
	width:auto;
	text-indent:0;
	
	/* A bit o' progressive enhancement */
	-moz-box-shadow:0 0 5px rgba(0,0,0,0.25);
	-webkit-box-shadow:0 0 5px rgba(0,0,0,0.25);
	box-shadow:1px 1px 10px rgba(0,0,0,0.60);
	border-radius:10px;
}

/*
Long-form annotations.
*/
.annotated.long li{
	width:5px; /* 5px + 10px padding = 15px */
	height:5px;
	padding:5px;
	line-height:1;
	white-space:normal;
}
.annotated.long li:hover{ /* Show the text on hover. */
	position:relative;
	width:auto;
	height:auto;
	text-indent:0;
	float:left; /* Make the list item hug its content. */
}
.annotated.long li:hover:before{ /* Create a little white arrow pointing to the subject. */
	content:"";
	width:0;
	height:0;
	border:5px solid #fff;
	border-color:transparent #fff transparent transparent;
	position:absolute;
	top:5px;
	right:100%;
}

@media only screen and (max-width: 480px) {
	
	
	.annotations > li{
	display:block;
	padding:0 3px;
	/* Give them a width and a line-height suitable for your kind of images. I chose 50px. */
	width:20px; /* 40px + 5px padding-right  + 5px padding-left = 50px */
	line-height:20px;
	position:absolute;
	white-space:nowrap;
	text-indent:-99999px; /* Hide the text */
	cursor:default;
	font-size:10px;
}
	
	}