/**************************
*   EDIT STYLES
***************************/

/**************************
*   DISPLAY STYLES
***************************/
.gallery-header
{   
    height:28px;
} 

.gallery-container
{   
     border-left: solid 1px #999; 
     border-top: solid 1px #999;
     border-right: solid 1px #666; 
     border-bottom: solid 1px #666;
} 

/* to be dynamic generated based on config setting
.gallery-container
{
    width: 100%; 
    height: 580px; 
}
*/

.ui-layout-west
{ 
    padding: 0px;
    margin: 0px;           
    position: relative; 
    float: left;     
}

.ui-layout-center {
    position: relative;    
}  

.album-tree
{   
    margin: 3px;         
}

.content-area
{
    width: 100%;
}

/*
#tree-header
{    
	height: 26px;
	border-top:  solid 1px #ffffff;
	border-bottom:  solid 1px #999;	
	background-color: Red;
}

.style-panel ul
{
    padding: 6px;        
}
*/

.album-menu
{       
    padding:  1px 0 3px 22px;     
    background: url(images/edit.gif) no-repeat; 
    background-position:  0px -22px;        
}

.command-edit
{    
    padding:  1px 0 3px 22px;
    background: url(images/photo.gif) no-repeat; 
    background-position:  0px -22px;  
}

.command-slideshow
{    
    padding:  1px 0 3px 22px;    
    font-family: Arial;
    font-weight: normal;
    text-decoration: none;   
    background: url(images/video.gif) no-repeat; 
    background-position:  0px -22px;     
}

.command-slideshow:hover, .command-edit:hover, .album-menu:hover
{        
    font-weight: bold;  
    background-position:  0px 0px;     
}

/* border-width top/bottom is important for layout, do not change*/
#navigator
{   	
	height: 26px; 	
	padding-right: 10px; 
	border-top:  solid 1px #fff;
	border-bottom:  solid 1px #999;
	background-image: url("images/tab0.gif");
} 

/**/
#navigator ul
{  
	padding: 5px;	
}

#navigator ul li, #navigator ul a
{  	
	color: #333;  
}

#navigator ul a:hover
{         
     color: black;   
     text-decoration: none; 
}

.album-command, .info, .status 
{ 
    float: left;     
}

.pager-top, .pager-bottom
{
    width: auto;
    float: right; 
}

.pager-top li, .pager-bottom li
{      
    list-style: none; 
}

.pager-current
{   
    font-weight: bold; 
    color: Red;    
}

#pictures-area   
{   
    margin: 0 auto; 
}

.thumb-view
{
    text-align: center;         
}

.detail-view, .list-view
{
     border-top: solid 1px #bbb;  
     border-bottom: solid 1px #7e7e7e;  
}

.detail-view .picture-strip
{      
    padding:  15px 0 5px 15px;     
    position:  relative;     
}

.thumb-view .picture-strip
{       
    padding:   15px 0 5px 0;       
    position:  relative; 
    border-color: #999 #7e7e7e #7e7e7e #999;
    border-style:solid;
    border-width:1px;  
}

.list-view .picture-strip
{   
    padding:   5px 5px 0px 5px;   
    height: 28px;  
}

.thumb-view .picture , .detail-view .picture
{   
    padding: 1px;        
    background-color: #bbb; 
    border: 3px solid #fff;     
    list-style: none; 
    display: inline-block;
	overflow: hidden;  	
	z-index: 2; 
}

.list-view .picture
{
    border: 0;
    list-style: none; 
    display: inline-block;
	overflow: hidden;  	
	z-index: 2; 
}

.detail-view .picture, .list-view .picture {
	 float: left;	 
}

.thumb-view .picture {
	 float: none; 	
}

.display a 	
{
    color: #fff;
	text-decoration: none;
}

.display a img {	
	border: 0;	
	float: none;
}

.list-view a image 
{
    width: 24px;
    height: 24px;
}

.display .text 
{    
    padding: 5px;   
}

.detail-view .text, .list-view .text 
{
    float:left;   
    width: 75%;    
}

.thumb-view .text 
{
    float: none;
}

.display .text h2 {	
	padding: 0 0 0 5px;
    font-family: Arial;
    color: #fff;
    display: block;
    font-size: 12px;    
}

.thumb-view .text h2 
{
    float: none;
    height: 32px;
}

.detail-view .text h3 
{
    padding: 0 0 0 5px;
    font-family: Arial;
    color: #fff;
    display: block;
    font-size: 12px;
    font-weight: normal; 
}

.thumb-view .text h3, .list-view .text h3 
{   
	display: none;
}

.detail-view .text p {	
	padding: 5px 5px 5px 5px;	
	font-family: Arial;
    color: #eee;
    display: block;
	font-size: 12px;
    font-weight: normal; 
    font-style: italic;   
}

.thumb-view .text p , .list-view .text p 
{
	display: none;
}

.thumb-view .file-command, .detail-view .file-command
{
	display: none;
}

.list-view .file-command
{
	 float: right; 
}

#footer 
{    
    height: 28px;     
    padding-right: 10px;       
}

#footer ul 
{
   padding: 5px;    
}

#footer ul li, #footer ul a
{  	
	color: #333;  
}

#footer ul a:hover
{         
     color: black;   
     text-decoration: none; 
}

.status
{
    width: 16px;
}

.loadingimage
{
    position: absolute;   
    width: 28px;
    height: 28px;
    border: 0;
}

.button:hover
{
    border: none;    
} 

.button
{
   border-left: 0;
   border-top: 0;
   border-right: 0;
   border-bottom: solid 1px transparent;    
}



/**************************
*   STYLES
***************************/

.pin
{   
    margin: 1px;
    width: 28px;
	height: 21px;
	display: block;
	position: absolute;
	top: 0px;			
	background: url(images/style/pin.png) no-repeat;    
	z-index: 3;  
}

.mask
{   
    width: 110px;
	height: 110px;
	display: block;
	position: absolute;
	top: 14px;	
	background: url(images/style/mask-s.png) no-repeat;
	z-index: 3; 
}

.mask-darken
{   
    width: 108px;
	height: 156px;
	display: block;
	position: absolute;
	top: 3;	
	background: url(images/style/mask-v-darken.png) no-repeat;
	z-index: 3; 
}

.round-corner {
	width: 120px;
	height: 170px;
	display: block;
	position: absolute;
	top: 10;	
	background: url(images/style/round-corner.png) no-repeat;
}

.paper-clip {
	width: 30px;
	height: 60px;
	display: block;
	position: absolute;
	top: 10px;	
	background: url(images/style/paper-clip.png) no-repeat;
	z-index: 3; 
}

/*.golden-frame {*/
.golden-frame {
	width: 160px;	
	height: 210px; 
	display: block;
	position: absolute;	
	top: 10px;		
	background: url(images/style/gold-frame-v.png) no-repeat;		
}

.floral-corner
{
    margin: 1px;
	width: 120px;
	height: 72px;
	display: block;
	position: absolute;
	top: 0px;	
	background: url(images/style/floral-corner.png) no-repeat;
	z-index: 3;
}

.watercolor {
	width: 120px;
	height: 164px;
	display: block;
	position: absolute;
	top: 15px;	
	background: url(images/style/watercolor-top-v.png) no-repeat;	
}

.ancient {
	width: 116px;
	height: 160px;
	display: block;
	position: absolute;
	top: 15px;	
	opacity: 0.2;
	filter: alpha(opacity=20);	
	background: url(images/style/watercolor-bg-v.png) no-repeat;	
}

/**************************
*   UI.LAYOUT
***************************/

/* all 'panes' */ 
.pane  
{
    overflow: auto;
    padding: 1px !important;
    margin: 1px !important; 
    background-color: Transparent !important;     
} 

.pane-west {   
    border: 0 !important;
} 
    
.pane-center 
{
     border: 0 !important;            
}   

.resizer-west {	
	opacity: 1;
	filter: alpha(opacity=100);
}

.resizer-west:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

/*  .toggler-west-open:hover  .ui-layout-toggler-west-open*/
.toggler-west-open
{
    background-image: url("images/mini-left.gif") !important; 
}

.toggler-west-closed
{
    background-image: url("images/mini-right.gif") !important; 
} 

span.button-pin ,
span.button-close {
	position:	absolute;
	top:		0;
	width: 		20px;
	height:		20px;
	z-index:	2;
	display:	block;
	cursor: 	pointer;
}

#west-closer
{ 
    left:	 0 !important; 
    background-image: url(images/go-lt-off.gif) !important; 
}
span.button-pin-west	{ right: 1px; }
span.button-pin-east	{ left:	 1px; }

/* CUSTOM pin-buttons */
span.button-pin-up 		  		{ background: url(images/pin-up-off.gif) no-repeat center; }
span.button-pin-up:hover   		{ background: url(images/pin-up-on.gif)  no-repeat center; }
span.button-pin-down 	  		{ background: url(images/pin-dn-off.gif) no-repeat center; }
span.button-pin-down:hover 		{ background: url(images/pin-dn-on.gif)  no-repeat center; }

/* CUSTOM close-buttons */
.ui-layout-button-close-west			{ background-image: url(images/go-lt-off.gif); }*/
.ui-layout-button-close-west:hover	{ background-image: url(images/go-lt-on.gif)  no-repeat center; }

/**************************
*	UI ALL
***************************/
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui/ui-icons_222222_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui/ui-icons_888888_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui/ui-icons_454545_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui/ui-icons_454545_256x240.png); }
/*
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png); }
*/
.ui-icon-circle-arrow-e  
{
    background-image: url(images/ui/ui-icons_888888_256x240.png);
    background-position: -112px -192px; 
}

.ui-icon-circle-arrow-s 
{ 
    background-image: url(images/ui/images/ui/ui-icons_454545_256x240.png);
    background-position: -128px -192px; 
}

/**************************
*	ACCORDIAN WIDGET
***************************/

div.basic  {
	margin:  0;
	padding: 0;
}
.basic > div 
{
    padding-top: 3px; 
	background-color: transparent;
}
.basic > div.scrolling {
	overflow: auto !important;
}

.basic > div > p 
{    
	margin-bottom : 10px;
	border: none;
	text-decoration: none;
	font-weight: bold;
	font-size: 10px;
	margin: 0px;
	padding: 10px;
}
.basic > a {
	color: #333;
	font-weight: bold;
	font-size: 12px;
	text-decoration: none;
	cursor:pointer;
	display:block;
	padding:5px;
	margin-top: 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #999;
	background-image: url("images/tab0.gif");
}
.basic > a.selected ,
.basic > a.active ,
.basic > a:hover {
	color: black;
	background-image: url("images/tab2.gif");
}
.basic > a.active {
	color: #00C;
}

.accordion-header
{
    background-image: url("images/album_open.png");
}

/******************************************************************************* 
 * Tree container
 */
div.ui-dynatree-container
{
	font-family: arial;
	font-size: 10pt; /* font size should not be too big */
	white-space: nowrap; 
	padding-top: 5px; 
	background-color:Transparent;  
	border: 1px dotted gray;
}

/* Style, when control is disabled */
.ui-dynatree-disabled div.ui-dynatree-container
{
	opacity: 0.5;
/*	filter: alpha(opacity=50); /* Yields a css warning */
	background-color: silver; 
}


/******************************************************************************* 
 * Vertical line image
 */
div.ui-dynatree-container img
{
	width: 16px;
	height: 16px;
	margin-left: 3px;
	vertical-align: top;
	border-style: none;
}

/******************************************************************************* 
 * Common icon definitions
 */
span.ui-dynatree-empty,
span.ui-dynatree-vline,
span.ui-dynatree-connector,
span.ui-dynatree-expander,
span.ui-dynatree-icon,
span.ui-dynatree-checkbox
{
	width: 16px;
	height: 16px;
	display: -moz-inline-box; /* @ FF 1+2 */
	display: inline-block; /* Required to make a span sizeable */
	vertical-align: top;	
	background-repeat: no-repeat;
	background-position: left;	
}

/******************************************************************************* 
 * Lines and connectors
 */
span.ui-dynatree-empty
{
}
span.ui-dynatree-vline
{
	background-image: url("images/dynatree/ltL_ns.gif");
}
span.ui-dynatree-connector
{
	background-image: url("images/dynatree/ltL_nes.gif");
}
.ui-dynatree-lastsib span.ui-dynatree-connector
{
	background-image: url("images/dynatree/ltL_ne.gif");
}

/******************************************************************************* 
 * Expander icon
 * Note: IE6 doesn't correctly evaluate multiples class names,
 *		 so we create combined class names that can be used in the CSS.
 *
 * Prefix: ui-dynatree-exp-
 * 1st character: 'e': expanded, 'c': collapsed
 * 2nd character (optional): 'd': lazy (Delayed)
 * 3rd character (optional): 'l': Last sibling       
 */
 
span.ui-dynatree-expander
{
	background-image: url("images/dynatree/ltP_nes.gif");
	cursor: pointer;
}
.ui-dynatree-exp-cl span.ui-dynatree-expander /* Collapsed, not delayed, last sibling */
{
	background-image: url("images/dynatree/ltP_ne.gif");
}
.ui-dynatree-exp-cd span.ui-dynatree-expander /* Collapsed, delayed, not last sibling */
{
	background-image: url("images/dynatree/ltD_nes.gif");
}
.ui-dynatree-exp-cdl span.ui-dynatree-expander /* Collapsed, delayed, last sibling */
{
	background-image: url("images/dynatree/ltD_ne.gif");
}
.ui-dynatree-exp-e span.ui-dynatree-expander,  /* Expanded, not delayed, not last sibling */
.ui-dynatree-exp-ed span.ui-dynatree-expander  /* Expanded, delayed, not last sibling */
{
	background-image: url("images/dynatree/ltM_nes.gif");
}
.ui-dynatree-exp-el span.ui-dynatree-expander,  /* Expanded, not delayed, last sibling */
.ui-dynatree-exp-edl span.ui-dynatree-expander  /* Expanded, delayed, last sibling */
{
	background-image: url("images/dynatree/ltM_ne.gif");
}


/******************************************************************************* 
 * Checkbox icon
 */
span.ui-dynatree-checkbox
{
	margin-left: 3px;
	background-image: url("images/dynatree/cbUnchecked.gif");
}
span.ui-dynatree-checkbox:hover
{
	background-image: url("images/dynatree/cbUnchecked_hover.gif");
}

.ui-dynatree-partsel span.ui-dynatree-checkbox
{
	background-image: url("images/dynatree/cbIntermediate.gif");
}
.ui-dynatree-partsel span.ui-dynatree-checkbox:hover
{
	background-image: url("images/dynatree/cbIntermediate_hover.gif");
}

.ui-dynatree-selected span.ui-dynatree-checkbox
{
	background-image: url("images/dynatree/cbChecked.gif");
}
.ui-dynatree-selected span.ui-dynatree-checkbox:hover
{
	background-image: url("images/dynatree/cbChecked_hover.gif");
}

/******************************************************************************* 
 * Node type icon
 * Note: IE6 doesn't correctly evaluate multiples class names,
 *		 so we create combined class names that can be used in the CSS.
 *
 * Prefix: ui-dynatree-ico-
 * 1st character: 'e': expanded, 'c': collapsed
 * 2nd character (optional): 'f': folder
 */
 
span.ui-dynatree-icon /* Default icon */
{
	margin-left: 3px;
	background-image: url("images/dynatree/ltDoc.gif");
}

.ui-dynatree-ico-cf span.ui-dynatree-icon  /* Collapsed Folder */
{
	background-image: url("images/dynatree/ltFld.gif");
}

.ui-dynatree-ico-ef span.ui-dynatree-icon  /* Expanded Folder */
{
	background-image: url("images/dynatree/ltFld_o.gif");
}

/* Status node icons */

.ui-dynatree-statusnode-wait span.ui-dynatree-icon
{
	background-image: url("images/dynatree/ltWait.gif");
}

.ui-dynatree-statusnode-error span.ui-dynatree-icon
{
	background-image: url("images/dynatree/ltError.gif");
}

/******************************************************************************* 
 * Node titles
 */

/* Remove blue color and underline from title links */
div.ui-dynatree-container a 
{
	color: #333; /* inherit doesn't work on IE */
	text-decoration: none;
	vertical-align: top;
	margin: 0px;
	margin-left: 3px;	
/*	outline: 0; /* @ Firefox, prevent dotted border after click */
}

div.ui-dynatree-container a:hover
{
	text-decoration: none;
	color: #000;
}

span.ui-dynatree-document a,
span.ui-dynatree-folder a
{
	display: inline-block; /* Better alignment, when title contains <br> */  
/*	vertical-align: top;*/
    padding-top: 3px;
	padding-left: 3px;
	padding-right: 3px; /* Otherwise italic font will be outside bounds */
	/*	line-height: 16px; /* should be the same as img height, in case 16 px */
}
span.ui-dynatree-folder a
{
	font-weight: bold;
}

div.ui-dynatree-container a:focus,
span.ui-dynatree-focused a:link  /* @IE */
{
	background-color: #EFEBDE; /* gray */
}

span.ui-dynatree-expanded a
{
}

span.ui-dynatree-selected a 
{
	color: #333; 
	font-style: normal;
}

span.ui-dynatree-active a
{
    background-color: #999999 !important;
    color: white !important; /* @ IE6 */
}

/******************************************************************************* 
 * Custom node classes (sample) #3169C6
 */

span.custom1 a
{
	background-color: maroon;
	color: yellow;
}