/* 
 * ezoulou made gallery
 */

/* hide image because we put it as background via xsl --- > but not in the lightbox! > we need the image there!! */
#gallery .image img {
	display:none;
}
#gallery .image {
	background-color:black;
	background-position:50% 50%;
	background-repeat:no-repeat;
	display:block;
}

/* mode page : table of thumbnails and javascipt navigation system */
#gallery.modepage .images {
	margin:auto;
	padding-top:11px;
	position:relative;
	z-index:90;
}
#gallery.modepage .images:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
#gallery.modepage .image {
	float:left;
	height:185px;
	margin:11px;
	width:185px;
}
#gallery.modepage .image:hover {
	background-color:white;
}
#gallery .image a {
	background:transparent no-repeat 100% 100%;
	display:block;
	height:100%;
	width:100%;
}
/* hide stuff only used by jquery in the lightbox */
#gallery.modepage .image .more {
	display:none;
}

/*
 * mode image : in case javascript is not active, this style the image/video page
 */
#gallery.modeimage .image {
	height:80%;
	margin:auto;
	position:relative;
	width:100%;
}
#gallery.modeimage .more {
	bottom:0;
	display:none;
	position:absolute;
	width:100%;
}
#gallery.modeimage .image:hover .more {
	display:block;
}


/* 
 * common image desc 
 * */
#lightbox-image-details .more, 
#gallery .more {
	background-color:#666;
	color:white;
	height:60px;
	line-height:100%;
	text-align:left;
}

#lightbox-image-details .title, 
#gallery .title {
	background-color:white;
	height:18px;
	padding:6px;
}
#lightbox-image-details .title strong, 
#gallery .title strong {
	color:black;
	letter-spacing:-1px;
	line-height:110%;
	padding-right:0.5em;
	text-transform:uppercase;
}
#lightbox-image-details .title em, 
#gallery .title em {
	color:#666;
	display:inline;
	font-size:70%;
	font-style:normal;
}
#lightbox-image-details .action, 
#gallery .action {
	font-size:90%;
	padding:8px;
}
#lightbox-image-details .available, 
#gallery .available {
	background:transparent url(../images/checked-green.png) no-repeat 100% 10%;
	padding-right:25px;
}
#lightbox-image-details .available.not, 
#gallery .available.not {
	background-image:none;
	color:#aaa;
	font-style:italic;
	padding-right:0;
}
#lightbox-image-details .form, 
#gallery .form {
	float:right;
	height:10px;
}
#lightbox-image-details .form h2, 
#gallery .form h2 {
	color:#ffcc00;
	display:inline;
	font-size:92%;
/*	font-style:italic; */
	font-weight:normal;
	float:left;
	line-height:130%;
	margin:0;
	padding-right:6px;
}
#lightbox-image-details .form .formItem, 
#gallery .form .formItem {
	display:inline;
	margin-bottom:0;
	margin-right:20px;
}
#lightbox-image-details .form .formItem.warning, 
#lightbox-image-details .form .formItem.warning .formField, 
#gallery .form .formItem.warning, 
#gallery .form .formItem.warning .formField {
	color:#fc0;
}
#lightbox-image-details .form label, 
#gallery .form label {
	width:auto;
}
#lightbox-image-details .form .field, 
#gallery .form .field {
	margin-top:-2px;
	width:200px;
}
#lightbox-image-details .formRequiredMarker, 
#gallery .formRequiredMarker {
	display:none;
}
#lightbox-image-details .form .button, 
#gallery .form .button {
	background:transparent url(../images/arrow-swoosh-yellow.png) no-repeat 50% 3px;
	border:0; 
	float:right;
	height:2em;
/*	right:5px;*/
	margin:-2.5em -10px 0 0;
	padding:0;
/*	position:absolute;*/
	text-indent:-10000px;
	width:50px;	
}




/* lightbox specials */

#lightbox-image-details-currentNumber {
	color:#999;
	font-size:80%;
	position:absolute;
	text-align:center;
	bottom:3px;
	width:100%;
}
#lightbox-image-details-currentNumber {
	bottom:auto;
	font-size:70%;
	right:4px;
	text-align:left;
	top:5px;
	width:auto;
}

/*
.ezoulouGallery #lightbox-container-image-data-box {
	margin-top: -80px;
}
.ezoulouGallery #lightbox-image-details {
	height:80px;
	text-align:left;
}
.ezoulouGallery #lightbox-image-details .title {
	height:34px;
	padding:8px;
}
.ezoulouGallery #lightbox-image-details .title strong {
	color:black;	
	padding:0;
	width:auto;	
}
*/


/*
 * /*
#lightbox-image-details {
	background-color: white;
	color:#4d4d4d;
	font-size:100%; 
	height:60px;
	line-height:100%;
	text-align:center;
	width:100%;
}



#lightbox-image-details .title {
	display:block;
	padding:8px 0;
	position:relative;
}
#lightbox-image-details .title strong {
	color:white;
	display:block;
	font-size:130%;
	line-height:110%;
	padding:0 3%;
	position:absolute;
	text-transform:uppercase;
	top:8px;
	width:94%;
}
#lightbox-image-details .title em {
	font-size:90%;
	font-style:normal;
	position:absolute;
	top:28px;
}
#lightbox-image-details .action {
	background-color:#666;
	color:white;
	font-size:90%;
	height:14px;
	padding:8px;
}
#lightbox-image-details .available {
	background:transparent url(../images/checked-green.png) no-repeat 100% 10%;
	padding-right:25px;
}
#lightbox-image-details .available.not {
	background-image:none;
	color:#aaa;
	font-style:italic;
	padding-right:0;
}

*/
/*
#lightbox-image-details .form {
	float:right;
	height:20px;
}
#lightbox-image-details .form h2 {
	background:transparent url(../images/arrow-white.png) no-repeat 95% 0.1em;
	float:left;
	font-size:100%;
	font-weight:normal;
	line-height:100%;
	padding-right:30px;
}
#lightbox-image-details .form .formItem {
	display:inline;
}
#lightbox-image-details .form .formItem.warning, 
#lightbox-image-details .form .formItem.warning .formField {
	color:#fc0;
}
#lightbox-image-details .form label {
	width:auto;
}
#lightbox-image-details .form .field {
	margin-right:20px;
	width:200px;
}
#lightbox-image-details .formRequiredMarker {
	display:none;
}
#lightbox-image-details .form .button {
	background:transparent url(../images/arrow-swoosh-yellow.png) no-repeat 50% 3px;
	border:0;
	display:block;
	height:2em;
	right:5px;
	margin:-2.5em 0 0 0;
	padding:0;
	position:absolute;
	text-indent:-10000px;
	width:50px;	
}
*/


/*
#lightbox-image-details form {
	background-color:#666;
	margin-top:-2px;
	position:absolute;
	right:10px;
	width:auto;	 
	z-index:30;
}
#lightbox-image-details .text {
	background:transparent;
	border:0;
	border-bottom:2px dashed white;
	color:white;
	font-style:italic;
	width:77px;
}
#lightbox-image-details .button {
	background:transparent url(../images/arrow-swoosh-yellow-small.png) no-repeat 0 3px;
	border:0;
	cursor:pointer;
	margin-left:7px;
	text-indent:-10000px;
	width:13px;
}

*/
/*


 */

 
 
 
 
 
/*
 * navigation and interaction mechanisms for mode @page so far... the navigation in the lightbox is different :-(
 */
#gallery .filters {
	clear:both;
	position:relative;
	text-align:center;
	z-index:50;	
}
#gallery .filters a {
	background:white no-repeat 0 4px;
	color:white;
	font-style:normal;
	margin-left:10px;
	outline:none;
	text-decoration:none;
	padding:3px 5px 3px 25px;
}
#gallery .filters a.selected {
	background-color:#333;
}
#gallery .filters span {
	display:none;
}

#gallery .navigation {
	position:absolute;
	top:3em;
	width:100%;
	z-index:2;
} 
#gallery .navigation .prev, 
#gallery .navigation .next {
	background:white no-repeat 0 50%;
	height:50%;
	left:0;	
	outline:none;
	position:absolute;
	text-indent:-10000px;
	top:22%;
	width:80px;	
}
#gallery .navigation .next {
	background-position:100% 50%;
	left:auto;
	right:0;
}
#gallery .pager {
	clear:both;
	line-height:130%;
	margin:0;
	padding-top:11px;
	position:relative;
	text-align:center;
	z-index:50;
}
#gallery .pager a {
	border:1px solid white;
	margin:0 4px;
	padding:2px 7px;
}
#gallery .pager a.selected, 
#gallery .pager a:hover {
	background-color:white;
	color:black;
	text-decoration:none;
}