﻿.imageViewer
{
	width:620px;
	height:350px;
	position:relative;
	overflow:hidden;
	border:solid 0px green;
	background-color:#fff;
	float:left;
}
.imageViewerMetaData
{
    position:absolute;
	z-index: 101;
    bottom: 0px;
    left: 0;
    width:620px;
	margin: 0px;

}

.imageViewer_container
{
	background-color: #555555;
}

.imageViewer_imageDisplay
{
	width:620px;
	height:350px;
	position:relative;
	float:left;
}

	img.imageViewer_image
	{
		width:620px;
		height:350px;
		position:absolute;
		left:0px;
		top:0px;
	}
	
	.imageViewer_loading
	{
	    position:absolute;
	    float:left;
	    width:620px;
	    height:350px;
	    z-index:6;
	    background: #000 url(/lib/cbcmusic/images/loading.gif) no-repeat 50% 50%;
	}
	.imageViewer_loading p
	{
		width:66px;
	    height: 12px;
	    line-height: 12px;
		position:absolute;
		left:280px;
		right:0px;
	    top: 169px;
		color:#fff;
		background:#555;
		padding:0 0 0 4px;
	    font-size: 12px;
        text-transform: uppercase;
	}

.imageViewer_imageControls
{	
    width: 204px;
    padding: 6px 5px 6px 6px;
    position: absolute;
    top: 10px;
    left: 399px;
    background-color: rgba(0, 0, 0, 0.5); /* everyone else */
   *background-color: #000000 !important; /* IE 7 */
    background-color: #000000\0/ !important; /* IE 8-9 */
    -moz-border-radius: 5px;
	border-radius: 5px;
}
	
	.imageViewer_imageControl
	{
        background: url("/lib/cbcmusic/images/sprites/cbcmusic.png") no-repeat;
		width:30px;
		height:30px;
		display:block;
		margin:0px 5px 0px 0px;
		padding:0px;
		cursor:pointer;
		text-indent:-7000px;
		border:0px;
	}
	button.imageViewer_imageControl.zoom {
	    background-position:-700px -420px;
	}
	button.imageViewer_imageControl.toggle {
	    background-position:-750px -420px;
        margin-right: 3px;
	}
	span.imageViewer_imageControl.imageindex  {
	    background-position:-700px -360px;
        text-indent: 0px;
        color: #000;
	}
	button.imageViewer_imageControl.prev {
	    background-position:-800px -420px;
	}
	button.imageViewer_imageControl.next {
	    background-position:-850px -420px;
	    margin-right: 0;
	}

	button.imageViewer_imageControl.zoom:hover {
	    background-position:-700px -480px;
	}
	button.imageViewer_imageControl.toggle:hover {
	    background-position:-750px -480px;
	}
	button.imageViewer_imageControl.prev:hover {
	    background-position:-800px -480px;
	}
	button.imageViewer_imageControl.next:hover {
	    background-position:-850px -480px;
	}


        .imageViewer_imageControl
		{
		    float:left;
		    padding-right:10px;
		}
		
		.imageViewer_imageControl.imageindex
		{
		    float: left; 
		    padding: 0px 5px 0px 5px; 
		    width: 54px; 
		    height: 30px; 
		    line-height: 30px; 
		    text-align:center;
		}
		


.imageViewer_hitZone
{
	position:absolute;
	top:0px;
	left:0px;
	height:350px;
	width:620px;
	z-index:4;
	background:pink;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

div.imageViewer_caption
{
}
	
.captionCreditText {
	line-height:13px;
    padding: 10px;
    /* I'm sorry to have to do this...  */
	background-color: rgba(0, 0, 0, 0.8); /* everyone else */
   *background-color: #000000 !important; /* IE 7 */
    background-color: #000000\0/ !important; /* IE 8-9 */
}
.captionCreditText.captionless { display:none }
	.imageViewer_caption div .captionText
	{
		font-size:13px;
		color: #fafafa;
	    left: 0;
	    top: 0;
	    position: relative;
        line-height: 16px;
	}
	.imageViewer_caption div .captionText p:last-child {
	    margin-bottom: 0px;
	}
	.imageViewer_caption div .creditText
	{
		color: #aaa;
        font-size: 13px;
        display:inline-block;
        padding-left:0;
	    left: 0;
	    top: 0;
	    position: relative;
	}

.imageViewer_grid
{
    background-color:#000;
    float:left;
    border:solid 1px red;
    
}

.imageViewer_grid .page
{   
    top:0px;
    left:0px;
    position:absolute;
    width:610px;
    height:340px; 
    padding:5px;
    background-color:#000;
    z-index:2;
    border:solid 0px orange;
    border-bottom: solid 1px #222;
    overflow-y: auto;
    overflow-x: hidden;
}

.imageViewer_grid .closebox
{
    top:0px;
    right:10px;
    position:absolute;
    float:right;
    width:30px;
    height:30px;
    z-index:6;
    
}

.imageViewer_grid .closebox a
{
    position:relative;
    float:right;
    margin:10px 10px 10px 10px;
    width:30px;
    height:30px;
    background: url(../images/imageControls.gif) no-repeat -30px 0px;
}

.imageViewer_grid .closebox a:hover
{
    background-color:#222;
    cursor:pointer;
}

.imageViewer_grid .item
{
    position:relative;
    float:left;
    width:120px;
    height:70px;
    margin:5px;
	border:solid 1px #000;
    background-color:#000;
}
	
.imageViewer_grid .item:hover
{
	border:solid 1px #fff;
	cursor:pointer;
}


    .captionText a:hover { color: #fff;}