/*
    This is the master CSS file for the dojox.image project, and provides all
    needed definitions for:
    
    dojox.image.Lightbox
    dojox.image.Gallery [which is a combination of:]
    dojox.image.SlideShow
    dojox.image.ThumbNailPicker

*/


/* dojox.image.Lightbox:base */
/* FIXME: should be be doing this? I want a black underlay, but this sets ALL dialogs to black,
    but because it's decendant of body, i can't set this color any other way ... */
.dijitDialogUnderlay {
	background-color:#000; 
}

.dojoxLightbox {
	position:absolute;
	z-index:999;
	overflow:hidden;
	width:100px;
	height:100px; 
	border:11px solid #fff;
	background:#fff url('images/loading.gif') no-repeat center center;

        /* special safari + FF specific rounding + shadows */
	-webkit-box-shadow: 0px 6px 10px #636363; /* #adadad; */
	-webkit-border-radius: 3px;
	-moz-border-radius:4px;
}

.dojoxLightboxContainer {
	position:absolute;
	top:0; left:0; 
}

.dojoxLightboxFooter {
	height:50px; 
	position:relative;
	bottom:0;
	left:0;
	margin-top:8px;
	color:#333;
	z-index:1000;
	font-size:10pt;
}

.dojoxLightboxGroupText {
	color:#666; 
	font-size:8pt;
}

.LightboxNext,
.LightboxPrev,
.LightboxClose {
	float:right;
	width:16px;
	height:16px;
	cursor:pointer;
}

/* dojox.image.Lightbox:tundra:nihilo */

.nihilo .LightboxClose,
.tundra .LightboxClose {
	background:url('images/close.png') no-repeat center center;
}
.nihilo .LightboxNext,
.tundra .LightboxNext {
	background:url('images/right.png') no-repeat center center;
}
.nihilo .LightboxPrev,
.tundra .LightboxPrev {
	background:url('images/left.png') no-repeat center center;
}

/* dojox.image.Lightbox:soria */
.soria .LightboxClose,
.soria .LightboxNext,
.soria .LightboxPrev {
	width:15px;
	height:15px;
	background:url('../../../dijit/themes/soria/images/spriteRoundedIconsSmall.png') no-repeat center center;
	background-position:-60px;
}
.soria .LightboxNext {
	background-position:-30px 0;
}
.soria .LightboxPrev {
	background-position:0 0;
}



/* dojox.image.SlideShow */

.slideShowWrapper { 
	position:relative; 
	background:#fff;
	padding:8px; 
	border:1px solid #333;	
	padding-bottom:20px;
	overflow:hidden;
	text-align: center;
	-moz-border-radius:3pt;
	-webkit-border-radius:4pt;
	-webkit-drop-shadow:#ccc 4pt; 
}
.slideShowNav { 
	position:absolute;
	bottom:-18px;	
	left:0px;
	padding:0px 3px 2px 0px;
	background-color:#fff; 
	width:100%;
}
.slideShowNavWrapper { float:right;  }
.slideShowTitle {
	float:left;
	color:#333;
	font-size:10pt;
}
.slideShowTitle .slideShowCounterText {
	font-size:6pt; color:#666; 
}
.slideShowHidden {
	position:absolute;
	display: none;
	height: 1px;
	width: 1px;
}
.slideShowImageWrapper {
	position:relative;
	text-align: center;
	margin-top: -42px;
	float: left;
	width: 100%;
}
.slideShowImageWrapper img {
	border: 0px none;
}
.slideShowNotifier {
	background-color: red;
	width: 100px;
	height: 5px;
	font-size: 1%;/*IE hack to get around the Empty-Div bug*/
}
.slideShowSlideShow {
	position:absolute;
	top:30px; 
	padding: 0 5px;
	border: 0px;
	text-decoration: none; 
	color: #2e6ab1;
}
.slideShowLoading { background-color: #fad66a; }
.slideShowLoaded { background-color: transparent; }
/*
.sprite-arrowbottom { background-position: 0 -30px; } 
.sprite-arrowtop { background-position: 0 -430px; } 
*/
.slideShowCtrlPrev {
	background-position: -96px 0px; 
	float: left;
}
.slideShowCtrlNext {
	background-position: -144px 0px;
	float: right;
}
.slideShowCtrlPlay {
	background-position: -190px 0px;
	position: absolute;
}
.slideShowPaused .slideShowCtrlPlay {
	background-position: -236px 0px;
	position: absolute;
}
.slideShowCtrl span.slideShowCtrlHide {
	background-image: url("../../../dojo/resources/blank.gif");
	cursor: auto;
}

.slideShowCtrl {
	height: 50px;
	width: 100%;
	position: relative;
	z-index:999;
	float: left;
}
.slideShowCtrl span {
	width: 50px;
	height: 100%;
	background-image: url("images/buttons.png");
	cursor: pointer;
}
.dj_ie6 .slideShowCtrl span {
	background-image: url("images/buttons.gif");
}

.dj_ie6 .slideShowPager li.currentpage,
.dj_ie6 .pagination li.disablepage{
    /*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/
    margin-right: 5px;
    padding-right: 0;
}

/* dojox.image.ThumbnailPicker */

.thumbWrapper .thumbNav {
	background-repeat: no-repeat;	
	background-position: center;
	padding-top: 1px;
	width: 30px;
	height: 100%;
}

.thumbOuter {
	padding-bottom: 2px;
}

.thumbOuter.thumbHoriz {
	width: 500px;
	height: 85px;
}

.thumbOuter.thumbVert {
	width: 100px;
	height: 400px;
}

.thumbOuter .enabled {
	background: transparent url("images/buttons.png") no-repeat center center;
}
.dj_ie6 .thumbOuter .enabled { background-image: url("images/buttons.gif"); }

.thumbOuter .thumbNav img {
	width: 48px;
	height: 75px;
}
.thumbOuter .thumbClickable div {
	cursor: pointer;
}
.thumbOuter .prevHoriz {
	background-position: -96px 12px;
	position: relative;
	float: left;
	height: 100%;
}

.thumbOuter .nextHoriz {
	background-position: -144px 12px;
	position: relative;
	float: right;
	height: 100%;
/*	margin-top: -85px;*/
}
.thumbOuter .prevVert {
	background-position: 0px 0px;
	height: 48px;
	width:48px;
	margin-left:24px;
}

.thumbOuter .nextVert {
	background-position: -48px 0px;
	height: 48px;
	width:48px;
	margin-left:24px;
}

.thumbWrapper img {
	height: 75px;
	max-width: 100px;
	width: expression(this.width > 100 ? 100: true);/*IE Hack*/
}

.thumbWrapper .thumbNav .imageGalleryThumb {
	height: 50px;
}

.thumbWrapper .thumbNotifier {
	background-color: red;
	width: 0px;
	margin-left: 2px;
	height: 5px;
	font-size: 1%;/*IE hack to get around the Empty-Div bug*/
}

.thumbWrapper .thumbLoaded {
	background-color: transparent;	
}

.thumbScroller {
	overflow-x: hidden;
	overflow-y: hidden;
	white-space: nowrap;
	text-align: center;
}

.thumbHoriz .thumbScroller {
	width: 500px;
	height: 85px;
	float: left;
}

.thumbVert .thumbScroller {
	height: 500px;
	width: 100px;	
}

.thumbWrapper {
	float: left;
}

.thumbVert .thumbWrapper {
	width: 100px;
	height: 10px;
}
.thumbHoriz .thumbWapper {
	height:85px;
	width: 10px;
}

.thumbWrapper.thumbHoriz div {
	float: left;
	padding-right: 2px;
}

.thumbWrapper.thumbVert {
	width: 100px;
}

.thumbWrapper.thumbVert div {
	padding-bottom: 2px;
}

/* dojox.image.Gallery */

.imageGalleryWrapper {
	padding-bottom: 20px;
	text-align: center;
}