module.C6.SidebarImage-clickable.css

/*--  C.6. Sidebar Image - clickable
	Details : http://www.reddit.com/r/mindashq/wiki/modules/SidebarImages		
	+ 	Add only when corresponding image is loaded in community settings > stylesheet 
	+ 	Update the main CSS header comment block when this module is used
----*/

.side .usertext a[href$='png'],
.side .usertext a[href$='jpg'],
.side .usertext a[href$='jpeg'],
.side .usertext a[href$='gif'],
.side .usertext a[href$='#view'] {
	position: static;
	display: block;
	margin: 0 -10px 15px -15px;
	min-width: 300px;
	min-height: 70px;
	max-width: 310px;
	max-height: 300px;
	width: auto;
	height: 100px; /*Tweak according to desired image height*/
	background: transparent url('%%SidebarImage%%') no-repeat 0 0;
	font-size: 0;
}

	.side .usertext a[href$='png']:hover:after,
	.side .usertext a[href$='jpg']:hover:after,
	.side .usertext a[href$='jpeg']:hover:after,
	.side .usertext a[href$='gif']:hover:after,
	.side .usertext a[href$='#view']:hover:after {
		position: relative;
		top: auto;
		bottom: -20px;
		left: 50%;
		display: block;
		margin: 0 -105px;
		padding: 10px 5px;
		max-width: 200px;
		border: 1px solid #d2d2d2;
		border-radius: 2px;
		background: #fbfbfb;
		content: attr(title) ' ⇨ ';
		text-align: center;
		font-weight: bold;
		font-size: 12px;
		opacity: .8;
	}
/*--  C.6.end Sidebar Image ----*/