/***
 *	Updated: 2017-09-02
 *
 *	<a id="id-drop-item" class="drop-item drop-{before|after} drop-{down|up|left|right} {drop-item-active}" data-drop-target="id-drop-target">Clique</a>
 *	<div id="id-drop-target" class="drop-target hide {drop-targer-active} {drop-doc-hide}" data-drop-item="id-drop-item">
 *		inner drop list
 *	</div>
 */

.drop-item { display: block; cursor: pointer }
	.drop-item-active {}

.drop-target { transition: none !important }
	.drop-target-active {}

.drop-doc-hide {}

.drop-before, .drop-after { position: relative }
	.drop-before:after, .drop-after:after { content: ''; position: absolute; width: 0; height: 0 }

a.drop-before, a.drop-after {}
	a.drop-before:hover, a.drop-after:hover {}

.drop-before { padding-left: 20px }
	.drop-before:after { left: 0 }
	.drop-left.drop-before:after, .drop-right.drop-before:after  { left: 3px }

.drop-after { padding-right: 20px }
	.drop-after:after { right: 0 }
	.drop-left.drop-after:after, .drop-right.drop-after:after  { right: 3px }

.drop-down:after, .drop-up:after { border-left: 5px solid transparent; border-right: 5px solid transparent; top: 6px }
.drop-left:after, .drop-right:after { border-top: 5px solid transparent; border-bottom: 5px solid transparent; top: 4px }

.drop-down:after { border-top: 5px solid #333 }
.drop-up:after { border-bottom: 5px solid #333 }
.drop-left:after { border-right: 5px solid #333 }
.drop-right:after { border-left: 5px solid #333 }