/* usage examples:
	css selector for a button with the plus symbol: .ci_btn.ci_symbol.ci_plus
	css selector for a text only button: .ci_btn.ci_text
	css selector for a text button with a plus symbol: .ci_btn.ci_text.ci_symbol.ci_plus
*/

@media screen {
		
	a.ci_btn {
		display: inline-block;
		height: 21px;
		width: 16px;
		box-shadow: 0 0 2px #666;
		margin-right: 0.25em;
		line-height: 1.3em;
		padding: 0 0.5em;
	}
	a.ci_btn:hover{
		background-color: #bb4b42;
	}
	a.ci_symbol {
		background-repeat: no-repeat;
		background-position: 0.5em center;
		padding: 0 0.5em 0 23px; /* adjust background position too. Both has to be the same */
		height: 21px;
		vertical-align: middle;
		line-height: 1.4em;
	}	
	a.ci_btn.ci_symbol {
		/* if using symbol and text -> text has to move to the right for the symbol */
		padding-left: 0.5em;
	}	
	a.ci_btn.ci_symbol.ci_text {
		/* if using symbol and text -> text has to move to the right for the symbol */
		padding-left: 30px;
	}
		
	a.ci_btn.ci_symbol.ci_plus{ background-image: url('../img/symbols/dark_grey/plus_16x16.png'); }
	a.ci_btn.ci_symbol.ci_plus:hover { background-image: url('../img/symbols/white/plus_16x16.png'); }

	a.ci_btn.ci_symbol.ci_del { background-image: url('../img/symbols/dark_grey/x_14x14.png'); }
	a.ci_btn.ci_symbol.ci_del:hover { background-image: url('../img/symbols/white/x_14x14.png'); }

	a.ci_btn.ci_symbol.ci_magnify { background-image: url('../img/symbols/dark_grey/magnifying_glass_16x16.png'); }
	a.ci_btn.ci_symbol.ci_magnify:hover { background-image: url('../img/symbols/white/magnifying_glass_16x16.png'); }

	a.ci_btn.ci_symbol.ci_arrow_left { background-image: url('../img/symbols/dark_grey/arrow_left_16x16.png'); }
	a.ci_btn.ci_symbol.ci_arrow_left:hover { background-image: url('../img/symbols/white/arrow_left_16x16.png'); }
	
	a.ci_symbol.ci_download { background-image: url('../img/symbols/dark_grey/download_9x12.png'); }
	a.ci_symbol.ci_download:hover { background-image: url('../img/symbols/white/download_9x12.png'); }

	a.ci_btn.ci_text {
		color: #444444;
		font-size: 1.2em;
		font-weight: 800;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		vertical-align: middle;
		width: auto;
	}
	a.ci_btn.ci_text:hover {
		color: white;
	}
	
	
	
	
}