@charset "utf-8";
a:link {
	color:#FF0000;        /*links are red */
}
a:visited {
	color:#FF0000;        /* visited links are red */
}
a:active {
	color:#FF0000;        /* active links are red */
}
a:hover {
	color:#D43F00;          /* hovered links are red */
	text-decoration:none;   /* hovered links have no underline */
}
body {  /* defaults for the entire page */
	margin: 0;     /* zero the margin and padding to account for differing browser defaults */
	padding-left:50px;
	padding-bottom:10px;
	padding-top:50px;
	text-align: left; /* this centers the container in IE 5* browsers.  */
	background-color:#000000;
	color: #ffffff;
}
#header { /* Tales of the Kitty logo */
	width: 880px;
	background-color:#ffffff;
}
#top-rounded {   /* the rounded top of the border */
	background-image:url(images/topcorner.jpg);
	height: 16px;
	background-repeat:no-repeat;
}
#bottom-rounded {  /* the rounded bottom of the border */
	background-image:url(images/bottomcorner.jpg);
	height: 16px;
	width:880px;
	background-repeat:no-repeat;
	float:left;
}
#container {         /* dimensions and defaults for the entire page */
	width: 880px;  /* The container will fit in an 800px browser window with room for scrollbar */
	background-color:#FFFFFF;
	/*height:585px;*/
	font-family:  Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	color:#000000; /*text*/
	text-align: left;  /* this overrides the text-align: center on the body element. */
	padding-bottom: 0px;  /* the 'breathing space' at the bottom */
	padding-top: 0px;     /* the 'breathing space' at the top */
	float:left;            /* keep the page all the way left, no matter how the brower is resized */
}
#footer_left {              /* the text in the left half of the footer of the page. Really small size. */
	padding-top:5px;
	font-size: 10px;
	color:#FFFFFF;
	background-color:#000000;
	float:left;
	width:500px;
}

#footer_right {              /* the text in the right half of the footer of the page. Really small size. */
	padding-top:5px;
	font-size: 10px;
	color:#FFFFFF;
	background-color:#000000;
	float:left;
	text-align:right;
	width:380px;
}
#sloppy_landscape {  /*ragged border around landscape pictures */
	width: 225px;
	height: 170px;
	background-image:url(images/sloppy2.jpg);
	padding-top: 24px;
	padding-left:1px;
	background-position:center;
	background-repeat:no-repeat;
	margin:auto;
}
#sloppyline {   /* the sloppy vertical line to the right of the main menu */
	background-image:url(images/sloppyline.jpg);
	background-repeat:repeat-y;
	width: 20px;
	height:auto;
}

#menu {              /* the left menu bar of every page */
	line-height: 1px;
	width: 161px;
	float:left;
}
#main {    /* the main body to the right of the menu on every page */
	width: 675px;
	float:left;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
/* a traditional popup, with black background and white text. Used on the Services page and home page. */
.thumbcat {
	position: relative;
	z-index: 0;
	color:#FF0033;
}
.thumbcat:hover {
	background-color: transparent;
	z-index: 50;
	color:#FF0033;
}
.thumbcat span { /*CSS for enlarged image*/
	position:absolute;
	background-color:#000000;
	padding: 3px;
	left: 0px;
	bottom: 0px;
	border: 1px gray;
	visibility: hidden;
	color: black;
	text-decoration: none;
	color:#000000;
}
.thumbcat span img { /*CSS for enlarged image*/
	border-width: 0;
	padding: 1px;
	color:#ffffff;
}
.thumbcat:hover span { /*CSS for enlarged image on hover*/
	position:absolute;
	visibility: visible;
	bottom: 20px;
	color:#ffffff;
	left: -100px; /*position where enlarged image should offset horizontally */
}

/* hidden popups. When hover on the secret word, the popup appears above the word, while the word turns red. */
.easteregg {
	position: relative;
	z-index: 0;
	color:#000000;
}
.easteregg:hover {
	background-color: transparent;
	z-index: 50;
	color:#FF0000;
}
.easteregg span { /*CSS for enlarged image*/
	position:absolute;
	background-color:#FFFFFF;
	padding: 3px;
	left: 0px;
	bottom: 0px;
	border: 1px gray;
	visibility: hidden;
	color: black;
	text-decoration: none;
	color:#000000;
}
.easteregg span img { /*CSS for enlarged image*/
	border-width: 0;
	padding: 1px;
	color:#000000;
}
.easteregg:hover span { /*CSS for enlarged image on hover*/
	position:absolute;
	visibility: visible;
	bottom: 15px;
	color:#000000;
	left: 0px; /*position where enlarged image should offset horizontally */
	z-index:50;
}

/* Hidden link. Right now used only on services page for Shelly's travel. */
.hiddenlink {
	color:#000000;
	text-decoration:none;
}
.hiddenlink:link {
	color:#000000;
	text-decoration:none;
}
.hiddenlink:active {
	color:#000000;
	text-decoration:none;
}
.hiddenlink:visited {
	color:#000000;
	text-decoration:none;
}
/* attributes for the photo galleries */
#gallery-space {   /* the entire gallery, with the main image and all the thumbnails */
	padding-top:10px;
	padding-left:10px;
	margin-right:5px;
	width:300px;
	height:300px;
	float:left;
}
#tile-space {   /* the thumbnail section.  */
	width:335px;
	height:340px;
	float:left;
	vertical-align:middle;
	overflow:hidden;
}
#gallery-tile {   /* each thumbnail. 16 can fit into the tile-space */
	background-color:#FFFFFF;
	width:70px;
	height:70px;
	padding-top: 3px;
	padding-left: 3px;
	padding-bottom: 5px;
	padding-right: 3px;
	margin-right: 5px;
	margin-bottom:5px;
	text-align:center;
	float:left;
}