@charset "utf-8";
/* CSS Document */

body {
	font-family:"Arial Narrow";
	background-color:#000;
	color:#FFF;
	top: 5px;
	left: 480px;
	right: 20px;
}

.header {
	font-size:24px;
	letter-spacing: 1em;
	margin-top: 10px;
	width: 70%;
	border-bottom-color:#CCC; border-bottom-style:groove;
	border-bottom-width: 1px;
	color: #FFF;
	padding-bottom: 5px;
	padding-left:5px;
}

/* formatting html elements on most pages */

hr {
	size:1px;
	color:#CCC;
	width: 100%;
	line-height: 1px;
	float: left;
}

a {border:none; border-color:#000;
}

a:active {outline:none; border:none; border-color:#000;
}

a:focus {outline:none; border:none; border-color:#000;
}


/* this is the stuff for the nav bar and subnav in the image/javascript driven horizontal version */
.navbar {padding-top:10px; border-bottom:#666;
}

.navbar img {outline:none; border:none; border-color:#000;
}

#subnav {padding-top:0px; padding-left:105px; visibility:hidden; letter-spacing:0.4em;
}

#subnav a {
	outline:none;
	border-color:#FFF;
	border-bottom: thin;
	color:#CCC;
	text-decoration:none;
}
	
#subnav a:hover {
	color:#FFF;
	font-family: "Arial Narrow";
}

#subnav img {vertical-align:middle;
}

#subnav .current {text-transform:capitalize; color:#FFF; font-weight:bold;
}


span {color:#666; padding-left:15px; padding-right: 15px;
}

/* this is the left hand div which contains the navigation images or could be used for text */

.imagegallery {
	background-color:#000;
	height:auto;
	width:210px;
	padding-top: 20px;
	padding-left: 5px;
	
}

.imagegallery img {width:70px; height:70px; border: 2px; padding-right: 10px; padding-bottom: 10px;
}

/* This defines the left gallery div on the front page only */
.homegallery {
	background-color:#000;
	height:450px;
	width:190px;
	padding-top: 20px;
	padding-left: 5px;
	
}

.homegallery img {width:80px; height:80px; border-left:10px;
}

/* this defines the position and visibility of the information layer on the KOTUZOW page which is hidden when images are moused over - the plain infolayer contains text whilst the infolayerFP is for images and has no size contraints so there is no overflow or part pictures */
#infolayerKOT {
	background-color: #000;
	vertical-align: top;
	display: inline-block;
	width: auto;
	overflow: auto;
	visibility:visible;
	z-index: auto;
	position: absolute;
	left: 380px;
	top: 212px;
	color:#CCC;
	width: 300px;
	height:auto;
	text-align:justify;
}

/* this defines the position and visibility of the information layer on the the other gallery pages which is hidden when images are moused over - the plain infolayer contains text whilst the infolayerFP is for images and has no size contraints so there is no overflow or part pictures */

#infolayer {
	background-color: #000;
	vertical-align: top;
	display: inline-block;
	width: auto;
	overflow: auto;
	visibility:visible;
	z-index: auto;
	position: absolute;
	left: 380px;
	top: 118px;
	color:#CCC;
	width: auto;
	height:auto;
	text-align:justify;
}

.infolayerFP {
	background-color: #000;
	vertical-align: top;
	width: auto;
	overflow: auto;
	visibility: hidden;
	z-index: auto;
	position: absolute;
	left: 380px;
	top: 212px;
	color: #CCC;
	height: auto;
	text-align: left;
}

/* this defines the location and size of the larger image frame in all galleries except Kotuzow - note the PIC */
.infolayerPIC {
	background-color: #000;
	vertical-align: top;
	width: auto;
	overflow: auto;
	visibility: hidden;
	z-index: auto;
	position: absolute;
	left: 380px;
	top: 120px;
	color: #CCC;
	height: auto;
	text-align: left;
}

/* this positions the Kotuzow box on the Kotuzow gallery only */
.kotuzowICON {
	background-color: #000;
	vertical-align: top;
	display: inline-block;
	width: 300;
	overflow: auto;
	visibility:visible;
	z-index: auto;
	position: absolute;
	left: 380px;
	top: 120px;
	color:#CCC;
	width: 223px;
	height:83px;
	text-align:justify;
}

/* this is the title box for all the other galleries */
.titles {
	background-color: #000;
	vertical-align: top;
	display: inline-block;
	overflow: auto;
	visibility:hidden;
	z-index: auto;
	position: absolute;
	left: 180px;
	top: 120px;
	color:#CCC;
	width: 175px;
	height:auto;
	text-align:justify;
	letter-spacing: 0.1em;
	font-size:medium;
}

.Xinfo {
	background-color: #000;
	vertical-align: top;
	display: inline-block;
	overflow: auto;
	visibility:hidden;
	z-index: auto;
	position: absolute;
	left: 30px;
	top: 400px;
	color:#CCC;
	width: 330px;
	height:auto;
	text-align:justify;
	letter-spacing: 0.1em;
	font-size:medium;
}

/* this defines the position and visibility of the image layers which hide the info layer when images are moused over */

#layer {
	background-color: #000;
	vertical-align: top;
	display: inline-block;
	width: auto;
	overflow: auto;
	visibility: hidden;
	z-index: auto;
	position: absolute;
	left: 380px;
	top: 200px;

}

#extralayer {
	background-color: #000;
	vertical-align: top;
	display: inline-block;
	width: auto;
	overflow: auto;
	visibility: visible;
	z-index: auto;
	position: absolute;
	left: 180px;
	top: 120px;

}

/* under construction information frame */

#infolayerConstruct {
	background-color: #000;
	vertical-align: top;
	display: inline-block;
	width: 220px;
	overflow: auto;
	visibility:visible;
	z-index: auto;
	position: absolute;
	left: 380px;
	top: 118px;
	color:#CCC;
	height:auto;
	text-align:justify;
}

#infolayerConstruct img {border:5px; border-color:#CCC;
}