/*
File: ImageViewer.css
Description:
Contains styling for the ImageViewer usercontrol, including it's two different modes User and Photo.
Important! ImageViewer JavaScript logic is dependent on many of the specifications below.
*/



/* Common ImageViewer elements */
div.image-viewer
{
	background: transparent url(/TipsCommunity/Includes/Images/Misc/panel-narrow-short-background-no-dividers.png) no-repeat;
	position: relative;
	width: 310px;
	height: 248px;
	margin-bottom: 15px;
}
div.image-viewer div.image-list-container
{
	position: absolute;
	overflow: hidden;
}
div.image-viewer div.image-list-container ol
{
	position: relative;
	margin: 0 auto;
	width: 0;
}
div.image-viewer div.image-list-container ol li
{
	position: absolute;
	width: 50px;
	height: 28px;
}
div.image-viewer div.image-list-container ol li img
{
	width: 42px;
	height: 28px;
	border: solid 1px #333;
	cursor: pointer;
}
div.image-viewer div.image-list-container ol li img.selected
{
	border-color: #239dd5;
}
div.image-viewer div.button-previous,
div.image-viewer div.button-next
{
	position: absolute;
	display: none;
	cursor: pointer;
	width: 28px;
	height: 40px;
}
div.image-viewer div.button-previous
{
	background: url(/TipsCommunity/Includes/Images/Misc/arrow-left.png) no-repeat;
	left: 1px;
}
div.image-viewer div.button-next
{
	background: url(/TipsCommunity/Includes/Images/Misc/arrow-right.png) no-repeat;
	right: 6px;
}
div.image-viewer div.image-info
{
	position: absolute;
	left: 3px;
	top: 2px;
	width: 300px;
	height: 200px;
	cursor: pointer;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center center;
}
div.image-viewer div.image-info div.background,
div.image-viewer div.image-info div.inner
{
	position: absolute;
	left: 0px;
	top: 154px;
	width: 280px;
	height: 25px;
	padding: 10px;
	border-top: solid 1px #666;
}
div.image-viewer div.image-info div.background
{
	opacity: 0.0;
	background-color: #111;
}
div.image-viewer div.image-info div.inner
{
	color: #fff;
	display: none;
	overflow: hidden;
	white-space: nowrap;
}
div.image-viewer div.image-info div.inner h2
{
	text-align: center;
	color: #fff;
}
div.image-viewer div.image-info div.inner a
{
	color: #fff;
}
div.image-viewer div.image-info div.inner img
{
	vertical-align: middle;
	border: solid 1px #fff;
	margin-right: 10px;
}
div.image-viewer div.current-image-arrow
{
	position: absolute;
	top: 195px;
	left: 147px;
	width: 16px;
	height: 8px;
	background: transparent url(/TipsCommunity/Includes/Images/Misc/current-image-arrow.png) no-repeat;
	z-index: 1;
}
div.image-viewer div.image-list-container
{
	height:30px;
	left:31px;
	top:207px;
	width:246px;
}
div.image-viewer div.add-comment-dialog-template,
div.image-viewer div.report-abuse-dialog-template,
div.image-viewer div.report-abuse-result-dialog-template { display: none; }



/* Large version */
div.image-viewer-635
{
	background: url(/TipsCommunity/Includes/Images/Misc/panel-wide-tall-background.png) no-repeat;
	width: 635px;
	height: 483px;
}
div.image-viewer-635 div.image-info
{
	top: 40px;
	left: 2px;
	width: 626px;
	height: 410px;
}
div.image-viewer-635 div.image-info div.background,
div.image-viewer-635 div.image-info div.inner
{
	top: 364px;
	width: 606px;
}
div.image-viewer-635 div.current-image-arrow
{
	left: 307px;
	top: 40px;
	background-image: url(/TipsCommunity/Includes/Images/Misc/current-image-arrow-flipped.png);
}
div.image-viewer-635 div.image-list-container
{
	left:43px;
	top:5px;
	width:544px;
}
div.image-viewer-635 div.button-previous
{
	display: block;
	left: 2px;
	top: 0px;
}
div.image-viewer-635 div.button-next
{
	display: block;
	right: 5px;
	top: 0px;
}
div.image-viewer-635 table.commands
{
	bottom:2px;
	left:6px;
	position:absolute;
	width:619px;
	text-align: center;
}



/* ImageViewer no images fallback */
div.image-viewer-fallback div.button-previous,
div.image-viewer-fallback div.button-next,
div.image-viewer-fallback div.current-image-arrow,
div.image-viewer-fallback div.image-list-container
{
	display: none;
}