/* Override default.css 
----------------------------------------------- */
html, body {
	background: transparent;
}

body {
	color: #000;
}

a {
	color: #00e;
}

h1,h2,h3,h4,h5,h6 {
	color: #000;
}

hr {
	background: #000;
}

#THEWRAPPER {
	background: transparent url('images/theme/h_b.jpg') bottom right no-repeat;
}

#RETURNOFTHEWRAPPER {
	background: transparent;
}

	/* Top
	----------------------------------------------- */
	#top,#topLogo {
		height: 80px; /* height: 76px; Change this to set how tall the top area is. */
	}

	#top {
		background: #fff; /* Sets an image at the top of the page. */
	}

	#topLogo {
		background: transparent url('./images/theme/logo.png') bottom left no-repeat; /* Sets a logo at the top of the page. */
	}

	#topLogo h1 {
		color: #407cc5;
	}
	
	/* Menu
	----------------------------------------------- */
	#menuBar,#menuBarBackground1,#menuBarBackground2 {
		height: 30px;
	}

	#menuBar {
		background: transparent url('images/menuBackground.png') bottom left repeat-x;
	}

	#menuBarBackground1 { /* Set background images for the menu bar */
		background: transparent url('images/menuLeft.png') bottom left no-repeat;
	}

	#menuBarBackground2 { /* Set background images for the menu bar */
		background: transparent url('images/menuRight.png') bottom right no-repeat;
	}

	/* Left Panel
	----------------------------------------------- */
	#leftPanel {
		background: transparent;
	}

	#leftPanelBottom {
		background: transparent url('images/theme/g_b.jpg') bottom left no-repeat; /* Sets an image at the bottom of the left panel. */
		*/
		width: 200px;
		height: 263px;
}

	/* Gallely
	----------------------------------------------- */
	#mainWrapper { /* Can set a background image in the area where the gallery is located. */
		background: transparent;
	}

	#centerContainer {
		background: transparent;
	}

	#BREADCRUMBS {
		border-bottom: 1px #aaa dashed;
	}

	#BREADCRUMBS a {
		border-bottom: 1px #00e solid;
		text-decoration: none;
	}

/* 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;
}

@media screen and (-webkit-min-device-pixel-ratio:0)
{
	.imageOverlay {
		background: transparent; /* Don't touch this */
		position: static;
	}
	.imageOverlay a {
		background: transparent url('./images/thumb_borders/blank.png') top center no-repeat; /* Don't touch this */
		width: 160; /* 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;
}