/* Left Panel
----------------------------------------------- */
#directoryList li {
	margin-bottom: 13px;
	margin-left: 1.5em;
	line-height: 14px;
	list-style-type: none;
	overflow: hidden;
	word-wrap: break-word;
}

#directoryList li a, .captionText {
	-moz-binding: url('./wordwrap.xml#wordwrap');
}

.directoryOnList, .directoryOnList a {
	color: #000;
	font-weight: bold;
}

.imageOnList, .imageOnList a {
	color: #000;
}

.directoryPrevious, .directoryNext {
	margin: auto;
}

.directoryOnList a, .imageOnList a, .directoryPrevious a, .directoryNext a {
	text-decoration: none;
}

.directoryPrevious a:hover, .directoryNext a:hover {
	text-decoration: underline overline;
	background: #fff;
}

.directoryPreviousNext {
	margin: auto 1em auto 1.5em;
}

.directoryPrevious {
	float: left;
	margin-left: 1.5em;
}

.directoryNext {
	float: right;
	text-align: right;
	margin-bottom: 1em;
	margin-right: 0em;
}

#directoryTips {
	clear: both;
	margin-left: 1em;
	margin-top: 1.5em;
}

/* Gallely
----------------------------------------------- */
.gallelyCellWrap, .gallelyCellFolder {
	background: transparent;
	display: inline-block;
	width: 192px; /* 150px = 182 px (add 32 to your thumbnail size) */
	margin: 5px auto 20px auto;
	text-align: center;
	vertical-align: top;
}

.gallelyCellWrap, x:-moz-any-link {
	display: -moz-inline-stack;
	width: 172px; /* 150px = 162px (add 12) */
	margin: 10px 8px 15px 8px;
}

.gallelyCellFolder, x:-moz-any-link {
	display: -moz-inline-stack;
	width: 176px; /* 150px = 166px (add 16) */
	margin: 10px 8px 15px 8px;
}

.gallelyCellWrap, .gallelyCellFolder, x:-moz-any-link, X:default {
	display: inline-block;
	width: 192px; /* 150px = 182 px (add 32) */
	margin: 5px auto 20px auto;
}

.gallelyCell { /* Entire cell for both image and captions */
	color: #407cc5;
	display: block;
	width: 160px; /* 150px = 150px (add 0) */
	margin: auto;
	padding: 5px;
	position: relative;
	vertical-align: top;
}

.gallelyCell, x:-moz-any-link {
	width: 172px; /* 150px = 162px (add 12) */
}

.gallelyCell, x:-moz-any-link, x:default {
	width: 160px; /* 150px = 150px (add 0) */
}

.imageContainer { /* Image thumbnail area */
	display: table-cell;
	width: 160px; /* 150px = 150px (add 0) */
	height: 160px; /* 150px = 150px (add 0) (height, not width of the thumbnail size I guess) */
	margin: auto;
	text-align: center;
	vertical-align: middle;
}

.captionContainer {
	display: block;
	margin: 5px auto auto auto;
}

.captionContainer, x:-moz-any-link {
	padding-bottom: 10px;
}

.captionContainer, x:-moz-any-link, x:default {
	padding-bottom: 0;
}


.captionText { /* Container for captions */
	display: block;
	margin: auto;
	min-height: 1px;
	padding: 3px;
	text-align: center;
	overflow: hidden;
	word-wrap: break-word;
}

/* Image Types
----------------------------------------------- */
.normalImage {
	border: 1px #000 solid;
}

.gallelyFolder {
	border: 3px #000 solid;
	font-weight: bold;
}

.animatedGIF {
	border: 3px red solid;
}

/* Image Overlay
----------------------------------------------- */
.imageWrap {
}

.imageOverlay {
	background: transparent url('./images/thumb_borders/blank.png') top center no-repeat; /* Don't touch this */
	width: 160px; /* 150px = 150px (add 0) */
	height: 160px; /* 150px = 150px (add 0) (height, not width of the thumbnail size I guess) */
	position: absolute;
	z-index: 2;
}

.imageOverlay, x:-moz-any-link {
	margin-left: -80px; /* 150px = -75px  (thumbnail size divided by -2) */
}

.imageOverlay a:hover {
/*	background: transparent url('./images/thumb_borders/border.png') top center no-repeat; */
/* UNCOMMENT THE ABOVE LINE IF YOU WANT THE HOVER-OVER BORDER  REMEMBER TO DO THIS IN IE6.css*/
	/* Use your own image overlay (remember to make a GIF version for IE6 and make the edit in ie6.css) */
	opacity: 0.65; /* Change how visible it is (doesn't work in IE) */
}

.imageOverlay a {
	cursor: pointer;
	display: block;
	width: 160px; /* 150px = 150px */
	height: 160px; /* 150px = 150px (height, not width of the thumbnail size I guess) */
}

/* Cell Color
----------------------------------------------- */
.cellEven {
	background: #fefefe;
	color: #000;
}

.cellOdd {
	background: #fafafa;
	color: #000;
}

.cellSelected {
	background: #eee;
	color: #fff;
}

.cellOverwrite {
}

.cellHover {

}

.cellHover:hover {
	background: transparent;
	border: 1px transparent solid;
}

.gallelyFolder:hover {
	border: 3px transparent solid;
}

/* Pagination Stuff
----------------------------------------------- */
.paginationArea {
	margin: 1em auto 1em auto;
	text-align: center;
}

.paginationNumbers {
	background: transparent;
	font-size: 16px;
	line-height: 22px;
	padding: 3px;
}

.arrowArea {
	color: #000;
	display: inline-block;
	font-size: 22px;
	height: 24px;
	width: 26px;
	text-decoration: none;
}

.arrowArea:hover {
	background: #ccc;
}

.arrowAreaBlank {
	visibility: hidden;
}

.pageNumberArea,.pageNumberAreaCurrent {
	border: 1px #000 solid;
	color: #000;
	display: inline;
	font-size: 16px;
	height: 22px;
	padding: 2px 6px 2px 6px;
	text-decoration: none;
}

.pageNumberArea:hover {
	background: #ccc;
	text-decoration: underline;
}

.pageNumberAreaCurrent {
	border: 0;
	font-weight: bold;
}

.hiddenThings {
	display: none;
}