@import url('c_pds.css');

/*	utils
		* gal_ready - 이미지 로딩을 위한 빈 div
		* gal_progress - 이미지 로딩 중 표시 영역		*/
#gal_ready {width:0px;height:0px;overflow:hidden;position:absolute;top:-2000px;left:0;}
#gal_progress {position:absolute;top:210px;left:0;padding:15px;width:668px;color:#fff;text-align:center;z-index:1000;display:none;}

/*	wrap_gallery - 그룹 영역을 제외한 다이나믹 갤러리를 감싸는 영역 position 속성 수정 불가	*/
#wrap_gallery {position:relative;width:700px;overflow:hidden;}

/*	Image display
		* gal_display - 이미지 표시 영역
			속성 수정 불가 : position, z-index , 필수 속성 : width, height
		* gal_display - position 속성 수정 불가 */
#gal_display {position:relative;z-index:2;width:698px;height:525px;margin:0 auto;border:1px solid #D6D5D3;background-color:#FFF;}
#gal_display img {position:absolute;cursor:pointer;}

/*	Image thumbnail list 1 (로딩시 현재 이미지와 함께 불러지는 썸네일 리스트 영역)
		* gal_list - 속성 수정 불가 : position, overflow  필수 속성 : width, height
		* gal_list ul - gal_list 요소 내에 동적으로 생성되는 썸네일 리스트
			속성 수정 불가 - position, margin, padding, top, left
		* gal_list ul li - 속성 수정 불가 : float, overflow  필수 속성 : width, height, margin-right
			(이미지의 border 값을 포함한 사이즈를 지정해야 함)
		* gal_list ul li img - 필수 속성 : width, height
		* gal_list ul li.on - 활성화 된 아이템 스타일 지정	*/
#gal_list {position:relative;overflow:hidden;width:546px;height:70px;top:8px;left:50px;}
#gal_list ul {position:absolute;top:0;left:0;margin:0;padding:0;list-style-type:none;}
#gal_list ul li {float:left;overflow:hidden;width:91px;height:70px;margin:0;padding:0;text-align:center;line-height:0;font-size:0;}
#gal_list ul li img {width:85px;height:68px;border:1px solid #CCC;cursor:pointer;}
#gal_list ul li.on img {border:1px solid #000;}

/*	Image thumbnail list 2 (썸네일 리스트 아이콘 클릭시 나타나는 썸네일 영역)
		* gal_thumblist - 속성 수정 불가 : overflow, display  필수 속성 : width, height
		* gal_thumblist_close - 썸네일 리스트 닫기 버튼 스타일 지정
		* wrap_gal_thumbArea - 썸네일 리스트 배경 이미지 혹은 컬러 지정
			속성 수정 불가 : position, z-index, 필수 속성 : top, left, width, height
		* gal_thumbArea - 속성 수정 불가 : position , 필수 속성 : width
		* .gal_thumbArea - 커스텀 클래스	*/
#gal_thumblist {position:relative;top:15px;overflow:hidden;display:none;width:670px;height:671px;margin:0 auto;}
#gal_thumblist_close {cursor:pointer;z-index:11;}
#wrap_gal_thumbArea {position:absolute;z-index:5;top:0;left:0;width:762px;height:670px;background:#fff;}
#gal_thumbArea {position:absolute;width:690px;}
#gal_thumbArea ul {padding:0;margin:0;list-style-type:none;}
#gal_thumbArea ul li {float:left;margin:0;padding:0 0 0 4px;font-size:0;width:226px;height:205px;background:url('/lineage2/pds/gallery/bg_listthum.gif') no-repeat;}
#gal_thumbArea ul li.on img {}
#gal_thumbArea ul li img {width:201px;height:144px;margin:4px 0 10px 0;cursor:pointer;display:block;}
#gal_thumbArea ul li a {width:98px;height:17px;margin:0 6px 0 0;display:block;float:left;color:#fff;}
#gal_thumbArea ul li a.download1 {background:url('/lineage2/pds/gallery/btn_800.gif') no-repeat;}
#gal_thumbArea ul li a.download2 {background:url('/lineage2/pds/gallery/btn_1024.gif') no-repeat;}
#gal_thumbArea ul li a.download3 {background:url('/lineage2/pds/gallery/btn_1280.gif') no-repeat;}
#gal_thumbArea ul li a.download4 {background:url('/lineage2/pds/gallery/btn_1600.gif') no-repeat;}
#gal_thumbArea ul li a.download5 {background:url('/lineage2/pds/gallery/btn_1920.gif') no-repeat;}
#gal_thumbArea_stage {position:relative;top:0;left:0;width:690px;height:615px;overflow:hidden;z-index:10;}

/*	Scroll
		* wrap_scroll_handle - 스크롤 트랙 영역
			속성 수정 불가 : z-index , 필수 속성 : width, height
		* scroll_handle - 스크롤 핸들 영역
			필수 속성 : width, height		*/
#wrap_scroll_handle {position:absolute;top:43px;left:723px;z-index:1000;width:15px;height:468px;background:#1f1f1f;}
#scroll_handle {width:15px;height:135px;cursor:pointer;background:url(/library/source/dynamic/gallery/images/dy1v/scroll_btn.gif) no-repeat;}

/*	Navigation
		custom class - 속성 수정 불가 및 필수 속성 없음.		*/
#gal_before {left:2px;}
#gal_prev {left:24px;}
#gal_next {right:76px;}
#gal_after {right:54px;}
#gal_play_posi{right:2px;}
#gal_thumb {position:absolute;top:10px;right:0;cursor:pointer;}

/*   이미지 위치 정보 */
#wrap_gallery #gal_pos {position:absolute;z-index:6;top:538px;right:0;width:45px;height:15px;padding:3px 0;text-align:center;font-family:Tahoma;font-size:11px;color:#CCC;background:url('/lineage2/pds/gallery/bg_imgnumber.gif') no-repeat;}
#wrap_gallery #gal_pos b {color:#EBEBEB;}

#wrap_gallery_navi {position:relative;clear:both;width:700px;height:86px;border:solid #C9C9C9;border-width:1px 0;background-color:#FFF;}
#wrap_gallery_navi span {position:absolute;top:18px;cursor:pointer;}

/*	Description
	 	custom class - 속성 수정 불가 및 필수 속성 없음.		*/
#wrap_gallery_desc {position:relative;width:621px;height:40px;overflow:hidden;margin:1px 0;}
#wrap_gallery_desc div {clear:both;}
h5#gal_title {float:left;margin:0;padding:10px 0 0 10px;font-size:0.9em;color:#dadada;}
#gal_writer, #gal_date, #gal_pos {float:right;padding:5px 5px 0 0;font-size:0.9em;color:#999;}
#gal_description {float:left;padding:5px 0;margin:0;font-size:0.9em;color:#999;}
.download {float:left;padding:13px 5px 0 0;}

/*	Group - 그룹 영역 스타일 지정
		* gal_group 요소 안에 동적으로 리스트 생성(아래는 실제 생성되는 마크업)
		<div id="gal_group">
			<ul>
				<li>
					<div><img src="" alt="" /></div>
					<h6>그룹 타이틀</h6>
					<p>그룹 설명</p>
				</li>
			</ul>
		</div>
*/
/* gal_group */
#gal_group {position:relative;margin:20px auto;width:762px;overflow:hidden;}
#gal_group ul {padding:0;margin:0;list-style-type:none;}
#gal_group li {width:370px;min-height:125px;margin:1px;float:left;cursor:pointer;padding:0 0 5px 0;border-bottom:2px solid #d4d4d4;}
#gal_group li.on {border-bottom:2px solid #a6a6a6;}
#gal_group li div {width:178px;min-height:112px;float:left;}
/*#gal_group li div:hover {overflow:visible;}*/
#gal_group li div img {width:160px;height:112px;padding:5px 0 5px 7px;}
#gal_group h6 {color:#5d5d5d;font-size:1.2em;margin:0;padding:4px 0 3px 7px;}
#gal_group li.on h6 {color:#000;}
#gal_group li.on p {color:#000;}
#gal_group p {font-size:1.0em;color:#666;line-height:170%;margin:0;padding:0 5px 15px 7px;}

/*	Layer Popup - 원본 이미지 보기 팝업
		* gal_popup - 수정 불가 : position, top, z-index
		* popup_handle - 레이어 팝업의 핸들 영역  수정불가 : position, cursor
		* popImg_next, prev - 이전/다음 영역 지정	*/
#gal_popup {position:absolute;top:-2000px;left:0;z-index:99999999;background:#404040 url('/lineage2/pds/gallery/popup_bg.gif') top repeat-x;border:1px solid #666;padding:37px 82px 60px 82px;cursor:move;}
#gal_popup img.close {position:absolute;right:17px;top:17px;cursor:pointer;}
#gal_popup #popup {position:relative;text-align:center;}
#gal_popup img.image {display:block;text-align:center;border:2px solid #1f1f1f;cursor:pointer;}

/* Lineage Layer Popup */
#popup_navi #popImg_prev {position:absolute;top:45%;left:25px;z-index:50;cursor:pointer;}
#popup_navi #popImg_next {position:absolute;top:45%;right:25px;z-index:50;cursor:pointer;}
#popup_navi div {position:absolute;bottom:24px;left:82px;z-index:50;cursor:normal;}


/* Lineage Gallery thumbnail list pagination */
#gal_thumblist #thumb_pager {position:absolute;bottom:20px;width:670px;padding:10px 0 0 0;border-top:1px solid #89BFC9;z-index:12;}
#gal_thumblist #thumb_pager span {cursor:pointer;}